A life in technology, books, and travel

How to setup an Umbraco CMS from scratch and host in Azure

In this blog post, we will go through what it takes to setup a new Umbraco CMS for hosting in Azure.
If you can’t be bothered hosting this on your own, you can always use Umbraco’s cloud offering, and skip this entire tutorial.

There are three steps:

  1. Azure – prepare your resources (web app, database, storage account)
  2. Visual Studio – create a new ASP.NET web application and install the Umbraco CMS nuget package
  3. Deploy the web app, database, and media files to Azure
  4. See your site live

Azure

If you are familiar with Azure and know how to create resources and resource groups, then all you need to know is “what” to setup, which are the following.

  • Resource group (that hosts all the below)
  • Web app (on an App Service)
  • SQL database (with SQL server)
  • Blob storage account with 1 container called “media”

If you’re not familiar with how to setup the above resources, then follow the instructions below. This assumes you already have an Azure account.

  1. On the left navigation, click “Resource groups” > + Add > Give it a name that represents your Umbraco CMS project. A resource group essentially is a container of resources (i.e. web app, database, storage account).
  2. Once created, navigate to the resource group and click + Add
  3. On the list of resources, type or search for “web app + sql”
    1. Give your app a name
    2. Make sure you select the same existing resource group
    3. Configure your app service (create one if you don’t have one yet)
    4. Configure your SQL database that requires a SQL server, which you will have to create if you don’t have one yet.
    5. You will also have to setup the SQL user credentials. Make sure to keep this aside as you will need this later when you go to Visual Studio.
    6. (optional) Tick application insights – I recommend switching it on
  4. Back on the resource group, click + Add and search for “storage account”.
    1. Give it a name
    2. Select “Blob storage” under “Account kind”
    3. Make sure you select the same existing resource group
    4. The rest you can leave as they are
    5. Once deployed, navigate to the storage account > containers > + container
    6. Give it the name “media” and select “Private, no anonymous access”
    7. Create container
    8. Navigate to “Access keys” – this is where you will find the access key required for later setup

Visual Studio

Pre-requisite: Make sure your Nuget package manager is up to date before you proceed. To check, go to Tools > Extensions & updates. Under updates, select Visual Studio Marketplace. If there is an update against the Nuget package manager, you will need to install this.

  1. On Visual Studio, create a new project “ASP.NET web application”. Select “empty” when prompted on the next screens.
  2. Open package manager console (Tools > Nuget package manager) and type Install-Package UmbracoCms
  3. At this point, no database and content is set up. You will need to run the application for this to be configured.
  4. Enter the user details you want to use for logging to the Umbraco CMS
  5. Screen-Shot-2018-05-27-at-1.28.58-am
  6. In the older version of Umbraco (v7), when you first run the application, it will ask you about how you want to configure your database. If it does, select Microsoft SQL Azure for the database. If it does not, skip to step 7. In the fields below, enter the SQL Azure details/credentials you setup earlier
    1. Screen-Shot-2018-05-27-at-1.29.57-am
    2. Configure a machine key (I selected yes, but not sure how important this is to be honest!)
    3. Select the “starter template website” on the next prompt if you’re still beginning your Umbraco journey. Selecting this, however, will take a while so feel free to grab a cup of coffee at this point.
  7. [For those who did not get the “Configure your database screen” – starting v8] your Umbraco.sdf database will be in App_Data folder. You will need to convert this file to a SQL Server database. Follow these steps.

Deploy to Azure

Important: After installing the template, some files do not get included in the project, which means these won’t be included in the deployment. At the top menu of the Solution explorer click “Show all files” so you can see if the files below are included:

  1. All files under the Views folder
  2. All files under the Scripts folder
  3. All files under the CSS folder

You’re almost there! Before deploying, you will need to upload your media files to Azure – please go to this tutorial page – Use Azure storage account for your Umbraco media files

Deploy your database to Azure. You will also need to deploy your local database to Azure SQL Server. Follow this tutorial. Once done, make sure your web.config SQL connectionStrings reflect your Azure database’s connection strings.

Now, it’s time to deploy. In the next steps, we will use Visual Studio’s publish feature.

  1. On Visual Studio Solution explorer, right-click on the project and click “Publish”
  2. Select “Azure App service” as a method of publish
  3. Select “existing resource group”, locating your resource group (this assumes your logged in Visual Studio. If not, you’ll have to login using the same Azure profile)
  4. Once it’s able to locate the app service, it will then show a “Publish” button. Click “publish”

Your site is live

Once published, VS would normally open up your site on the browser. Check both the public and /umbraco sites are working.

←
→
%d bloggers like this: