Build Node/Express using Github Actions and deploy to Azure Web App

Question

I have a Node/Express project which use the azure-ts-node-starter project. By default it compiles Typescript from /src into /dist (package.json below)

I'd like to delpoy to Azure every time I upload to the master branch of my Github repo but I'm not sure what to do with src/dist folders.

• Should I build on my PC, then commit everything, which I think would give me the choice of using Azure deployment center OR Github actions (not sure of the difference yet) to deploy the whole project or...

• Could I put the /dist folder in gitignore and only upload src files, then somehow build it every time I push to master?

If I do the second option, would it just deploy the contents of the /dist folder and not send all the source files to Azure? That would seem sensible but wouldn't it need some files from the main directory, such as the package.json file so that it knows how to start?

Apologies if this question isn't well formed, I'm not sure what I need to ask. I guess the questions is what is the standard way commit and deploy projects which use a dist directory?

Here are the scripts in the package.json file.

    "scripts": {
        "build": "npm run build-ts && npm run copy-static-assets",
        "build-ts": "tsc",
        "copy-static-assets": "ts-node copyStaticAssets.ts",
        "serve": "node dist/server.js",
        "start": "npm run serve",
        "watch": "concurrently -k -p \"[{name}]\" -n \"TypeScript,Node\" -c \"cyan.bold,green.bold\" \"npm run watch-ts\" \"npm run watch-node\"",
        "watch-node": "nodemon dist/server.js",
        "watch-ts": "tsc -w"
    },

Answer 1

Not answering directly what you want, but in the last 3 years I had so many issues with running NodeJs on Azure that I could only rely on containers to actually have the nodeJs app running smoothly...

for that, my GitHub action was like this

.github/workflows/azure.yml

name: Azure deploy
on:
  push:
    branches:
      - master

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
    # checkout the repo
    - name: 'Checkout GitHub Action' 
      uses: actions/checkout@master
    
    - name: 'Login via Azure CLI'
      uses: azure/login@v1
      with:
        creds: ${{ secrets.AZURE_CREDENTIALS }}
    
    - uses: azure/docker-login@v1
      with:
        login-server: my_domain.azurecr.io
        username: ${{ secrets.REGISTRY_USERNAME }}
        password: ${{ secrets.REGISTRY_PASSWORD }}
    
    - run: |
        docker build . -t my_domain.azurecr.io/teamcalendar:latest
        docker push my_domain.azurecr.io/teamcalendar:latest

Dockerfile

FROM node:lts-alpine

WORKDIR /usr/app

COPY package*.json ./
RUN npm install
COPY . .

CMD ["npm", "start"]

more info on MS Docs

Answer 2

I have done this with the second option you have mentioned, using GitHub Actions to deploy to Azure Web Apps.

Here are the relevant scripts in package.json :

"scripts": {
    "build": "tsc --project .",
    "build-prod": "npm install && npm run build"
}

Running the build-prod script will create a dist folder in your root with the compiled JavaScript.

To deploy to Azure Web App, you will need a web.config file in your root folder. Below is a standard web.config for Node projects, which I have modified to account for the dist folder.

<?xml version="1.0"?>

<configuration>
    <system.webServer>
        <handlers>
            <!-- indicates that the server.js file is a node.js application to be handled by the iisnode module -->
            <add name="iisnode" path="dist/server.js" verb="*" modules="iisnode" />
        </handlers>
        <staticContent>
            <mimeMap fileExtension=".json" mimeType="application/json" />
        </staticContent>
        <rewrite>
            <rules>
            <!-- Do not interfere with requests for node-inspector debugging -->
                <rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">
                  <match url="^server.js\/debug[\/]?" />
                </rule>
        
                <!-- First we consider whether the incoming URL matches a physical file in the /public folder -->
                <rule name="StaticContent">
                  <action type="Rewrite" url="public{REQUEST_URI}"/>
                </rule>
        
                <!-- All other URLs are mapped to the node.js site entry point -->
                <rule name="DynamicContent">
                  <conditions>
                    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/>
                  </conditions>
                  <action type="Rewrite" url="dist/server.js"/>
                </rule>
          </rules>
        </rewrite>
    </system.webServer>
</configuration>

To deploy with GitHub Actions, I used the following .yml file. This will automatically be created when you set up the GitHub Actions integration for your Azure Web App from the Azure Portal. I have merely modified the build step to npm run build-prod which I specified in package.json .

name: Build and deploy Node.js app to Azure Web App

on:
  push:
    branches:
      - master
  workflow_dispatch:

jobs:
  build-and-deploy:
    runs-on: windows-latest

    steps:
      - name: 'Checkout Github Action'
        uses: actions/checkout@v2

      - name: Set up Node.js version
        uses: actions/setup-node@v1
        with:
          node-version: "14.x"

      - name: npm install, build
        run: npm run build-prod

      - name: "Deploy to Azure Web App"
        id: deploy-to-webapp
        uses: azure/webapps-deploy@v2
        with:
          app-name: "xxx"
          slot-name: "xxx"
          publish-profile: ${{ secrets.AzureAppService_PublishProfile_xxxx }}
          package: .

This will trigger a build and deploy each time to push to your branch.