The Deploy to Azure Button

Jason Poon

The ‘Deploy to Azure’ button enables quick and easy deployment of your open source projects to Microsoft Azure. We’ll walk through how we added a ‘Deploy to Azure’ button to the slackin project, and show how you can do the same.

What is slackin?

https://devblogs.microsoft.com/cse/wp-admin/revision.php?revision=11045

slackin is an open source web application used by projects such as GitHub Atom, Socket.IO, and VsCodeVim. One of the pain points of managing a public Slack team is inviting new members. slackin makes it easy for people to find and join public Slack communities by providing a self-service landing page for new users where they can fill in their emails and receive an invite to a Slack team.

To use slackin, project owners must deploy and configure their own instance of the slackin web application.

The Problem

Deploying an application is normally a fairly involved workflow:

1. Identify what resources are required. Does the application require a virtual machine? a load balancer? storage? a database?
2. Provision resources. For every resource identified in the above step, allocate and create the resource on the cloud provider (e.g. Microsoft Azure).
3. Build the application. In addition to compiling the source code, this step includes identifying and installing the necessary build tools.
4. Deploy the build assets to the newly provisioned resources.
5. Properly configure the newly deployed application.

These steps require a level of understanding that should not be required of users and customers.

Overview of the Solution

Adding a ‘Deploy to Azure’ button to a project’s readme provides users with a simple mechanism to easily and quickly deploy your application to Microsoft Azure.

The animation below shows the experience when deploying slackin through the button, which hides much of the deployment complexity from the user. Behind the scenes, the tool is:

1. Prompting the user for a series of configurations that will be used to configure slackin
2. Provisioning a Web App on Microsoft Azure
3. Retrieving the slackin source code from GitHub and compiling/building the project
4. Deploying the build assets to the Azure Web App
5. Configuring the slackin instance with the settings defined earlier by the user (e.g. Slack team name, API name, hostname, etc.)

For your users to leverage this easy deployment mechanism, there are a couple of things a project owner will need to prepare. The following sections will use slackin as a working example and outline the changes necessary to support the ‘Deploy to Azure’ button.

Define the Cloud Assets

slackin relied on certain tools such as make that limited its execution to Linux-based environments and therefore required a Linux virtual machine. In order to provide users with the ability to deploy slackin to a free tier of Microsoft Azure, the build chain was updated to use gulp instead of make. Not only did this change allow slackin to be deployable on both Windows and Linux virtual machines, but we could also leverage the cheaper/free Azure Web Apps, a Platform as a Service (PaaS) offering on Azure.

For slackin, the required cloud assets were:

• Azure Web Application

Azure Resource Manager Template

Once you’ve determined what cloud resources are required, create an Azure Resource Manager (ARM) template. We won’t go into detail about authoring ARM templates, but once constructed, save it as azuredeploy.json into the root of your project repository.

The ARM template used for slackin is available on GitHub, and there are two sections to highlight:

Parameters

The parameters section of the ARM template defines the set of configurations that the user needs to input. These configurations will appear on the first page of the deployment wizard.

    "parameters": {
        ...
        "slackTeamId" : {
          "type": "string",
          "metadata": {
            "description": "Slack Team ID. (e.g. https://{this}.slack.com)"
          }
        },
        "slackApiToken" : {
          "type": "string",
          "metadata": {
            "description": "Slack API token (find it on https://api.slack.com/web)"
          }
        },
        "slackinRelease" : {
          "type": "string",
          "allowedValues": [
            "stable",
            "latest"
          ],
          "defaultValue": "stable",
          "metadata": {
            "description": "Slackin Release to Deploy (stable/latest)"
          }
        }
        ...
      },

Resources

Resources define the Azure resources to be deployed and their desired state when deployed. For instance, the definition used in slackin will: 1. Deploy a free tier (F1 SKU) web application to the Azure Region siteLocation defined by the user 2. Configure the web application to enable WebSockets and configure the appropriate environment variables (i.e. SLACK_SUBDOMAIN, etc.)

     "resources": [
        {
          "apiVersion": "2015-08-01",
          "name": "[parameters('hostingPlanName')]",
          "type": "Microsoft.Web/serverfarms",
          "location": "[parameters('siteLocation')]",
          "properties": {
          },
          "sku": {
            "name": "F1"
          }
        },
        {
          "apiVersion": "2015-08-01",
          "name": "[parameters('siteName')]",
          "type": "Microsoft.Web/sites",
          "location": "[parameters('siteLocation')]",
          "dependsOn": [
            "[resourceId('Microsoft.Web/serverfarms', parameters('hostingPlanName'))]"
          ],
          "properties": {
            "serverFarmId": "[parameters('hostingPlanName')]"
          },
          "resources": [
            {
              "apiVersion": "2015-08-01",
              "name": "web",
              "type": "config",
              "dependsOn": [
                "[resourceId('Microsoft.Web/Sites', parameters('siteName'))]"
              ],
              "properties": {
                "siteProperties": {
                  "webSocketsEnabled": true
                }
              }
            },
            {
              "apiVersion": "2015-08-01",
              "name": "appsettings",
              "type": "config",
              "dependsOn": [
                "[resourceId('Microsoft.Web/Sites', parameters('siteName'))]"
              ],
              "properties": {
                "SLACK_SUBDOMAIN": "[parameters('slackTeamId')]",
                "SLACK_API_TOKEN": "[parameters('slackApiToken')]",
                "SLACKIN_RELEASE": "[parameters('slackinRelease')]",
                "WEBSITE_NPM_DEFAULT_VERSION": "3.3.12",
                "WEBSITE_NODE_DEFAULT_VERSION": "5.1.1",
                "command": "bash scripts/azuredeploy.sh"
              }
            },
            {
              "apiVersion": "2015-08-01",
              "name": "web",
              "type": "sourcecontrols",
              "dependsOn": [
                "[resourceId('Microsoft.Web/Sites', parameters('siteName'))]",
                "[concat('Microsoft.Web/Sites/', parameters('siteName'), '/config/web')]"
              ],
              "properties": {
                "RepoUrl": "[parameters('repoURL')]",
                "branch": "[parameters('branch')]",
                "IsManualIntegration": true
              }
            }
          ]
        }
      ],

Add the Button

Lastly, with the ARM script defined, add the following line to your project’s readme to add the ‘Deploy to Azure’ button:

When a user clicks on the button, an HTTP referrer header is sent to azuredeploy.net denoting the URL and branch of the Git repository to deploy. By default, it is the master branch. However, you can specify an alternative repository and branch like so:

Opportunities for Reuse

With a couple of lines of code, we were able to add a ‘Deploy to Azure’ button to the slackin project giving users a simple and easy way to deploy a slackin instance to their cloud.

Using this example, you can add a ‘Deploy to Azure’ button to your project.

Jason Poon

Follow