Deploying an ASP.NET Website to Azure in Visual Studio 2012 from a Git Repository directly

Azure Websites as we know is a ‘platform as a service’ offering allowing Azure subscribers to quickly deploy various type of web-applications. Using WebMatrix you can either pick from a huge Gallery of pre-built templates or build your own sites in ASP.NET and publish them to Azure.

Today we’ll investigate how we can deploy our own ASP.NET WebSite in Visual Studio, using the Git plugin to commit the code to Git and see how we can connect Azure to our repository, so that it picks up the latest build and deploys it. Before you proceed, make sure you have also read Git Integration in Visual Studio 2012 after Update 2

Connecting an Azure Web Site to a Git Repository

For simplicity sake, I’ll use one of our recent KnockoutJs articles Change Tracking and Committable data-binding using KnockoutJS and ASP.NET Web API whose code is already in GitHub.

Step 1: We’ll start with creating a web site on Azure. Log in to the Azure Management Portal, select “Web Sites” and from the bottom of the dashboard select New. Create a new web-site as shown below.

Step 2: Once the Site Creation is completed, the dashboard will navigate to the following page. From the three options, select ‘Setup deployment from source control’ under ‘Integrate source control’.

It will present us with the option to pick our source control. As we can see below, there are a lot of options.

Step 3: Select ‘GitHub’ and click on the next button.

Step 4: This will open up a new browser and if you are already logged in to GitHub, it will use the current credentials. If these are not the credentials you want, logout from this screen, the Authentication will show failed, now repeat from Step 3.

Once you are logged in to the desired GitHub account, click on the green Authorize button to allow Azure to connect to GitHub.

Step 5: On Success, the popup browser will close and you’ll see a dialog similar to the following one. Choose the repository you wish to Deploy and click on the Complete button.

Step 6: Once you hit Complete, you’ll see the following screens quickly flash by. Basically Azure will link to the project, deploy the latest build available and on success, make the site live with the latest binaries.

Step 7: Now if you click on the browse button at the bottom of the page, you’ll get a new browser with the newly deployed site. In our case it got deployed to http://knockoutchangetracking.azurewebsites.net/

Updating code and pushing new code to Git

Now that we’ve deployed our code from Git to an Azure website, typically in a production scenario, we would continue to work with our code making improvements till we are ready to push to our remote repository and thus deploy to production.

Step 1: Let’s start with opening Visual Studio 2012 (with Update 2) and Git Support. As we can see, Visual Studio recognizes the git repo and shows everything is checked in.

Step 2: We update the ‘Critical Bug’ where the Heading of our app is incorrect and we change it from ‘ASP.NET Web API’ to ‘Knockout Change Tracking Demo’. Once the change is made, we run it locally to ensure things are working!

Step 3: Next we commit code to the local repository.

Step 4: Before pushing to remote server, I’ve used the snap-view feature of Windows to snap VS to the left and the Azure Dashboard to the right. Now I push to the server. Notice that moments after the push is completed, Azure detects the changes and starts deploying.

Step 5: Once the deployment is over, we see which deployment is the active deployment.

Step 6: Now when we click on the ‘Browse’ button at the bottom of the dashboard, we’ll see the new updated site heading.

Rolling back busted deployments

Now as we all know, thing can break and hell can break loose if a deployment is broken for some reason. Azure Web Site’s Git Integration helps re-deploy old builds rather easily.

Step 1: On the deployment dashboard, hover over the older build and click on the ‘Expand’ button that comes on the Top Right corner. It will select and expand the build with the deployment details

Step 2: At the bottom, you will see a REDEPLOY button. In our case a simple re-deploy will restore us back to the previous build. Things involving DB Scripts might need some additional automation effort on our side.

Well there you have it, from local code to Git repository to GitHub to Azure. A rather seamless journey thanks to Azure WebSites’ Git Integration.

Conclusion

Azure Web Sites’ Git and other source control integration makes life easy for Continuous Integration types of scenarios. This is something that can definitely be used for Build and Test environments. For production deployments additional checks and balances that are a norm in ALM should be followed.

This article has been editorially reviewed by Suprotim Agarwal.

C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.

We at DotNetCurry are very excited to announce The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).

Organized around concepts, this Book aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.

Click here to Explore the Table of Contents or Download Sample Chapters!

Author

Suprotim Agarwal, MCSD, MCAD, MCDBA, MCSE, is the founder of DotNetCurry, DNC Magazine for Developers, SQLServerCurry and DevCurry. He has also authored a couple of books 51 Recipes using jQuery with ASP.NET Controls and The Absolutely Awesome jQuery CookBook.

Suprotim has received the prestigious Microsoft MVP award for Sixteen consecutive years. In a professional capacity, he is the CEO of A2Z Knowledge Visuals Pvt Ltd, a digital group that offers Digital Marketing and Branding services to businesses, both in a start-up and enterprise environment.

Get in touch with him on Twitter @suprotimagarwal or at LinkedIn