Deploying Umbraco to Azure

If you’re not new to Umbraco, you may already be aware of Umbraco Cloud. Basically, Umbraco Cloud allows you to create a new Umbraco (funnily enough) in the cloud, which underneath the hood, is using Microsoft’s Azure platform. This is an easy way of getting an Umbraco site up and running and accessible quickly, but if like us, you’d rather be in full control of everything, or if you have some more complicated needs which Umbraco Cloud isn’t going to fulfil, or even if you already have an Azure environment and just want to play around with Umbraco, then read on, this blog is for you!

For this guide, we are going to create a version of the Umbraco sample website, and we will be using SQL server for the database, and hopefully by the end we will have both hosted and running in Azure. Now there are a few different ways to do this, but this will get you up and running quickly, and I’ll show you how to do some of the basic configuration you will need in Azure too.

To start off with, we will create a brand-new web application project in Visual Studio. I’ll call this one “UmbracoAzureDeploymentGuide”, but feel free to give it a more suitable and snappy title than that.

New project

New project

I’m going to select to add the standard MVC template, but again, feel free to use whatever template you like or need.

MVC template

MVC template

Once done, we should now have our default web application project opened in our Solution Explorer window. Now we want to install Umbraco.

Adding Umbraco

Adding Umbraco

This can be done by entering “Install-Package UmbracoCms” in the Package Manager Console if you’d rather do that, by downloading the package from the Our Umbraco site and installing it manually, or by using the Package Manager GUI, which is the one we will use for this guide. Right click your solution and choose “Manage NuGet Packages for Solution…”.

Search for “UmbracoCms” and install the latest version against your project.

UmbracoCms

UmbracoCms

This may take a while, but when its installed you will get the following readme file to let you know it’s all gone ok.

Readme file

Readme file

Great, so now we have Umbraco installed in our solution, next step is to configure it.

Umbraco provides us with a very handy interface for doing all of this, so all we need to do is build and run our application. Again, this can be done a few different ways, but for speed, and given we want to get this running in Azure anyway, all we are just going to run the site in IISExpress from Visual Studio.

Click the debug tab at the top of Visual Studio, and choose to either “Start Debugging” or “Start Without Debugging”, the choice is up to you. If you choose to debug, just click “Ok” on the following message to update your web.config file.

Debugging

Debugging

Once the site loads, you will need to add your name, email address and a suitable password. I’ll leave it up to you if you want to subscribe to the Umbraco newsletter, but once we’ve filled in the form, we are going to click the Customize button.

Installing Umbraco

Installing Umbraco

We want to select Microsoft SQL Azure as our database type, and now we will be asked about the details required to connect to this. If you already have a database created, great, you can skip ahead, but if not, this is the point where we will need to log in to our Azure portal and create one!

Once we are in our Azure management portal, we are going to want to create a new Resource group first. In the navigation menu on the left-hand side, select “Resource groups” and then hit the add button.

Resource group

Resource group

Again, I’m going to give this a horribly poor name, but name it something appropriate, select your subscription and select the location which applies to you.

Now we are going to create our database and database server.

Click on SQL databases and press the add button. Give your database a name, select your subscription, use the resource group we just created and we are going to want a blank database to start with. Click on server and you should be prompted to create a new one if you don’t have one already. Fill in a server name, log in credentials (remember these, as we are going to need them again in a while) and select the location which applies to you.

SQL database

SQL database

Now once you create the database and server, it may take a few minutes, but once that is done, we are going to allow access to our newly created database server from our local machine. If we go to the “All resources” tab and select our SQL server, we should see a “Firewall / Virtual Networks” option. Click that and we are going to add our IP address as a rule.

Enter a name for the rule and paste your IP address (which Azure kindly displays for us) into the start and end IP boxes.

Once that’s done we need to go back and select our database in the SQL databases tab, and select the “Show database connection strings” option. Take a note (or copy it, that’ll be easier) of the server name and then we’re off back to our Umbraco configuration page.

Fill in your database details and hit the continue button. It’s up to you if you want to install the starter website, but as this is a guide, I’m going to choose to install it.

Agree to the machine key setup and then go get a coffee or tea, as this could take a little while to create.

Installing the starter website

Installing the starter website

Hopefully by the time you’ve made your beverage of choice, you should now be greeted with this page:

Welcome screen

Welcome screen

Great, we now have the Umbraco database installed and running in Azure! But we’re not done yet…

Now we need to get the website itself running in Azure and not on our local machine. Fortunately, this is an easy task from this point onward.

Back into Visual Studio, (we want to stop debugging if you chose to earlier) and right click on our project, and select “Publish”.

I’m using Visual Studio 17 so if you’re using a different version, what you might see will be slightly different, but the options should be the same.

Visual Studio

Visual Studio

We want to select to deploy to Azure, and then fill in our Azure details. At this point we want to select our Resource Group we created in an earlier step, and then our service plan. If you don’t have either of these yet, you can create them at this point in Visual Studio, or head back to the Azure management portal.

Create App Service

Create App Service

Now Visual Studio should take care of building and publishing your project to Azure for you!

Once that’s completed, congratulations, you should now have your new Umbraco site and database running in Azure!

If you chose to install the default Umbraco website templates like I did earlier, then you may not be quite done yet, and may see a lovely yellow screen of death when you load your site.

To fix this we just need to include a few files in the project and redeploy them to Azure. If you click your project and then “Show all files” in the tab at the top of the Solution Explorer window, there will be some view files, a partials and macro partials folder in the root of your Views folder, a JavaScript file in the Scripts folder as well as a CSS folder in the root of your project to include in the solution.

Once you’ve included those and redeployed, you should now have the lovely default Umbraco website running.

Umbraco Demo

Umbraco Demo