T﻿he pre-configuration steps that are required to ensure your server is ready to accept the NodeJs app files and to ensure Azure DevOps can connect to the server are:

* S﻿et up an environment in your Azure DevOps project
* C﻿reate an SSH Connection Authorisation in Azure DevOps
* C﻿reate the target folder on the Ubuntu server
* I﻿nstall NodeJs on the Ubuntu server
* I﻿nstall pm2 globally on the Ubuntu server

T﻿he essential steps of this deployment pipeline are:

* F﻿etch the app files from the selected git repo (GitHub, Bitbucket etc)
* U﻿se the pre-built CopyFilesOverSSH task from Azure DevOps
* E﻿xclude the node_modules and git related files
* S﻿SH into the Ubuntu server
* R﻿un the NPM scripts (Test, Build)
* S﻿tart the app using PM2

```yaml
trigger:
- main

variables:
  # Azure Resource Manager connection created during pipeline creation
  azureSubscription: '${Your Azure Subscription Name}'
  # Agent VM image name
  vmImageName: 'ubuntu-latest'

  environmentName: '${Azure DevOps Environment Name}'

pool:
  vmImage: $(vmImageName)

stages:
- stage: Build
  displayName: Build stage
  jobs:  
  - job: Build
    displayName: Build
    steps:
    - task: CopyFilesOverSSH@0
      inputs:
        sshEndpoint: '${ssh-connection-name}'
        sourceFolder: '$(System.DefaultWorkingDirectory)'
        contents: |
          **
          !node_modules/**
          !.git/**
        targetFolder: '/home/${Ubuntu-Server-Username}/${nodejs-app-folder}'
        cleanTargetFolder: true
        cleanHiddenFilesInTarget: false
        readyTimeout: '20000'
    - task: SSH@0
      inputs:
        sshEndpoint: '${ssh-connection-name}'
        runOptions: 'inline'
        inline: |
          cd ${nodejs-app-folder}
          npm install --silent
          npm run build
          pm2 stop ${build-folder-main-js-file}
          pm2 start ${build-folder-main-js-file}
        readyTimeout: '20000'
```

I﻿mprovements that could be implemented to this pipeline are to ensure a npm test script is run and that all tests pass before allowing the build task to execute.

Deploying a NodeJs app to an Ubuntu Virtual Machine hosted with Azure using Azure DevOps should be pretty straightforward. Turns out, it is quite a lot more finicky than might appear!

How to Deploy a NodeJs App to Ubuntu Virtual Machine with Azure DevOps Pipelines

T﻿he trick to this is knowing that under the hood, Azure web apps that are running on Linux use the PM2 process manager to keep the web app online.

O﻿nce this is understood, the solution becomes relatively simple as the [PM2 documentation](https://pm2.keymetrics.io/docs/usage/pm2-doc-single-page/#serving-spa-redirect-all-to-indexhtml) itself makes mention of how to handle SPA applications. This will then make sure that all URL requests are redirected to the index.htrml file, which in our case is the React index.

F﻿or our Azure web app, all we need to do is update the start-up command to let PM2 know we are running a SPA application:

```textile
// Start up command needs to be:
pm2 serve /home/site/wwwroot/build --no-daemon --spa
```

T﻿o do this for your Azure web app, open the app in the portal, navigate to configuration, then general settings then Startup Command.

![Azure-portal-app-config-settings](/assets/screenshot-2024-02-19-at-7.01.43 pm.png "Azure Portal App Config Settings")

A﻿fter saving this setting, restart the web app and you will be able to navigate tothe routes configured in your React App.

Publishing a react app to Azure web apps is fairly trivial. However, when the web app is running Linux and the React app is using the React Router for a SPA application, the default configuration does not work.

Publishing a React App with Routing to a Linux Azure Web App

Setting up continuous deployment on an Azure Function app can save a lot of time, particularly if your development process follows small, agile deployments where you may deploy to your production environment multiple times a day or week.

In order to use [Azure DevOps](https://dev.azure.com), you will need a Microsoft account, but I will assume you have one since we are deploying to an Azure Functions app in an Azure subscription.

In order to get started, we need to add a YML file to our project in the main Git branch.

This file needs to be named specifically for Azure DevOps to utilise it:

**azure-pipelines.yml**

The below yml content is based on a Linux based function app, but there are comments made for changes required to publish to a Windows-based one.

The basic anatomy is:

1. Tell Azure which branch to run the logic on to publish
2. Create some variables so it knows which Azure subscription to connect to and which Function app to deploy to
3. Define which VM type to create
4. Use that VM to install a defined NodeJs version
5. Use the VM to run the npm commands to build the NodeJs project
6. Create a zip of the build files
7. Create an artifact of that zip file
8. Upload the zip file to the Azure Function App

```yaml
# Node.js Function App to Linux on Azure
# Build a Node.js function app and deploy it to Azure as a Linux function app.
# Add steps that analyze code, save build artifacts, deploy, and more:
# https://docs.microsoft.com/azure/devops/pipelines/languages/javascript

# This defined the Git repository branch to execute the deployment logic on
trigger:
- deploy

variables:

 # Azure Resource Manager connection created during pipeline creation
 # Thai can be retrieved from within the Azure Portal
 azureSubscription: '00000000-0000-0000-0000-000000000000'

 # Function app name. Set this to the name of your function app
 functionAppName: 'my-function-app-name

 # Environment name
 environmentName: 'my-function-app-name'

 # Agent VM image name. Change this to 'windows-latest' if your function app is a windows based app service.
 vmImageName: 'ubuntu-latest'

stages:
- stage: Build
 displayName: Build stage
 jobs:
 - job: Build
   displayName: Build
   pool:
     vmImage: $(vmImageName)

   steps:
   - task: NodeTool@0
     inputs:
       versionSpec: '14.x'
     displayName: 'Install Node.js'

   - script: |
       if [ -f extensions.csproj ]
       then
           dotnet build extensions.csproj --runtime ubuntu.16.04-x64 --output ./bin
       fi
     displayName: 'Build extensions'

   - script: |
       npm install
       npm run build --if-present
       npm run test --if-present
     displayName: 'Prepare binaries'

   - task: ArchiveFiles@2
     displayName: 'Archive files'
     inputs:
       rootFolderOrFile: '$(System.DefaultWorkingDirectory)'
       includeRootFolder: false
       archiveType: zip
       archiveFile: $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip
       replaceExistingArchive: true

   - upload: $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip
     artifact: drop

- stage: Deploy
 displayName: Deploy stage
 dependsOn: Build
 condition: succeeded()
 jobs:
 - deployment: Deploy
   displayName: Deploy
   environment: $(environmentName)
   pool:
     vmImage: $(vmImageName)
   strategy:
     runOnce:
       deploy:
         steps:
         - task: AzureFunctionApp@1
           displayName: 'Azure Functions App Deploy: my-function-app-name'
           inputs:
             azureSubscription: '$(azureSubscription)'
     # Set this to just 'functionApp' if your if app is windows based
             appType: functionAppLinux 
             appName: $(functionAppName)
             package: '$(Pipeline.Workspace)/drop/$(Build.BuildId).zip'
```

Now, every time you push a Git commit to the 'deploy' branch of your project Git repository, this yml file will execute to build your project and upload it automatically to your Azure function app.

Setting up continuous deployment on an Azure Function app can save a lot of time, particularly if your development process follows small, agile deployments where you may deploy to your production environment multiple times a day or week.

How to Deploy a NodeJs App to Ubuntu Virtual Machine with Azure DevOps Pipelines

Publishing a React App with Routing to a Linux Azure Web App

Use Azure DevOps to deploy a NodeJs Function app