Trying to deploy Vue App to Azure App Service, results in Error: Cannot find module '../package.json'

Question

I've got a simple Vue SPA that builds and can be served without problem locally, but when I try and build and deploy via GitHub Actions to an Azure App Service, it just results in the ':( Application Error' page when launching.

Below is the pretty much default workflow .yml, the app service configuration, and the error log from trying to build the app.

I assume the files are built from the /dist folder at /home/site/wwwroot, where node_modules are installed and package.json is generated.. but it doesn't seem like it is (there are no files when checking wwwroot, so build failed?)

Any help would be appreciated, I've been stuck on this for a whole day and will happily provide more info. I've also deployed the NodeJS backend to an app service without too much hassle, so I'm familiar with the process -- just can't get this frontend up!

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

on:
  push:
    branches:
      - main
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2

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

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

      - name: Upload artifact for deployment job
        uses: actions/upload-artifact@v2
        with:
          name: node-app
          path: dist/

  deploy:
    runs-on: ubuntu-latest
    needs: build
    environment:
      name: 'Production'
      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}

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

      - name: 'Deploy to Azure Web App'
        id: deploy-to-webapp
        uses: azure/webapps-deploy@v2
        with:
          app-name: 'shelf-library'
          slot-name: 'Production'
          publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_11D7C84BF0CE47B68181C49B9ED47D19 }}
          package: .

score 0 · Answer 1 · answered Dec 15 '22 at 07:22

Check the below steps to create VueJS and deploy to Azure App Service using Git Hub Actions.

Thanks @Anthony Salemo for the clear steps.

In Command prompt, run the below command to create a Vue App.

vue create  myvueapp

enter image description here

Navigate to the root directory of the application cd myvueapp and run

yarn serve

enter image description here

or

npm run serve

enter image description here

Run npm run build command for production build.dist folder will be created.
Push the application to GitHub Repository. You can check the code available in my GitHub Repository.

My GitHub folder structure

enter image description here

Create an Azure App service

enter image description here

Navigate to your App Service =>Deployment Center and select the code repo from your GitHub.

enter image description here

Initially I got the below content page when I tried to access the App.

enter image description here

Add the Startup Command in Configuration => General Settings.

 pm2 serve /home/site/wwwroot/dist --spa --no-daemon

Initially even I got the same Application Error.

enter image description here

In Git Hub I can see the build and deploy action is not yet completed.

enter image description here

Wait for the build to deploy successfully.

enter image description here

My deployed folder structure in KUDU Console

enter image description here

Now Iam able to access the Application without any issues.

enter image description here

I've followed near the exact same steps for deployment, the only difference I see is that my .yml only uploads the dist/ folder so steps are much quicker, and I am using npm instead of pm2 for the Startup Command. I have tried with pm2 serve, but it just says 'Waiting for response to warmup request for container...' for awhile before hanging up. My /wwwroot/ in KUDU is also empty, which suggests it is failing to build anything. — TabulaRasa, Dec 15 '22 at 10:58
https://stackoverflow.com/questions/66871045/pm2-not-found-on-azure-app-service-with-node-14-runtime -- I changed the startup command to 'npx serve -s' and it looks like it works, I really don't know why though compared to 'npm run serve' or 'pm2 serve' — TabulaRasa, Dec 15 '22 at 12:39

Ceeno Qi-MSFT · Answer 2 · 2022-12-22T07:35:49.283

I saw you are running your stages with different agents, so I suppose that your issue could be resulted from that the configuration in the build stage agent could not be inherited into the deploy stage agent.

So you could test to add the npm task to install the vue-cli-service module in your deploy agent again.

==========================================================

Updated on 12/22

I suppose that in deploy stage, you could add the npm and node installation with below.

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

      - name: npm install, build, and test
        run: |
          npm install
          npm run build --if-present
      - name: npm install, build, and test
        run: |
           npm install -g @vue/cli@latest
           npm i -g @vue/cli-service-global
           echo '<template><h1>Hello!</h1></template>' > App.vue
           vue serve

@TabulaRasa hi I have updated my answer you could check it for test — Ceeno Qi-MSFT, Dec 22 '22 at 07:36

Trying to deploy Vue App to Azure App Service, results in Error: Cannot find module '../package.json'

2 Answers2