Deploying your web app to Azure in 4 simple steps using Visual Studio Team services

Microsofts Visual Studio Team Services (VSTS) is a great online CI/CD tool for developers and teams. It’s basically Team Foundation Server (which I personally don’t have any experience with) brought to the cloud, but more tools have been added in the meantime. The main features of Visual Studio Team Services are:

• Continuous integration/Continuous deployment
• Test tools
• Version control
• Agile software development
• WIKI

Some of these features are nicely integrated into Visual Studio as well, off course.
In this step-by-step walk-through I’ll show you how you can bring your web application to the Azure cloud in a couple of simple steps, using Visual Studio Team Services. I will not be covering Azure topics like resource groups, subscriptions and service plans, so if you’re not familiar with those parts, head over to portal.azure.com and have a look around or ask Google to help you out.

1. Create your App Service in Azure

This first step is all about setting up an app service in Azure that will host your website.

Browse to https://portal.azure.com/ and login using your Microsoft account. Then follow these steps:

1. click 'App Services' in the left panel
2. click the blue button 'Create App Services' or, if you already have one or more app services running, click the '+Add' button at the top
3. You can now choose between all the different options for app services that run in Azure; choose 'Web App'. A new panel will appear to the right, click 'Create' within that panel.
4. Azure will now show you some settings needed to host the app. You need to choose the name of the app (that will also be part of the domain), a subscription, a resource group and a service plan. The service plan will contain the pricing for your web app, so make sure you have this setup correctly. Here is my setup.

2. Set up VSTS project

This is the part where we are going to create a GIT repository within Visual Studio Team Services and upload our web application code to the cloud.
Browse to https://www.visualstudio.com/ and login using your Microsoft account. Visual Studio Team Services will load your personal space, then follow these steps:

1. If you do not have an account yet, create one by clicking the blue button 'Create new account'. You can then choose a name for your account (a subdomain of visualstudio.com) and choose whether to use GIT or Team Foundation Version Control (choose GIT).
2. Once your account has been created, you will get redirected to the new projects dashboard. Visual Studio Team Services will automatically create a blank project 'MyFirstProject' for you; you can continue with this project or create a new project on your accounts dashboard. For now we will create a new one: click the black&white VSTS logo at the top left of the screen. you will be taken back the dashboard of this account. Click the blue button 'New Project', choose a name for your project and choose 'GIT' for version control.
3. Click 'Create'. Once saved, you will see the GIT repository URL; next to the URL there is a button 'Clone in Visual Studio'; click it.
4.  Visual Studio will start to open and you will be prompted for the credentials of the account you used to create the Visual Studio Team Services project. Then, choose where to save the repository locally.
5. When Visual Studio is done, open the Team Explorer window (View -> Team Explorer) and click 'Create a new project or solution'. Choose to create an 'ASP.NET Core Web Application', MVC application. When done, make sure it runs locally. Obviously, you can just add an existing web application into your newly created repository.
6. When you're satisfied with your application, go to Team Explorer view and click the 'Changes' button. Enter a commit message and click 'Commit All'
7. Go to 'Sync' in Team Explorer and for 'Outgoing Commits', click 'Push'; your master branch will now get pushed to your Visual Studio Team Services project in the cloud. You can check this by going into Visual Studio Team Services and choosing 'Code' in the main menu bar; you will see all your added files appear in that section and you can just browse through them.

But what if I don’t wanna use ASP.NET Core…?

No problem! Visual Studio Team Services lets you build lots of other type of applications as well: ASP.NET, JAVA, Node.js, Android, etc. You could also just add an empty template as a build step and configure a PowerShell script, command line tool, Grunt task, Docker, Maven, Jenkins, XCode, you name it.

3. Create build definition

Now that we have all our code in the Visual Studio Team Services project, it’s time to automate the build process.

1. In Visual Studio Team Services, go to 'Builds & Releases -> Builds' and click the blue button 'New definition'
2. In the next screen, select 'VSTS GIT' and choose the project (blogProject), repository (blogProject) and branch (master) that you want to use when building. Click 'Continue'
3. Next, you need to choose the build steps you want to have executed when the build is triggered. As we have created an ASP.NET Core web application, apply template 'ASP.NET Core'. This will add all the necessary steps automatically. We still have to do some configuration though:
4. Make sure that the agent queue is set to 'Hosted VS2017' and notice the name of this build definition: 'blogProject-ASP.NET Core-CI'
5. In the final 'Publish Artifact' step, set the Artifact name to 'backend' instead of 'drop'
6. On the 'Triggers' tab, tick 'Enable continuous integration' so that every commit to the master will trigger a new build.
7. Click the 'Save & queue' button at the top right
8. Click the link to the queued build and see the steps being executed realtime
9. When done, go to 'Build and Release > Builds' and click the 'queued' link; your successful build will appear there. You can check the logs for a build, to see if there were failing unit tests or who your builds are performing over time.

My build broke!

If anything happens during your build that’s serious enough to make it fail, you can check the logs of that build to figure out what happened.
If you navigate to a broken build, you will see all the different steps on the left and can click on the one that has a red cross in front. This will open the log for that particular step and it will show error messages in bold red so you can investigate what went wrong. Sometimes these errors will be easy to fix, like a failing unit test or a missing file but sometimes they can be a little bit harder. And then there’s always the option to trigger a new build to see if that does the trick.

4. Create release definition and deploy!

The final step! Deploy the artifact of your build to the app service in the Azure cloud.

1. Go to 'Build and Release > Releases' and click the blue button 'New definition'
2. From the template panel on the right, apply template 'Azure App Service Deployment'
3. In the Environment panel, set 'Environment name' to something like 'Production'
4. Click the 'Add artifact' box to the left of the screen and for 'Source', select the build definition we just created (blogProject-ASP.NET Core-CI)
5. Some fields will be added automatically and for 'Source alias', choose the name 'backend' we gave to our artifact in the build steps. Then click blue button 'Add'. We cannot save our release definition yet. There is a red exclamation mark at the tab link 'Tasks', so we need to fill in some more. Click the tab 'Tasks'.
6. For releasing to this 'Production' environment, we need to set the correct Azure subscription and the related app service we want to deploy to. Select the Azure subscription from the dropdown and click 'Authorize' next to it. You will have to provide your credentials before you can proceed.
7. Once you've authorized you can select an app service from the 'App service name' dropdown
9. Click the pre-deployment conditions button left of the 'Production' environment panel and choose 'Manual only' in the panel to the right of the screen.
10. Save the new definition and go back to 'Build and Release > Releases'; you should see your new definition 'New Release Definition' now
11. With the new release definition selected, click the '+ Release' button and choose 'Create release'
12. Your latest build will be selected by default; click 'Create'
13. Double-click the 'Release-1' row that was just created and, as deployment is not triggered automatically (step 9), manually deploy to Production
14. When deployment is done, navigate to the URL of your Azure app service and check that your new ASP.NET Core site is up!