Developer Notes: Configure a CI/CD pipeline for your node js project using Azure and Github Actions
Tags: devops, webdev, javascript, programming
Published: 2024-07-11 19:35:37

_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](https://portal.azure.com) 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. 
![A view of the azure portal showing the app service in the dropdown of services](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zvob77txfsp8xxy9ewun.png)

- 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](https://learn.microsoft.com/en-gb/azure/app-service/deploy-github-actions?tabs=userlevel%2Cnodejs#1-generate-deployment-credentials), but we are using the Service Principal option cos it is quite straight forward. 

Open the Azure cli, (indicated in the image below) 
![Image of the azure portal indicating the location of the azure cli tool](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ahryvj0w77ab7qt9793g.png)

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 <subscription-id>, <resourcegroup-name> and <app-name> 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: <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: '<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.