Developer Notes: Configure a CI/CD pipeline for your node js project using Azure and Github Actions

Someone posted on twitter that when engineers do stuff, they should write about how they achieve it. It can save other engineers the time of searching to find the solution. And that's why we are here.

In this article we would configure a CI/CD Pipeline for a node js project using Azure as the cloud provider and GitHub actions.

First of all

1. Create the App Service on Microsoft Azure.

• Log on to the Microsoft Azure portal or create an account if you do not have one. (As at the time of the writing they give new accounts up to $200 credits.

• Next, search for azure app.
  

• Select Create > WebApp. Then fill the details in the form. Select the runtime stack as Node xx LTS. Continue to create until.

At the end of the process, you should have a web app that has the microsoft default page.

Next,

2. Generate the Azure credentials for Github actions.

There are several methods documented here, but we are using the Service Principal option cos it is quite straight forward.

Open the Azure cli, (indicated in the image below)

And run the following command:

az ad sp create-for-rbac --name "myApp" --role contributor --scopes /subscriptions/<subscription-id>/resourceGroups/<group-name>/providers/Microsoft.Web/sites/<app-name> --json-auth

Replace the , and with the right details from your azure app service dashboard. The "myApp" is the name of the service Principal.

The command will generate an output like this.

{
"clientId": "<GUID>",
"clientSecret": "<GUID>",
"subscriptionId": "<GUID>",
"tenantId": "<GUID>",
(...)
}

This will be used later.

Finally to Github

3. Add secret, create the Github Action and trigger.

• In the repository navigate to settings > secrets and variables > actions.

• Click add new repository secret. Paste the json output as it is in the secret field and AZURE_CREDENTIALS in the name field.

• Navigate to the actions tab to add a github action flow to the project. Search for "Deploy Node.js to Azure Web App" and click configure to continue.

  • A workflow file, azure-webapps-node.yml, is created which can be edited before committing changes.

Edit the file to look like below:

`on:
push:
branches: [ "develop" ]
workflow_dispatch:

env:
AZURE_WEBAPP_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: '' # set this to the node version to use

permissions:
contents: read

jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: 'Checkout Github Action'
uses: actions/checkout@v4

- uses: azure/login@v1
  with:
    creds: ${{ secrets.AZURE_CREDENTIALS }}

- name: Setup Node ${{ env.NODE_VERSION }}
  uses: actions/setup-node@v4
  with:
    node-version: ${{ env.NODE_VERSION }}
    cache: 'npm'

- name: npm install, build, and test
  run: |
    npm install

- uses: azure/webapps-deploy@v3
  with:
    app-name: ${{ env.AZURE_WEBAPP_NAME }}
    package: ${{ env.AZURE_WEBAPP_PACKAGE_PATH }}

# Azure logout 
- name: logout
  run: |
    az logout`

The work flow files is triggered on push to the develop branch and logs into the azure portal using the credentials you have saved in the secrets earlier and then continues to build and deploy.

Remember to replace edit the web app name, node version accordingly.

Finally trigger the workflow for the first run. The default web page on your azure portal should disappear and you have your web app configured for a CI/CD pipeline that is triggered on push to the develop branch.

Hope this helps another engineer.