Trying to deploy a Vue application to Azure App Service results in error: Module "../package.json" not found

Question

I have a simple Vue SPA that builds and serves locally with no issues, but when I try to build and deploy to Azure App Service via GitHub Actions it just results in ': (An error occurred when the application started '' page.

Below is the almost default workflow .yml, the application service configuration, and the error log when trying to build the application.

I assume these files are built from the /dist folder of /home/site/wwwroot where node_modules is installed and package.json is generated ..but it doesn't seem to be the case (no files when checking wwwroot, so the build fails?)

Any help would be greatly appreciated, I've been stuck on this all day and would be happy to provide more information. I also deployed the NodeJS backend to the app service without too much trouble, so I'm familiar with the process - just can't get this frontend started!

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: .

Answer 1

Check the following steps to create VueJS and deploy to Azure App Service using Git Hub actions.

Thanks to @Anthony Salemo for the clear steps.

In the command prompt, run the following command to create a Vue application.

vue create  myvueapp

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

yarn serve

or

npm run serve

• Run the npm run build command for production build. distThe folder will be created.

• Push the application to the GitHub repository. You can view the available code in my GitHub repository.

My GitHub folder structure

• Create Azure App Service

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

• Initially when I tried to access the app I saw the following content page.

• Add start command in Configuration => General Settings.

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

• Initially I had the same application error.

• In Git Hub, I can see that the build and deploy operations are not yet complete.

• Wait for the build and deployment to be successful.

The folder structure I deployed in the KUDU console

• Now I can access the app without any problem.