node.jsazurenuxt3.js

How do I deploy a Nuxt 3 solution to an Azure Node Web App

For the last few days I've been trying to configure an Azure Web App using Node as runtime stack. All the guides out there talks about Static Web Apps but that does not suit my needs.

I use Github Actions to build and deploy the solution and all checkmarks are green in the end. The site however says ":( Application Error" and the diagnostic resources says: The Resource '.../slots/gfecb4esg8r4dcc7' under resource group 'xxx' was not found.. Since I don't use slots I've tried to remove slot-name: 'Production' from the yaml file to no prevail, the error message stays the same.

  1. What environment variables do I need to configure?
  2. What do I put as Startup Command in the Azure Web App?
  3. What do I put as the start command in package.json?
  4. Am I missing something else?

Here is my yaml file content if necessary:

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

on:
    push:
        branches:
            - main
    workflow_dispatch:

jobs:
    build:
        runs-on: ubuntu-latest

        steps:
            - uses: actions/checkout@v4

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

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

            - name: Zip artifact for deployment
              run: zip release.zip ./* -r

            - name: Upload artifact for deployment job
              uses: actions/upload-artifact@v4
              with:
                  name: node-app
                  path: release.zip

    deploy:
        runs-on: ubuntu-latest
        needs: build
        environment:
            name: "Production"
            url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}
        permissions:
            id-token: write #This is required for requesting the JWT

        steps:
            - name: Download artifact from build job
              uses: actions/download-artifact@v4
              with:
                  name: node-app

            - name: Unzip artifact for deployment
              run: unzip release.zip

            - name: Login to Azure
              uses: azure/login@v2
              with:
                  client-id: ${{ secrets.AZUREAPPSERVICE_CLIENTID_XXX }}
                  tenant-id: ${{ secrets.AZUREAPPSERVICE_TENANTID_XXX }}
                  subscription-id: ${{ secrets.AZUREAPPSERVICE_SUBSCRIPTIONID_XXX }}

            - name: "Deploy to Azure Web App"
              id: deploy-to-webapp
              uses: azure/webapps-deploy@v3
              with:
                  app-name: "myapp"
                  # slot-name: 'Production'
                  package: .
Solution

  • I created sample nuxtjs app and even I got the Application error after deploying it to azure web app through GitHub.

    The .output folder is not deployed to Azure through GitHub Actions, even though when we run the npm run build command in workflow file.

    If you want to deploy the application smoothly, you can deploy it via VS Code Azure Extension. As it will add all files automatically.

    Goto Azure Extension -> Subscription -> Select Azure Web App -> Right Click hit deploy to web app.

    enter image description here

    Azure Web App Output:

    enter image description here