Deploy an ASP.NET Core Web App to Azure Using Visual Studio

Set up the development environment

  • Install the latest Azure SDK for Visual Studio 2015. The SDK installs Visual Studio 2015 if you don’t already have it.
  • Install .NET Core + Visual Studio tooling
  • Verify your Azure account. You can open a free Azure account or Activate Visual Studio subscriber benefits.

Create a web app

In the Visual Studio Start Page, tap New Project….

../_images/new_project1.pngAlternatively, you can use the menus to create a new project. Tap File > New > Project….

../_images/alt_new_project1.pngComplete the New Project dialog:

  • In the left pane, tap Web
  • In the center pane, tap ASP.NET Core Web Application (.NET Core)
  • Tap OK

../_images/new_prj.pngIn the New ASP.NET Core Web Application (.NET Core) dialog:

  • Tap Web Application
  • Verify Authentication is set to Individual User Accounts
  • Verify Host in the cloud is not checked
  • Tap OK

../_images/noath.png

Test the app locally

  • Press Ctrl-F5 to run the app locally
  • Tap the About and Contact links. Depending on the size of your device, you might need to tap the navigation icon to show the links

../_images/show.png

  • Tap Register and register a new user. You can use a fictitious email address. When you submit, you’ll get the following error:

../_images/mig.pngYou can fix the problem in two different ways:

  • Tap Apply Migrations and, once the page updates, refresh the page; or

  • Run the following from the command line in the project’s directory:

    dotnet ef database update
    

The app displays the email used to register the new user and a Log off link.

../_images/hello.png

Deploy the app to Azure

Right-click on the project in Solution Explorer and select Publish….

../_images/pub.pngIn the Publish dialog, tap Microsoft Azure App Service.

../_images/maas1.pngTap New… to create a new resource group. Creating a new resource group will make it easier to delete all the Azure resources you create in this tutorial.

../_images/newrg1.pngCreate a new resource group and app service plan:

  • Tap New… for the resource group and enter a name for the new resource group
  • Tap New… for the app service plan and select a location near you. You can keep the default generated name
  • Tap Explore additional Azure services to create a new database

../_images/cas.png

  • Tap the green + icon to create a new SQL Database

../_images/sql.png

  • Tap New… on the Configure SQL Database dialog to create a new database server.

../_images/conf.png

  • Enter an administrator user name and password, and then tap OK. Don’t forget the user name and password you create in this step. You can keep the default Server Name

../_images/conf_servername.png

  • Tap OK on the Configure SQL Database dialog

../_images/conf_final.png

  • Tap Create on the Create App Service dialog

../_images/create_as.png

  • Tap Next in the Publish dialog

../_images/pubc.png

  • On the Settings stage of the Publish dialog:
    • Expand Databases and check Use this connection string at runtime
    • Expand Entity Framework Migrations and check Apply this migration on publish
  • Tap Publish and wait until Visual Studio finishes publishing your app

../_images/pubs.pngVisual Studio will publish your app to Azure and launch the cloud app in your browser.

Test your app in Azure

  • Test the About and Contact links
  • Register a new user

../_images/final.png

Update the app

  • Edit the Views/Home/About.cshtml Razor view file and change its contents. For example:
@{
    ViewData["Title"] = "About";
}
<h2>@ViewData["Title"].</h2>
<h3>@ViewData["Message"]</h3>

<p>My updated about page.</p>
  • Right-click on the project and tap Publish… again

../_images/pub.png

  • After the app is published, verify the changes you made are available on Azure

Clean up

When you have finished testing the app, go to the Azure portal and delete the app.

  • Select Resource groups, then tap the resource group you created

../_images/portalrg.png

  • In the Resource group blade, tap Delete

../_images/rgd.png

  • Enter the name of the resource group and tap Delete. Your app and all other resources created in this tutorial are now deleted from Azure

Anjali Punjab

Anjali Punjab is a freelance writer, blogger, and ghostwriter who develops high-quality content for businesses. She is also a HubSpot Inbound Marketing Certified and Google Analytics Qualified Professional.