[FIXED] How do I create a Release pipeline for a Node.js web app in Azure DevOps?

Issue

I want to enable continuous deployment on Azure DevOps for a Node.js app, by creating a Release pipeline. How do I make this happen?

Solution

When I wrote the previous answer I made one year ago, Azure DevOps didn't have the web app deployment task for build pipelines, so it had to be done using a release pipeline. Deploying through a build pipeline is much better and I highly recommend it because it allows you to commit all your CI/CD jobs to the repo. (Build pipelines are labeled "Pipelines" in the sidebar and release pipelines are in "Releases".)

Thus, this answer is for deploying your web app through your build pipeline. See my older answer if you would like to use a release pipeline.

1. Create a service connection.
2. Assuming you have a service connection for your web app and you have a Node.js project in DevOps, create a package.json and main.js for your project. Run this locally to make sure it works on your computer.

{
  "name": "test-project",
  "version": "0.0.0",
  "scripts": {
    "start": "node main.js",
    "test": ""
  },
  "dependencies": {
    "express": "^4.17.1"
  }
}

const express = require('express');
const app = express();
const port = process.env.PORT || 3000; // You can see your app's env variables in Kudu: https://<your app>.scm.azurewebsites.net/

app.get('/', (req, res) => res.send('Hello World!'));

app.listen(port, () => console.log(`Example app listening on port ${port}!`));

3. Now you need a YAML file for the pipeline. Name this file azure-pipelines.yml. The YAML schema documentation is here.

trigger:
  - '*' # Run pipeline when a commit is pushed to any branch
  - 'refs/tags/*' # Run pipeline when a tag is pushed

jobs:
- job: test
  pool:
    vmImage: ubuntu-latest
  steps:
  - script: npm install
    displayName: npm install
  - script: npm run test
    displayName: npm run test

- job: deploy
  condition: startsWith(variables['Build.SourceBranch'], 'refs/tags/') # Run deploy job only if triggered by tag
  pool:
    vmImage: ubuntu-latest
  steps:
  - script: npm install
    displayName: npm install
#  - script: npm run build # If you are using TypeScript
#    displayName: npm run build
  - task: AzureWebApp@1 # https://learn.microsoft.com/en-us/azure/devops/pipelines/tasks/deploy/azure-rm-web-app?view=azure-devops
    inputs:
      azureSubscription: <service connection name> # Replace this with the service connection name
      appName: test-project # Replace this with the web app name
      package: $(Build.SourcesDirectory)
      customWebConfig: -Handler iisnode -NodeStartFile main.js -appType node # https://learn.microsoft.com/en-us/azure/devops/pipelines/targets/webapp?view=azure-devops&tabs=yaml

4. Replace the project-specific values in the AzureWebApp@1 task and push this file to your repo.
5. Go to the Pipelines page and click New pipeline. The pipelines options (It's really simple):

• "Where is your code?" Azure Repos Git
• "Select a repository" Select your repo
• "Configure your pipeline" Existing Azure Pipelines YAML file
• "Select an existing YAML file" Path to azure-pipelines.yml
• Click Run
• On the first run, it may say that the service connection is unauthorized. Clicking "Authorize resources" then running the build again manually with the Queue button will resolve this.

6. To run the build job, create a tag and push it. Go back to the builds list, you will see your deployment job running.

• To do this through the web interface: Go to the Tags page under Repos and click New Tag. For some reason it requires a tag description, so I just copy the tag name.

7. When the build finishes successfully, go to your site, and you should see the hello world message.

• If your site displays an application error message, you can check the error log by going to your web app in the Azure portal, then Log stream page in the sidebar. Note that the app container is started only after someone visits the web page. Therefore, to test app initialization, you must first visit your web page.

Answered By - MakotoE

Answer Checked By - Candace Johnson (PHPFixing Volunteer)