upon running npm run build, react-scripts are not found even though I can manually find react-scripts using ssh

Question

I am currently developing a web app that I attempted to deploy to Azure through github actions. I ran into this problem where react-scripts are not found

sh: 1: react-scripts: not found

I have tried all the solutions that I've found online. I went through package.json and found the dependencies. I ssh into azures server and checked the deployment path and found react-scripts in node_modules. I am not sure why this issue continues to exist. Ive tried reinstalling everything and force cleaning cache. Here is my workflow:

# 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 - AllevaApp

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


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

      # Zip artifacts to speed things up
      - name: Zip artifact for deployment
        run: zip release.zip ./* -qr

      - name: Upload artifact for deployment job
        uses: actions/upload-artifact@v2
        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 }}

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

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

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

      - name: 'Clean up artifacts'
        run: | 
          rm release.zip

Answer 1

Here is a workflow file that resolved my issue. don't forget to set "SCM_DO_BUILD_DURING_DEPLOYMENT = true" in web app environment variables on Azure:

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: Install dependencies
        run: npm install

      - name: Build the React app
        run: npm run build

      - name: Zip the build directory for deployment
        run: zip -r release.zip ./*

      - name: Upload build artifact
        uses: actions/upload-artifact@v3
        with:
          name: react-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

    steps:
      - name: Download build artifact
        uses: actions/download-artifact@v3
        with:
          name: react-app

      - name: Login to Azure
        uses: azure/login@v1
        with:
          client-id: ${{ secrets.AZUREAPPSERVICE_}}
          tenant-id: ${{ secrets.AZUREAPPSERVICE }}
          subscription-id: ${{ secrets.AZUREAPPSERVICE }}

      - name: Deploy to Azure Web App
        id: deploy-to-webapp
        uses: azure/webapps-deploy@v2
        with:
          app-name: 'web-app-name'
          slot-name: 'Production'
          package: release.zip