Use Visual Studio to automatically generate a CI/CD pipeline to deploy your ASP.NET web app to Azure

Last Update: 4/13/2017

Team Services | TFS 2017 | TFS 2015 | Previous versions: XAML Build, Release

In this walkthrough we'll show how to use Visual Studio to automatically define a continuous integration (CI) and continuous deployment (CD) process to deploy an ASP.NET web application project to Azure.

A typical release pipeline for web applications

Continuous integration means starting an automated build (and possibly running tests) 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. Continuous delivery (or deployment) means starting an automated deployment process whenever a new successful build is available. Together, CI and CD mean that any code changes you commit to your repository are quickly validated and deployed to a live web site without any manual intervention.

TIP

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

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.

Install the Continuous Delivery Tools extension

The quickest way to create a continuous delivery process is with the Continuous Delivery Tools for Visual Studio (2017 RC.3 and newer), which automate the creation of build and release definitions. The tools assume that you have an existing Team Services account, and that your project has been added to source control in a Team Project.

To install the extension within Visual Studio, select Tools > Extensions and Updates... and search for Continuous Delivery Tools for Visual Studio. Alternatively, you can download the installer from the Visual Studio Gallery.

Create the build and release definitions automatically

To create both the build (CI) and release (CD) definitions for a project, in Visual Studio, right-click the project in Solution Explorer and select Configure Continuous Delivery.... In the dialog that appears, choose the appropriate repository branch, Azure subscription, and target App Service, and click OK. You'll see details in the Output pane during the process.

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.

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.

Help and support