Trying to deploy a Vue application to Azure App Service results in error: Module "../package.json" not found
P粉269847997
P粉269847997 2023-08-31 13:58:53
0
1
549
<p>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 '<strong>: (An error occurred when the application started '</strong>' page.</p> <p>Below is the almost default workflow <code>.yml</code>, the application service configuration, and the error log when trying to build the application. </p> <p>I assume these files are built from the <code>/dist</code> folder of <code>/home/site/wwwroot</code> 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?)</p> <p>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! </p> <pre class="brush:php;toolbar:false;">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: .</pre>
P粉269847997
P粉269847997

reply all(1)
P粉986028039

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.

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template