How to deploy Umbraco 7 to an Azure Website using Visual Studio Online

So last week I thought I would quickly knock up an Umbraco 7 website and host it on Windows Azure so I can hack about with it while I’m at the Umbraco Codegarden conference this week. It’s pretty simple to set up an Azure Website with Visual Studio Online and I thought I would have the site up in probably an hour or so.

I was wrong. So wrong. I spent three ‘fun’ evenings pulling my hair out with frustration because I couldn’t get the deployment process to work! I like my hair. It’s going a bit too grey a bit too soon, and the back bits are a bit too curly, but I prefer my hair to no hair. So if you also like your hair and would prefer to keep it as it is, then read my How To below:

First you need to set up your Visual Studio Online repo and your Azure Website. See this post that walks through how to do that. Next create an empty MVC project in Visual Studio (I’m using VS2013 for these screenshots, but all the steps are the same in VS2012):

deploy-umbraco-on-azure-websites-using-visual-studio-online-1

Remember to add your project to Visual Studio Online as you create it (probably should have told you that before that last step – oops…).

Next, install the latest Umbraco 7 components into your project (I use the NuGet Package Manager Console for this, as it’s faster than browsing through the NuGet gallery and typing stuff into the console makes me feel like a proper developer…):

deploy-umbraco-on-azure-websites-using-visual-studio-online-2

You will be prompted to overwrite your web.config and Global.asax files. Choose ‘yes’ to both of these questions:

deploy-umbraco-on-azure-websites-using-visual-studio-online-3

Now here’s the bits they don’t tell you in the textbooks – since you’re going to be deploying this project through Visual Studio Online, you need to include all the additional Umbraco files and folders in your Visual Studio project. So click on the ‘show all files’ icon at the top of the Project Explorer:

deploy-umbraco-on-azure-websites-using-visual-studio-online-4

You then need to include the following folders (right click on the folder and choose ‘Include in Project’):

deploy-umbraco-on-azure-websites-using-visual-studio-online-5

One final gotcha for the code bit – when Visual Studio Online tries to build your project it will try and transform any web.config files in there (or at least it did for me!) so you need to change the build action on the web.config file within your XSLT folder, from ‘Content’ to ‘None’:

deploy-umbraco-on-azure-websites-using-visual-studio-online-6

That’s the code all ready to go. The next bit is the database.

UPDATE: so I just realised that since writing this blog post I actually worked out that you can just point your Umbraco install directly at a new SQL Azure database, and it will create your database there rather than having to go through the faff below. I’ll blog on that when I get a chance. The below steps are still useful if you want to create a local dev DB and then copy that up to SQL Azure for staging/production…

NOTE: the database deployment to Azure will only work if you’re using Sql Server Management Studio 2012. I know this from bitter experience (more hair lost) trying various ways of getting my database up to Azure using SSMS 2008…

Another gotcha with Visual Studio Online is that it won’t build the project unless there is a valid database connection string in your web.config file. So at this point you need to create a local SQL Server database, run your Umbraco project install process from the browser (hit F5 and Visual Studio will build and launch your Umbraco website and you should be prompted to set up your user profile and database connection string).

I’m going to assume that you know how to do this bit and that there’s no need for me to document it. Lazy is not the right word, but it will do for now.

Now you have a local database and your web.config connection is set up, you can check your project into Visual Studio Online which will then build and deploy it to the Azure Website you set up earlier.

The next stage is to copy the database up to Azure. As I said earlier you will need SSMS2012 to do this bit. Sorry I don’t make the rules…

First off you need to export your database as a data-tier application. Right click on your databases and choose Tasks > Export Data-tier Application:

deploy-umbraco-on-azure-websites-using-visual-studio-online-7

Choose the ‘save to local disk’ option:

deploy-umbraco-on-azure-websites-using-visual-studio-online-8

Click finish and let the magic happen. You should see the following screen if everything has worked as it should:

deploy-umbraco-on-azure-websites-using-visual-studio-online-9

The next step is to deploy your database to Azure. Connect to your Azure SQL server (again you need to do this through SSMS2012) , right click on the Database folder and choose ‘Import Data-tier Application’:

deploy-umbraco-on-azure-websites-using-visual-studio-online-10

Choose the .bacpac file you just created for the source of the import:

deploy-umbraco-on-azure-websites-using-visual-studio-online-11

On the next screen you have to connect again to your Azure SQL Server (not sure why) and also give your new Azure database a name (make sure it’s the same as your local database, so your web.config connection strings still work):

deploy-umbraco-on-azure-websites-using-visual-studio-online-12

Finally, hit the ‘finish’ button, cross your fingers and hold your breath. If the planets are aligned and it’s a leap year, your database will magically be deployed to Azure and you will see this screen:

deploy-umbraco-on-azure-websites-using-visual-studio-online-13

So that’s the hard bit done with, and you now have a fully functioning Umbraco website hosted on Azure, and being continuously deployed through Visual Studio Online. Next you just have to build the website, but I’m assuming you already know how to do that? 🙂

Posted in Umbraco, Visual Studio, Visual Studio Online, Windows Azure Tagged with: , , ,
  • Pingback: Deploying Umbraco 7 to an Azure Website using Bitbucket | Maff Rigby()

  • Mirosz

    Very good tutorial! Thanks. It works for me with all projects not related to Umbraco. When deploying Umbraco from VS Online to Azure it gives me two errors :
    Could not find a part of the path:
    ‘C:asrcvod-newvod-dev2vod-dev2umbracoInstallViewsWeb.config;umbracoInstallViewsWeb.config’.

    And:
    BuildProcessTerminateException)
    Exception Stack Trace: at
    System.Activities.Statements.Throw.Execute(CodeActivityContext context) at
    System.Activities.CodeActivity.InternalExecute(ActivityInstance instance,
    ActivityExecutor executor, BookmarkManager bookmarkManager) at
    System.Activities.Runtime.ActivityExecutor.ExecuteActivityWorkItem.ExecuteBody(ActivityExecutor
    executor, BookmarkManager bookmarkManager, Location resultLocation

    And that is regardless I’ve changed web.config build action or not. Have you got any ideas why that can be? Thanks

    • MaffRigby

      Hi Mirosz,

      Thanks for your comment and questions.

      The first issue can be resolved by deleting the UmbracoInstall folder before you check it in to VS Online. It’s recommended to delete this anyway for security purposes, so as long as you have your database connection set up then there’s no reason to keep it.

      Re. the second issue, I haven’t seen it before but from a quick Google it looks like a compatibility issue between your local codebase and VS Online:

      http://stackoverflow.com/questions/23116420/azure-website-visual-studio-online-continuous-deployment-fails-for-website

      Hope this helps.

      Maff

      • Mirosz

        Strange. That didn’t help. Exactly the same errors. The only thing I can think of now is that my scenario is a bit different to yours – I’m upgrading Umbraco (connecting to existing database) but I don’t think that’s the reason.
        Thanks anyway

        • Mirosz

          Thanks for your help Guys,
          Looks like I’ve been messing with wrong web.configs.

          I was trying to modify myroot/xslt/web.config rather than myroot/umbraco/xslt/web.config
          So deleting ‘Install’ folder and web.configs sorted the problem!

          • MaffRigby

            Awesome – glad you got it working! 🙂

    • Phil_Wheeler

      Just to be clear, you shouldn’t be deploying a site with your /install folder included, but it looks like you’re trying to check this into source control. If you delete your Web.Config files from that folder location (and I think there’s one other location too, from memory), then you should be back in business.
      Make sure you check those file locations carefully! There are a few Web.Config files in an Umbraco solution.

      When deploying as part of a CI process, make sure your /install folder is ignored completely. You should not be deploying it.

  • Morten Empeño

    Hi Maff.

    Thanks for the tutorial. It is really difficult to find relevant information about building a Umbraco website from Visual Studio, and deploy it to Azure.

    I tried to follow your guide, but I must have misunderstood something.

    When I install the UmnbracoCms package, and run the website afterwards in a browser, I end up with an Umbraco.sdf file in my App_Data folder.

    This file I can not open in SSMS2012, so I am not able to export my database as a data-tier application. Should I do something specific to tell the application, that I want to use the local SQL database, which I created from SSMS2012 ?

    I am prompted to set up my user profile, when running the site first time, but I am not prompted to set up a database connection string.

    So I end up with a really fine local web site, running with Umbraco, But since it builds on a sdf file from my App_Data folder, I do not know how to get it to work in Azure.

    I hope my explanation makes sense, and that my questions are also relevant to other users.

    Thanks in advance

    • Hi Morten,

      Thanks for your comments. To enter your own database connection string, you need to remember to click the ‘custom’ (or maybe it’s ‘customise’ – I can’t remember off the top of my head) button on the install screen where you set your email address and password. It’s really easy to miss, and I often miss it even though I’ve done it many times! 😮

      If you click the ‘custom’ button, on the next screen you can choose the type of database you want to use, and enter the specific details for your connection string.

      I hope this helps,

      Maff

      • Morten Empeño

        Hi Maff.

        Thank you very much for the helpful answer.

        I now managed to create an SQL database, and use that as the Umbraco database, instead of the local sdf file. Yeahaaa.

        I also managed to deploy the SQL database by the use of “Import Data-tier Application”.

        The site seems to have been successfully published – and also the database. When accessing the site, I am met with a message saying the site is running, but no content has been published so far. From here I can click an “Open Umbraco” link, which makes it possible for me to enter username and password.

        I tried to enter the same username and passwords, as I use on my local site, but it does not give me access. I also tried using the username found from the database on Azure – and more similar username and password combinations.

        I wonder if I need to do something special – or if there is something else I missed?

        Thanks in advance,

        Morten

        • Morten Empeño

          Hi Maff.

          I was right about the missing files. It turned out that a bunch of js, img and razor files were not included in the project.
          After including those files, and making a new publish, I am up and running.

          Christmas is saved. Thank you so much. I have wanted to try making an Umbraco site for a long time, and I would not have been able to do so, without your blog and your help (at least not in a reasonable time).

          Merry Christmas and a Happy New Year,

          Morten Empeño

          • Hi Morten,

            Great – I’m glad you got it up and running – sorry I didn’t respond earlier but I was away for a few days over Christmas…

            Hope you’re enjoying your Christmas and Umbraco too!

            Cheers,

            Maff

  • Birendra Kumar

    It is possible to deploy Window Server
    Plz help

    • Hi Birendra,

      Yes you can deploy Umbraco to a standard Windows Server – just use the ‘Web Deploy’ publishing method instead.

      Thanks,

      Maff

      • Birendra Kumar

        Thanks Maff,

        Can you guide me which file Include in my project..

  • Pingback: Umbraco with Microsoft Azure – brain1972()

  • Pingback: Installing Umbraco via Visual Studio - Update - A Blog about Coding()

  • JY

    Hey. Thanks for the post. Local Umbraco => Local Database. But, deploy to Azure Umbraco => Azure Database The local changes can not sync with azure changes due to database entrees.

    • Hi JY – to sync data between databases you need to look at using something like uSync (for Document Types, Templates and Data Types) or Courier (for actual content). Trying to sync data manually won’t work because of the way Ids are allocated in the database in different environments.

      • JY

        Thanks, I’ll test out uSync and Courier. I have successfully deployed to Azure, but was worried about future changes to a project. I just started using Umbraco because I needed CMS and I’m a .NET guy and so far love it.

        • Great and welcome to the Umbraco family! 🙂

          FYI it’s worth getting involved in the forum (https://our.umbraco.org/forum/) – it’s full of really friendly and helpful people and a great source of knowledge!

About Maff

Maff Rigby

I'm a certified .Net, Umbraco and AngularJS freelance developer with over 15 years experience in the IT industry. As well as writing code I love to teach; I run a number of workshops and 1-1 coaching sessions on Angular JS and Umbraco, and share what I know and learn here!

I’m social (ish)

Connect with me on LinkedIn, follow me on Twitter, or fail to find me on Facebook.