This is a step-by-step walkthrough on building a web deployment package for Umbraco CMS and an Azure Resource Manager Template Deployment project to deploy our environment at any time.

You can check part 1 of this post for an overview of what we are trying to solve here.

Table of Contents

  • Create the website template in Visual Studio
  • Building a web deployment package
  • Building Azure Resource Manager Deployment Template

Create the website template in Visual Studio

First thing you'll need is an Umbraco website that is used as a base template. Umbraco can be downloaded in Visual Studio using NuGet packages which is the best way since we'll be working in Visual Studio for the entire post. So if you are like me building a fresh and new deployment package then you should create an empty ASP.NET project then add the Umbraco NuGet package.

I'll walk you through the steps:

  1. In Visual Studio, click "File->New->Project" and select "ASP.NET Web Application" under the "Web" node. New-aspnet-project
  2. Select the "Empty Project" template and no need to check any of the other boxes "add core folders...". empty-aspnet-project

Now that we have an Empty ASP.net project we'll let Umbraco package install the rest of the dependencies for us then we'll have our site ready:

  1. From the "Tools" menu, open the "NuGet Package Manager" for solution and search for Umbraco open-nuget-manager search-nuget-umbraco

  2. Select The Umbraco package and install it into your project install-umbraco

After the installation is complete, run your project to verify that you have everything setup. You should now be presented with the Umbraco configuration screen.

Do not configure the website yet, we want to use this as a template for any new configuration.

Building a web deployment package

Now we need to build a Web Deploy Package and upload it to an Azure blob storage that can be accessed whenever we need to re-deploy.

  1. In Visual Studio, right click on the project and click "Publish"
  2. Select "Custom" as the publish target
  3. Enter a name for your deployment profile "umbraco-template"
  4. From the publish method, select "Web Deploy Package" then select a folder to store the package and a name for your website. This name doesn't have to be what your final website is. publish-web-umbraco
  5. Once all is done, click "Publish" to create the web deployment package in the selected folder.

There are several ways to upload this package to Azure, since we are in Visual Studio already then we can use the Server Explorer window or if you have Azure Storage Explorer then you can use that, if none of these methods work for you then you can use the Azure portal to upload the package.

My preference would be using the Azure Storage Explorer as it is really simple and straightforward, this is how it would look like after we upload the package

azure-storage-explorer

Building Azure Resource Manager Deployment Template

Finally now, we'll be building the Azure deployment package for Umbraco, sure this can (and should) be updated with all the other Azure goodies (database server, auto-scaling, monitoring...) to make it standout from a regular website publishing but I'll leave this for another post.

Visual Studio offers a project template for creating Azure Resource Manager deployments, you just need to make sure you have the Azure SDK installed for Visual Studio. You can check Microsoft post here on creating Azure Resource Group projects in Visual Studio

The main thing in the steps and code below are the parameters for the web deployment package that we uploaded to Azure, we will fill the parameters for the storage account, storage container and the blob name.

  1. Create a new project from the template "Azure Resource Group" under the "Cloud" node create-new-project
  2. From the templates dialog, select "Blank Template" then click "OK" select-blank-template
  3. You should have by now a project that has the following two files under "Templates" folder
    • azuredeploy.json
    • azuredeploy.parameters.json project-files
  4. Copy the code below into the azuredeploy.json file

    {
        "$schema": "http://schema.management.azure.com/schemas/2015-01-01/deploymentTemplate.json#",
        "contentVersion": "1.0.0.0",
        "parameters": {
            "hostingPlanName": {
                "type": "string",
              "minLength": 1,
              "defaultValue": "umbraco-zaidsafadi"
            },
            "sku": {
               "type": "string",
               "allowedValues": [
                    "Free",
                    "Shared",
                    "Basic",
                    "Standard"
                ],
                "defaultValue": "Free"
            },
          "workerSize": {
            "type": "string",
            "allowedValues": [
              "0",
              "1",
              "2"
            ],
            "defaultValue": "0"
          },
          "siteName": {
            "type": "string"
          },
          "package-storageAccount": {
            "type": "string",
            "defaultValue": "umbracopackages"
          },
          "package-storageContainer": {
            "type": "string",
            "defaultValue": "template"
          },
          "package-storageBlob": {
            "type": "string",
            "defaultValue": "Umbraco-Template.zip"
          }
       },
    "resources": [
        {
            "name": "[parameters('hostingPlanName')]",
            "type": "Microsoft.Web/serverfarms",
            "location": "[resourceGroup().location]",
            "apiVersion": "2014-06-01",
            "dependsOn": [ ],
            "tags": {
                "displayName": "ZaidSafadi-srvpln"
            },
            "properties": {
                "name": "[parameters('hostingPlanName')]",
                "sku": "[parameters('sku')]",
                "workerSize": "[parameters('workerSize')]",
                "numberOfWorkers": 1
            }
        },
      {
        "name": "[parameters('siteName')]",
        "type": "Microsoft.Web/sites",
        "location": "[resourceGroup().location]",
        "apiVersion": "2015-08-01",
        "dependsOn": [
          "[concat('Microsoft.Web/serverfarms/', parameters('hostingPlanName'))]"
        ],
        "tags": {
          "[concat('hidden-related:', resourceGroup().id, '/providers/Microsoft.Web/serverfarms/', parameters('hostingPlanName'))]": "Resource",
          "displayName": "ZaidSafadi"
        },
        "properties": {
          "name": "[parameters('siteName')]",
          "serverFarmId": "[resourceId('Microsoft.Web/serverfarms/', parameters('hostingPlanName'))]"
        },
        "resources": [
          {
            "name": "MSDeploy",
            "type": "extensions",
            "location": "[resourceGroup().location]",
            "apiVersion": "2015-08-01",
            "dependsOn": [
              "[concat('Microsoft.Web/sites/', parameters('siteName'))]"
            ],
            "tags": {
              "displayName": "umbraco"
            },
            "properties": {
              "packageUri": "[concat('https://', parameters('package-storageAccount'),'.blob.core.windows.net/',parameters('package-storageContainer'),'/',parameters('package-storageBlob'))]",
              "dbType": "None",
              "connectionString": "",
              "setParameters": {
                "IIS Web Application Name": "[parameters('siteName')]"
              }
            }
          }
        ]
      }
    ],
    "outputs": {
    }
    }
    
  5. Copy the code below into the azuredeploy.parameters.json file:

    {
      "$schema": "http://schema.management.azure.com/schemas/2015-01-01/deploymentParameters.json#",
      "contentVersion": "1.0.0.0",
      "parameters": {
        "hostingPlanName": {
          "value": "umbraco-srvpln"
        },
    
        "package-storageAccount": { "value": "umbracopackages" },
        "package-storageContainer": { "value": "template" },
        "package-storageBlob": { "value": "Umbraco-Template.zip" }
      }
     }
    
  6. From the solution explorer, right click on the project Deploy-->New Deployment new-template-deployment

  7. You will need first to log-in to your Azure account then select your Azure subscription, then enter a new resource group information and if the deployment template is not selected make sure to select the "azuredeploy.json" and the template parameters "azuredeploy.parameters.json" deployment-dialog
  8. Click on "Edit Parameters" and fill up the website Name and enter the storage account information for the web package, then click "Save" edit-parameters
  9. Finally, click "Deploy" and hope things will work just fine!

Once the deployment is completed successfully you can navigate to your umbraco site for first time configuration. Your website name will be http://websiteName.azurewebsites.net

Conclusion

In this post, we learned how to create a Web Deployment Package from a website, upload the package to Azure Blob Storage then create an Azure Resource Manager (ARM) Template Deployment that will create a website in Azure and deploy the web package for us.

Now that you have the basics to create these template deployment from your website, you can include many other features and resources that complement the website. You can add monitoring rules, auto-scaling rules, deploy other web services and even Virtual Machines (database servers) all in a single group and deployment.