React app runs locally, but it's not working when deployed to Azure Web App

Question

I am stuck in the middle with my issue I am encountering for a while.

I got a React app with parcel as a bundler. It runs nice and smooth on my local environment, but it's not working on my Azure Web App although all of the build and deployment processes works successfully (application version is being updated).

Here is my package.json:

{
  "name": "myapp",
  "version": "0.1.3",
  "private": true,
  "scripts": {
    "start": "npx parcel index.html --port=8081",
    "build": "npx parcel build index.html",
    "start:prod": "serve -s dist"
  },
  "dependencies": {
    "@parcel/config-default": "^2.8.3",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-router-dom": "5.2.0",
    "serve": "^14.2.0",
    "styled-components": "^5.3.9"
  },
  "devDependencies": {
    "@babel/core": "^7.21.4",
    "browserslist": "4.19.3",
    "parcel": "^2.8.3",
    "parcel-reporter-static-files-copy": "^1.3.4",
    "process": "^0.11.10"
  }
}

and here is my Github Actions workflow file:

# Docs for the Azure Web Apps Deploy action: https://github.com/Azure/webapps-deploy
# More GitHub Actions for Azure: https://github.com/Azure/actions

name: Build and deploy Node.js app to Azure Web App - wmyApp-eu-linux-webapp01

on:
  push:
    branches:
      - main

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: '18.x'

      - name: Cache node modules
        uses: actions/cache@v2
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-

      - name: Reinstall dependencies
        run: |
          rm -rf node_modules
          npm ci

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

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

  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: 'wmyApp'
          slot-name: 'Production'
          publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_C9DBEFD5302A4647A548B45C88AEE9BE }}
          package: .

When I go into my Azure Web App page, I got an error:

:( Application Error If you are the application administrator, you can access the diagnostic resources.

and when I go to Kudu console to see how is default_docker log doing, I am founding following error:

2023-04-27T18:21:34.721656533Z Error: Cannot find module './cli' 2023-04-27T18:21:34.721660933Z Require stack: 2023-04-27T18:21:34.721664933Z - /home/site/wwwroot/node_modules/.bin/parcel 2023-04-27T18:21:34.721669133Z at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15) 2023-04-27T18:21:34.721673733Z at Function.Module._load (internal/modules/cjs/loader.js:746:27) 2023-04-27T18:21:34.721677833Z at Module.require (internal/modules/cjs/loader.js:974:19) 2023-04-27T18:21:34.721681934Z at require (internal/modules/cjs/helpers.js:101:18) 2023-04-27T18:21:34.721686034Z at Object. (/home/site/wwwroot/node_modules/.bin/parcel:4:1) 2023-04-27T18:21:34.721700234Z at Module._compile (internal/modules/cjs/loader.js:1085:14) 2023-04-27T18:21:34.721705734Z at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10) 2023-04-27T18:21:34.721709834Z at Module.load (internal/modules/cjs/loader.js:950:32) 2023-04-27T18:21:34.721713834Z at Function.Module._load (internal/modules/cjs/loader.js:790:12) 2023-04-27T18:21:34.721717934Z at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:75:12) { 2023-04-27T18:21:34.721721935Z code: 'MODULE_NOT_FOUND', 2023-04-27T18:21:34.721726035Z requireStack: [ '/home/site/wwwroot/node_modules/.bin/parcel' ] 2023-04-27T18:21:34.721730135Z }

I did cleaned /wwwroot folder and reuploaded but it didn't resolve the issue.

Thanks in advance!

I did cleaned /wwwroot folder and reuploaded but it didn't resolve the issue.

Answer 1

Based on the issue description, it seems like there is an issue with the parcel module. The error message indicates that the module cannot be found. This could be due to a few reasons, such as the module not being installed or not being included in the deployment package.

Just to highlight, in your GitHub Actions workflow file, I see that you are using the npm ci command to install the dependencies. This command installs the exact versions of the dependencies specified in the package-lock.json file. However, it seems like you are using the parcel module as a development dependency, which means it might not be included in the package-lock.json file.

To ensure that the parcel module is included in the deployment package, you may try using the npm install command instead of npm ci. This command installs the latest compatible versions of the dependencies, which should include the parcel module.

Here is the modified npm install command:

npm install --production=false

This command installs both the production and development dependencies, which should include the parcel module.

You may also try adding the parcel module to the dependencies section of your package.json file instead of the devDependencies section. This ensures that the module is included in the deployment package.

      - name: Reinstall dependencies
    run: |
      rm -rf node_modules
      npm ci --production=false

After making these changes, you can commit and push the changes to trigger the GitHub Actions workflow again and see if the issue is resolved.