README.md

Getting started with Azure App Service Web Apps and ASP.NET

This lab shows how to create an ASP.NET web application and deploy it to an Azure App Service Web App by using Visual Studio 2015 Preview. It assumes that you have no prior experience using Azure or ASP.NET. On completing the lab, you will have a simple web application up and running in the cloud.

This lab includes the following sections:

1. Create an ASP.NET web application in Visual Studio
2. Deploy the application to Azure
3. Make a change and redeploy
4. Monitor and manage the site in the preview portal
5. Appendix - Cleanup

Create an ASP.NET web application

In this task you will create the web application that is going to be used throughout this lab.

1. Open Visual Studio. From the File menu, hover over the New option and click Project.

   

   New Project in File menu

2. In the New Project dialog box, expand C# and select Web under Installed Templates, and then select ASP.NET Web Application.

3. Name the application ContactManager and click OK.

   

   New Project dialog box

   Note: Make sure you enter "ContactManager". Code blocks that you will be copying later assume that the project name is ContactManager.

4. In the New ASP.NET Project dialog box, select the MVC template. Verify Authentication is set to Individual User Accounts, Host in the cloud is checked and Web App is selected. Then, click OK.

   

   New ASP.NET Project dialog box

5. If you haven't already signed in to Azure, Visual Studio prompts you to do so. Click Sign In. Follow the prompts and provide your credentials.

   

   Sign in to Azure

6. The configuration wizard will suggest a unique name based on ContactManager (see the image below). Select a region near you. You can use azurespeed.com to find the lowest latency data center.

7. If you haven't created a database server before, select Create new server, enter a database user name and password.

   

   Configure Azure Web App

   If you have a database server, use that to create a new database. Database servers are a precious resource, and you generally want to create multiple databases on the same server for testing and development rather than creating a database server per database. Make sure your Web App and database are in the same region.

8. Click OK.

   In a few seconds, Visual Studio creates the web project in the folder you specified, and it creates the Web App in the Azure region you specified.

   The Solution Explorer window shows the files and folders in the new project.

   

   Solution Explorer

   The Azure App Service Activity window shows that the Web App has been created.

   

   Web App created

   And you can see the Web App and database in Server Explorer.

   Note: if the Server Explorer window is not open, you can open it from the View menu.

   

   Web App created

Deploy the application to Azure

1. In the Azure App Service Activity window, click Publish ContactManager to this Web App now.

   

   Azure App Service Activity Window

   In a few seconds the Publish Web wizard appears.

   The settings that Visual Studio needs to deploy your project to Azure have been saved in a publish profile. The wizard enables you to review and change those settings.

2. In the Connection tab of the Publish Web wizard, click Validate Connection to make sure that Visual Studio can connect to Azure in order to deploy the web project.

   

   Validating the connection

   When the connection has been validated, a green check mark is shown next to the Validate Connection button.

3. Click Next.

   

   Successfully validated connection

4. The Settings tab is shown. If you expand File Publish Options you will see several settings that enable you to handle scenarios that don't apply to this lab:

   • Remove additional files at destination.

     Deletes any files at the server that aren't in your project. You might need this if you were deploying a project to a site that you had deployed a different project to earlier.

   • Precompile during publishing.

     Can reduce first-request warm up times for large sites.

   • Exclude files from the App_Data folder.

     For testing you sometimes have a SQL Server database file in App_Data which you don't want to deploy to production.

   In this case, keep the default values for Configuration and File Publish Options and click Next.

   

   Settings tab

5. In the Preview tab, click Start Preview.

   

   Start Preview button - Preview tab

   The tab displays a list of the files that will be copied to the server. Displaying the preview isn't required to publish the application but it's a useful function to be aware of.

6. Click Publish.

   

   File Preview

   Visual Studio begins the process of copying the files to the Azure server.

   The Output and Azure App Service Activity windows show what deployment actions were taken and report successful completion of the deployment.

   

   Azure App Service Activity reporting successful deployment

   

   Output Window reporting successful deployment

   Upon successful deployment, the default browser automatically opens to the URL of the deployed Web App, and the application that you created is now running in the cloud. The URL in the browser address bar shows that the site is being loaded from the Internet.

   

   Web App running in Azure

7. Close the browser.

Make a change and redeploy

In this task, you will change the h1 heading of the home page, run the project locally on your development computer to verify the change, and then deploy the change to Azure.

1. Open the Views/Home/Index.cshtml file in Solution Explorer, change the h1 heading from "ASP.NET" to "ASP.NET and Azure", and save the file.

   

   Index.cshtml

   

   Changing the page's heading

2. Press CTRL+F5 to see the updated heading by running the site on your local computer.

   

   Web App running locally

   The http://localhost URL shows that it's running on your local computer. By default it's running in IIS Express, which is a lightweight version of IIS designed for use during web application development.

3. Close the browser.

4. In Solution Explorer, right-click the project, and choose Publish.

   

   Preparing a new deployment

   The Preview tab of the Publish Web wizard appears. If you needed to change any publish settings you could choose a different tab, but now all you want to do is redeploy with the same settings.

5. In the Publish Web wizard, click Publish.

   

   Publish Web Wizard

   Visual Studio deploys the project to Azure and opens the site in the default browser.

   

   Changes deployed

   Tip: You can enable the Web One Click Publish toolbar for even quicker deployment. Click View > Toolbars, and then select Web One Click Publish. The toolbar enables you to select a profile, click a button to publish, or click a button to open the Publish Web wizard.

   

   Web One Click Publish Toolbar

Monitor and manage the site in the preview portal

The Azure Preview Portal is a web interface that enables you to manage and monitor your Azure services, such as the App Service Web App you just created. In this task you will look at some of what you can do in the portal.

1. In your browser, go to http://portal.azure.com, and sign in with your Azure credentials.

   The portal displays the home dashboard.

   On the left, click on Browse and then scroll down until you find Web Apps. Click on Web Apps.

   

2. Click the name of your Web App on the blade.

   

   Web Apps blade

3. This blade gives you an overview of your Web App.

   You can access monitoring information, change the pricing tier, configure continuous deployment and various other tasks.

   

   Web App's overview blade

   At this point your site hasn't had much traffic and may not show anything in the graph. If you browse to your application, refresh the page a few times, and then come back again, it will show up some traffic.

4. Click at Settings at the top of the blade. Then click Application Settings.

   The Application Settings blade enables you to control the .NET version used for the Web App, enable features such as WebSockets and diagnostic logging, set connection string values, and more.

   

   WebApp's settings blade

5. Click the Scale option, right below Application Settings.

   For the paid tiers of the Azure App Service, the Scale option enables you to control the size and number of machines that service your web application in order to handle variations in traffic.

   You can scale manually or configure criteria or schedules for automatic scaling.

   

   Web App's Scale Options

   These are just a few of the management portal features. You can also create new App Service apps, delete existing apps, stop and restart apps, and manage other kinds of Azure services, such as databases and virtual machines.

##Appendix - Cleanup

In this task you will learn how to delete the Web App published in the previous section.

1. In your browser, go to http://portal.azure.com, and sign in with your Azure credentials.

2. Click on Browse and scroll down until you see Web Apps. Click on Web Apps.

3. Select your Web App. The Web App blade should now be open.

4. Click Delete in the top bar.

   

   Clicking Delete to delete Web App

5. In the Delete app confirmation dialog, click Yes.

   This will delete the Web App but it will keep the database intact. If you want to delete the database as well, follow the instructions below.

6. Click on Browse and scroll down until you see SQL Databases. Click on SQL Databases.

   Click SQL databases

7. In the new SQL Databases blade, click on your database.

   The database blade should now be open.

8. Click on Delete from the top bar.

   

9. In the Delete database confirmation dialog, click Yes.

Summary

In this lab you have seen how to create a simple web application and deploy it to an Azure App Service Web App. You also made a quick tour around the Azure Preview Portal.