{"id":2115,"date":"2017-01-17T12:00:00","date_gmt":"2017-01-17T12:00:00","guid":{"rendered":"https:\/\/www.microsoft.com\/reallifecode\/index.php\/2017\/01\/17\/the-deploy-to-azure-button\/"},"modified":"2020-03-15T06:03:37","modified_gmt":"2020-03-15T13:03:37","slug":"the-deploy-to-azure-button","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/ise\/the-deploy-to-azure-button\/","title":{"rendered":"The Deploy to Azure Button"},"content":{"rendered":"

The \u2018Deploy to Azure\u2019 button enables quick and easy deployment of your open source projects to Microsoft Azure. We\u2019ll walk through how we added a \u2018Deploy to Azure\u2019 button to the slackin<\/a> project, and show how you can do the same.<\/p>\n

What is slackin?<\/h2>\n

https:\/\/devblogs.microsoft.com\/cse\/wp-admin\/revision.php?revision=11045<\/p>\n

slackin<\/a> is an open source web application used by projects such as GitHub Atom<\/a>, Socket.IO<\/a>, and VsCodeVim<\/a>. One of the pain points of managing a public Slack<\/a> 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.<\/p>\n

\"Image<\/p>\n

 <\/p>\n

To use slackin, project owners must deploy and configure their own instance of the slackin web application.<\/p>\n

The Problem<\/h2>\n

Deploying an application is normally a fairly involved workflow:<\/p>\n

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

    These steps require a level of understanding that should not be required of users and customers.<\/p>\n

    Overview of the Solution<\/h2>\n

    Adding a \u2018Deploy to Azure\u2019 button<\/a> to a project\u2019s readme provides users with a simple mechanism to easily and quickly deploy your application to Microsoft Azure.<\/p>\n

    \"Image<\/p>\n

    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:<\/p>\n

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

      <\/p>\n

      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 \u2018Deploy to Azure\u2019 button.<\/p>\n

      Define the Cloud Assets<\/h2>\n

      slackin relied on certain tools such as make<\/code> 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<\/code> instead of make<\/code>. 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>, a Platform as a Service (PaaS) offering on Azure.<\/p>\n

      For slackin, the required cloud assets were:<\/p>\n