How to Deploy Your NodeJS Apps on Azure from GitHub

What is GitHub?

GitHub is a web based platform used for version control. Version control itself is a process designed to keep track of multiple different versions of software, contents, document or websites in development. Version control tools used to automate this process includes Git, Mercurial, Monotone, Bazaar, etc.

Why Is GitHub Useful?

GitHub is very useful for developers because:

It provides a web based graphical interface that makes interactions easy.
Simplifies the process of working with other people.
Easier to collaborate on projects.
Team members are able to work on different features or files and are able to merge it to the master branch of the project.

GitHub Actions

GitHub Actions is a Continuous Integration (CI) or Continuous Deployment (CD) service that is directly integrated into GitHub. Other services like GitHub Actions can be found in Jenkins and Travis CI. It helps to automate, customize, and execute your software development workflows right in your repository. Using this service it makes it easier to perform advanced operations such as tying it to events that might happen in GitHub such as working with issues, making a pull request. We can trigger off different things to happen not just deploying straight to production.

As at the time of this writing GitHub Action has been made available to all GitHub user accounts.

Requirements

Create a GitHub account
Sign up for a free Azure account

Getting Started

In this tutorial we will be learning about GitHub Actions and also deploy a NodeJS application on the Azure cloud platform. The working application can be found here .

To get started I have created a working project ready for deployment on my repository and I will be illustrating with the varying arrows.

After locating the project repository proceed to Fork as shown in the image above using the green arrow. This allows a copy of the project to be created and of course if you have a working project you can choose to skill this step.

After the repository has been forked click on the Actions tab as shown on the red arrow. This is the service we will be working with to integrate our continuous integration.

It displays a Getting Started page. Since we will be deploying on the Azure platform we can click the Deploy Node.js to Azure Web App. That will create a quick workflow to get us up and running for our deployment.

Here is a screenshot of the Node to Azure workflow flow. The red arrow shows a list of some verified feature actions that can be found on the marketplace such as Cache, setup Java Development Kit etc. We need to configure our new file and then make a commit to set up our YAML file in our project.

YAML Config

on:
  release:
    types: [created]

env:
  AZURE_WEBAPP_NAME: your-app-name    # set this to your application's name
  AZURE_WEBAPP_PACKAGE_PATH: '.'      # set this to the path to your web app project, defaults to the repository root
  NODE_VERSION: '10.x'                # set this to the node version to use

jobs:
  build-and-deploy:
    name: Build and Deploy
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js ${{ env.NODE_VERSION }}
      uses: actions/setup-node@v1
      with:
        node-version: ${{ env.NODE_VERSION }}
    - name: npm install, build, and test
      run: |
        # Build and test the project, then
        # deploy to Azure Web App.
        npm install
        npm run build --if-present
        npm run test --if-present
    - name: 'Deploy to Azure WebApp'
      uses: azure/webapps-deploy@v2
      with:
        app-name: ${{ env.AZURE_WEBAPP_NAME }}
        publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE }}
        package: ${{ env.AZURE_WEBAPP_PACKAGE_PATH }}

We need to set our application name in the AZURE_WEBAPP_NAME. After that’s done click on Start Commit see the blue arrow above to commit the new file. Here are more samples to get started with GitHub Action workflows to deploy to Azure.

Next, we setup deployment environment on Azure. Login to your portal here.

On the Azure homepage, you can proceed to use the search filter feature and select the Static Web Apps (Preview).

Up next click on Add to create a fresh deployment installation details for our project.

Next is to sign up with GitHub, select the project we wish to deploy and click Next : Build >

Build Tips

App Location: Location of your application code. For example, ‘/‘ represents the root of your app, while ‘/app‘ represents a directory called ‘app‘.

Api Location: Location of your Azure Functions code. For example, ‘/api‘ represents a folder called ‘api‘.

App artifact location: The path of your build output relative to your apps location. For example, setting a value of ‘build‘ when your app location is set to ‘/app‘ will cause the content at ‘/app/build‘ to be served.

Next click Review + Create, the setup then tries to checks for form validation errors and the allows you to finally Create your deployment.

As you can see now our deployment is complete and our app is ready to go live. Next click on the app name, check the blue arrow. This will then provide us with details of deployed app including the URL.