Build and deploy your ASP.NET 4 app to Azure

Last Update: 4/11/2017

Team Services | TFS 2017 | TFS 2015 | Previous versions (XAML builds)

Are you new to Team Build, Release Management, or CI/CD? If so, we recommend that you first read CI/CD for newbies and then come back here after that.

In this walkthrough, we'll show how to build a continuous integration (CI) and continuous deployment (CD) process in Visual Studio Team Services that deploys an ASP.NET 4 web application project to Azure.

TIP

If you don't yet have an app but want to try this out, then see the Q&A below.

To create your CI/CD pipeline, you'll do the following:

Get set up

Team Services account

You'll need an account on Visual Studio Team Services. To create one, visit Sign up for Team Services.

You can also use Team Foundation Server (TFS) if your organization requires the use of on-premises servers instead of Team Services, and we'll show some of those details. Also see Get Started with TFS for general information.

Set up local version control and a team project

Creating a release pipeline relies on having your application code in version control. To set up a local repository and connect it to a remote repository in a team project, follow the instructions in either Share your code with Git and Visual Studio or Share your code with TFVC and Visual Studio.

Create the Azure app service

An Azure App Service is where you'll deploy your application. Technically speaking, an app service is a resource with a specific pricing tier in Azure that can then host multiple, distinct applications. In this example we'll use a Web App. If you're creating a new App Service for this example, you can use the Free pricing tier.

To create a new Web App, simply go to the App Services blade on the Azure portal, click +Add, select the Web App template, click Create, and enter a name and other details. The web app URL will then be {name}.azurewebsites.net.

Can I use an existing Azure account? ▼

If you have an existing Azure account, you can certainly use a new or existing App Service in that account for this walkthrough.

How do I create a new Azure account with free credits? ▼

If you don't yet have an Azure account, you can get started with free credits at https://azure.microsoft.com/en-us/free/.

Alternately, consider signing up for Visual Studio Dev Essentials which gives you $25/month in Azure credit each month for a full year.

Can I just use a temporary App Service instead? ▼

Yes, just visit Create your Azure App Service App to set up a Web App for temporary use (1 hour). On that page, do the following:

  1. Select Web App and choose Next.
  2. Select Empty Site and choose Create (we use an empty site because you already have the necessary application code in your Visual Studio project).
  3. Enter your Microsoft account credentials when requested.
In a few moments the site will then give you a URL such as https://df8381c9-0ee0-4-aaa-aaaa.azurewebsites.net/. This is the URL of your live site to which we'll deploy the application.

Learn more at the Web Apps Overview.

Define and test your CI build process

Continuous integration means starting an automated build whenever new code is committed to or checked into the team project's source control repository. This gives you immediate feedback that the code builds and can potentially be deployed. You can also run automated tests. Finally, this CI build will produce a web deploy package artifact and publish it so that it can be consumed by your CD process.

Create the build definition

  1. Open your team project in your web browser ▼

    Browse to team project

    (If you don't see your team project listed on the home page, select Browse.)

    • On-premises TFS: http://{your_server}:8080/tfs/DefaultCollection/{your_team_project}
    • Visual Studio Team Services: https://{your_account}.visualstudio.com/DefaultCollection/{your_team_project}

    The TFS URL doesn't work for me. How can I get the correct URL?

  2. Create a build definition (Build & Release tab > Builds) ▼

    Build tab

  3. Select the Deploy: Azure Web App Deployment ASP.NET (PREVIEW) template.
  4. As the repository source, select the team project and repository.
  5. You don't need to modify any of the tasks, but feel free to familiarize yourself with them because you can always make customizations later. To learn more about:
    1. Tests: Getting started with continuous testing and Continuous testing scenarios and capabilities.
    2. Build tasks.

Enable continuous integration (CI)

On the Triggers tab, enable continuous integration (CI). This tells the system to queue a build whenever someone on your team commits or checks in new code.

Queue and test the build

Save the build definition and queue a new build by selecting the Queue new build command. Once the build is done, click Artifacts and then Explore to see the .ZIP file produced by the build. This is the web deploy package that your release definition will consume to deploy your app.

After you've run the build, you're ready to create a release definition to deploy your app to Azure.

Define and test your CD release process

Continuous deployment (CD) means starting an automated release process whenever a new successful build is available. Your CD release process picks up the artifacts published by your CI build and then deploys them to your Azure web site.

  1. Do one of the following:

    • If you've just completed a CI build (see above), choose the link to the completed build (for example, Build 1634). In the build's Summary tab under Deployments, choose Create release followed by Yes. This starts a new release definition that's automatically linked to the build definition.

    • Open the Releases tab of the Build & Release hub, open the + drop-down in the list of release definitions, and choose Create release definition

  2. Select the Azure App Service Deployment template and choose Next.

  3. In Source... make sure your CI build definition for the Web deploy package is selected as the artifact source.

  4. Select the Continuous deployment check box, and then choose Create.

  5. Select the Deploy Azure App Service task and configure it as follows:

    Deploy: Azure App Service Deploy
    Deploy: Azure App Service Deploy

    Deploy the app to Azure App Services

    • Azure Subscription: Select a connection from the list under Available Azure Service Connections. If no connections appear, choose Manage, select New Service Endpoint | Azure Resource Manager, and follow the prompts. Then return to your release definition, refresh the AzureRM Subscription list, and select the connection you just created.
      Note: If your Azure subscription is defined in an Azure Government Cloud, ensure your deployment process meets the relevant compliance requirements. For more details, see Azure Government Cloud deployments.
    • App Service Name: the name of the web app (the part of the URL without .azurewebsites.net)
    • Deploy to Slot: make sure this is cleared (the default)
    • Virtual Application : leave blank
    • Web Deploy Package: $(System.DefaultWorkingDirectory)\**\*.zip (the default)
    • Advanced: Take App Offline: If you run into locked .DLL problems when you test the release, as explained below, try selecting this check box.
  6. Edit the name of the release definition, choose Save, and choose OK. Note that the default environment is named Environment1, which you can edit by clicking directly on the name.

You're now ready to create a release, which means to start the process of running the release definition with the artifacts produced by a specific build. This will result in deploying the build to Azure:

  1. Choose + Release and select Create Release.

  2. Select the build you just completed in the highlighted drop-down list and choose Create.

  3. Choose the release link in the popup message. For example: "Release Release-1 has been created".

  4. Open the Logs tab to watch the release console output.

  5. After the release is complete, navigate to your site running in Azure using the Web App URL http://{web_app_name}.azurewebsites.net, and verify its contents.

NOTE

If you encounter deployment failures with a message about locked .DLL files, then try selecting Advanced: Take App Offline, as mentioned above.

Commit a change and see it automatically go live

Now you get to see the magic of a release pipeline at work! You'll make a change in Visual Studio, commit it or check it in to the source repository, and then let the build and release definitions take care of the rest.

  1. On your deployed web site, click About at the top, and examine the page. We'll change the "Use this area..." text to something different.

  2. In Visual Studio, switch to Solution Explorer, expand src > {project name} > Views > Home and open About.cshtml.

  3. Change the text within the <p> tag, for example, to Hello continuous integration and continuous deployment!

  4. Save the file, push/check-in the changes to the Team Project:

    • If you're using Git in Visual Studio, click the changes icon on the status bar:

      Location of the changes button on the Visual Studio status bar

      Then enter a commit message, click Commit All, click the Sync link, then click Outgoing Commits > Push. This will push the changes to respiratory on Team Services.

    • If you're using Team Foundation version control (TFVC), switch to the Team Explorer pane, then to Pending Changes where you should see About.cshtml listed. Enter a comment and click Check In.

  5. Once the push/check-in is complete, switch to Team Services in your browser.

  6. Navigate to Builds and click on your build definition. You should see a build in progress:

    A continuous integration build running in Team Services

  7. When the build has completed, navigate to Releases and you should see that a release has started for that build:

    A continuous deployment release running in Team Services

  8. When the release has completed, browse to your web site, refresh the page, and see that the change has been deployed.

Q&A

How do I create an ASP.NET 4 web app?

  1. In Visual Studio, connect to your team project.

  2. On the Team Explorer home page (Keyboard: Ctrl + 0, H), under Solutions, click New.

  3. Select the Web category under Visual C#.

  4. Select ASP.NET Web Application and click OK.

  5. Select MVC from the template list.

  6. Click Change Authentication, select No Authentication, and click OK.

  7. Optionally, set Add unit tests to create a unit test project for the application. Unit tests can be run automatically with every build as part of a release pipeline.

  8. Clear Host in the cloud and click OK.

  9. Commit and push (Git) or check in (TFVC) your code.

I got a file not found error message. How do I fix it?

All solution files must be checked into the server to run a build. One known cause of missing files is in cases where you populate an empty repo by creating a new project in Visual Studio 2015 Update 3. We recommend that you update your .gitignore file with the latest copy from GitHub: VisualStudio.gitignore.

What else can I do when I deploy my app?

Next steps after deploying your ASP.NET app to an Azure web site

I use Team Foundation Server on-premises and I don't see some of these features. Why not?

Some of these features are available only on Visual Studio Team Services and not yet available on-premises. Some features are available on-premises if you have upgraded to the latest version of TFS.