How to setup Umbraco locally and on Azure

by

When I first started toying with Umbraco. I had a lot of problems getting it setup right. But it’s actually pretty darn simple when you actually know how to handle all the hidden folders and files. Im going to be using Visual Studio 2015 as well as an Azure web app and database.

Getting your project up and running

So let’s fire up Visual Studio. Hit File -> New Project.

Umbraco1

Umbraco doesnt support .NET Core 1.0 (.NET 5) yet. So we create a ASP.NET Web Application using .NET 4.5.1 and select an Empty project.

Umbraco2-edit

Now we are ready to add Umbraco to our project. We can use either the “Manage NuGet packages” or the Package Manager Console. We are going to be using the console window since that seems like the easiest way to go for a tutorial. The command we run is: Install-Package UmbracoCms

Umbraco3-edit

When it’s done adding Umbraco to your project you’ll be greeted by a Readme.txt that says “Don’t forget to build!”… So let’s start by hitting F5 to start debugging. Building alone won’t do us any good really so we might as well run the project and get the configuration process going. You’ll be greeted by a popup asking you to either allow modification of the web.config file to enable debugging or running without debugging. In my experience it doesn’t really matter. You shouldn’t encounter any bugs for you too debug. So lets just hit Ok and get the process going.

Hooking up too your Azure SQL database

Umbraco5-edit

The above screen should open in your browser. It seems pretty easy right? Add your name, email and a password. Well what’s your default response after writing in your password? Hitting enter… I’ve made that mistake several times when setting up Umbraco. The reason why i don’t wanna hit enter after putting in my password, is because it will install with default settings. So if thats what you want go ahead. But in this tutorial we are going to setup Umbraco on Azure. So we might aswell do that right away, so go ahead and select Customize.

Umbraco6

We select Microsoft SQL Azure and enter our database and user information. When that’s done hit Continue and it should hopefully connect to your Azure database! If you encounter problems remember to add your client IP to your firewall settings on Azure.

Umbraco7

Almost done! Now you just gotta decide if you wanna install a starter kit or not. I’m going to be setting up a blog next, so I’ll hit No thanks and install without a starter kit.

Umbraco is now setting everything up on your machine and you’ll be shown what is called the “backoffice” in Umbraco. This is the CMS part of the system. For now we are going to leave this be and go back over to Visual Studio to deploy our application.

Deploying to Azure

One important thing to be aware off when first installing Umbraco, is that it adds a lot of hidden files that you might not notice at first.

Umbraco8-edit

One of the mistakes I made when starting out with Umbraco, was to add all kinds of hidden folders and files to my solution and there by Git. Well don’t do that. Since we install through NuGet, the package will restore itself when another person pulls your solution from version control. The only things you wanna add to your solution and version control is files you either edit or add to the project.

Umbraco9-edit

Before we deploy we do need to do one thing. We wanna delete the Umbraco->Install folder

When that is done we can go ahead and deploy our application to Azure. Right click on your project and select Publish.

Umbraco10-edit

We select Microsoft Azure App Service.

Umbraco11-edit2

When we’re signed into our Microsoft Account you should be able to select your Subscription and find the Web App you wanna deploy too. If you havent made one you can select the New… button to the right. Once your done select OK.

Umbraco13

Now all there is left to do is click Publish and wait till your brand new Umbraco website shows up in your browser.

If you wanna enter the backoffice you just add “/umbraco” to your url and login.

That’s it for this tutorial. I hope this helped you out and hopefully I’ll see you in another tutorial!

 

  • Pingback: How to setup a blog using Umbraco – Cave of Code()

  • Arnau Lacambra Torres

    First, thank you for this tutorial, it helped me a lot.

    By other hand, I’m having trouble trying to work with my site, both in local and in Azure at same time. I want to develop my site in local, and publish it to Azure whenever I want it to be public. I’m working with VS2015. My problem comes when I add a plugin to my Umbraco site through the plugin’s backoffice tool. The files are not included in the VS project, so when I publish the site to Azure, there are missing files. How I should approach this issue?

    Thank you

    • Jesper Christensen

      Hi Arnau. Im happy it helped you!

      I actually think that i wrote another post that can help you with that particular problem! Even through it’s probably not the same package you wanna install, it covers what needs to be done to get your plugins in source control and published aswell 🙂

      Check it out here and please get back to me about whether or not it solved your problem. Happy coding!
      http://caveofcode.com/2016/03/how-to-setup-a-blog-using-umbraco/

      • Arnau Lacambra Torres

        I’ve read it, and it’s trully helpful. Thank you for your posts and tips. Keep working this hard!

  • Pingback: How to setup a blog using Umbraco – Cave of Code()

  • Alexis Perez Sosa

    Hi Jesper,
    Thank you for the very informative post, very helpful indeed. One thing I don’t fully understand and that is because English is not my first language is the bit below, could please be more specific as to what files should go into source control, thank you and looking forward to hearing from you.

    Regards
    Alex

    “One of the mistakes I made when starting out with Umbraco, was to add
    all kinds of hidden folders and files to my solution and there by Git.
    Well don’t do that. Since we install through NuGet, the package will
    restore itself when another person pulls your solution from version
    control. The only things you wanna add to your solution and version
    control is files you either edit or add to the project.”

    • Jesper Christensen

      Hi Alexis.
      If you add the a .gitignore file through Visual Studio. All files you do not need, should be filtered away by that. Since it’s installed through Nuget, missing files will restore when you open the project for the first time after pulling the repository down to a new location.
      My second Umbraco post digs a bit deeper by adding a plugin. When you add a plugin you need to pay special attention to what goes into source control from that particular package. As well as what should be published. You can find it here: https://caveofcode.com/2016/03/how-to-setup-a-blog-using-umbraco/

      • Alexis Perez Sosa

        Thanks for the prompt reply, I see what you mean now, Cheers Jesper

  • Alistair Jenkins

    Hi Jesper,

    Like the post. But what if you have foolishly gone ahead and created an Umbraco Web App on Azure, and developed several websites on it and now want to pull that down to a local development environment using Visual Studio Community 2017 and SQL Server 2017, but aren’t really sure how to? Any advice?