Azure Deployment Pipeline fails at "react-scripts build"

Question

I have a repository which represents the code for an Express Web App which serves a React frontend when started. I tried automating the process of building and deploying using Azure pipelines. The build step succeeds, however the deployment one fails. The repo is set up like this:

my_app/
├── client/
│   ├── src/
│   ├── package.json
│   └── index.js
├── package.json
├── server.js
└── azure-pipelines.yml

And here are the configuration files:

client/package.json

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "proxy": "http://localhost:5001/"
}.

package.json:

{
  "name": "my-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "cd client/ && npm install && npm run build && cd ../",
    "start": "npm install && node server",
    "build": "cd client/ && npm install && npm run build && cd ../",
    "dev": "node server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.19.0",
    "dotenv": "^8.2.0",
    "express": "^4.17.1"
  }
}

azure-pipelines.yml:

trigger:
- master

variables:

  # Azure Resource Manager connection created during pipeline creation
  azureSubscription: 'my_sub_id'

  # Web app name
  webAppName: 'my_app_name'

  # Environment name
  environmentName: 'my_env_name'

  # Agent VM image name
  vmImageName: 'ubuntu-latest'

stages:
- stage: Build
  displayName: Build stage
  jobs:  
  - job: Build
    displayName: Build
    pool:
      vmImage: $(vmImageName)

    steps:
    - task: NodeTool@0
      inputs:
        versionSpec: '10.x'
      displayName: 'Install Node.js'

    - script: |
        npm install
        npm run build --if-present
        npm run test --if-present
      displayName: 'npm install, build and test'



    - task: ArchiveFiles@2
      displayName: 'Archive files'
      inputs:
        rootFolderOrFile: '$(System.DefaultWorkingDirectory)'
        includeRootFolder: false
        archiveType: zip
        archiveFile: $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip
        replaceExistingArchive: true

    - upload: $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip
      artifact: drop

- stage: Deploy
  displayName: Deploy stage
  dependsOn: Build
  condition: succeeded()
  jobs:
  - deployment: Deploy
    displayName: Deploy
    environment: $(environmentName)
    pool: 
      vmImage: $(vmImageName)
    strategy:
      runOnce:
        deploy:
          steps:            
          - task: AzureWebApp@1
            displayName: 'Azure Web App Deploy: referee-management-tool'
            inputs:
              azureSubscription: $(azureSubscription)
              appType: webAppLinux
              appName: $(webAppName)
              runtimeStack: 'NODE|10.10'
              package: $(Pipeline.Workspace)/drop/$(Build.BuildId).zip
              startUpCommand: 'npm run start'

The error which I get in Azure Pipelines Deploy:

2020-05-25T15:56:53.2620824Z Error: Cannot find module '../scripts/build'
2020-05-25T15:56:53.2621190Z Require stack:
2020-05-25T15:56:53.2626302Z - /tmp/8d800c3a4e8367c/client/node_modules/.bin/react-scripts
2020-05-25T15:56:53.2627240Z     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:982:15)
2020-05-25T15:56:53.2627901Z     at Function.resolve (internal/modules/cjs/helpers.js:83:19)
2020-05-25T15:56:53.2628870Z     at Object.<anonymous> (/tmp/8d800c3a4e8367c/client/node_modules/.bin/react-scripts:31:23)
2020-05-25T15:56:53.2629532Z     at Module._compile (internal/modules/cjs/loader.js:1158:30)
2020-05-25T15:56:53.2630113Z     at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
2020-05-25T15:56:53.2630662Z     at Module.load (internal/modules/cjs/loader.js:1002:32)
2020-05-25T15:56:53.2631232Z     at Function.Module._load (internal/modules/cjs/loader.js:901:14)
2020-05-25T15:56:53.2631841Z     at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:74:12)
2020-05-25T15:56:53.2632406Z     at internal/main/run_main_module.js:18:47 {
2020-05-25T15:56:53.2633045Z   code: 'MODULE_NOT_FOUND',
2020-05-25T15:56:53.2633823Z   requireStack: [ '/tmp/8d800c3a4e8367c/client/node_modules/.bin/react-scripts' ]
2020-05-25T15:56:53.2634320Z }

I have already tried SSH-ing into the machine to test the "node server" command by hand, but for some reason the SSH connection was dropped and I could not re-connect. If you need more information here is the repo

Answer 1

I solved this problem finally: In the azure-pipelines.yml file, in the Stages->Build->Script section, I added cd client/ && npm install && cd ../ because npm was not installing the packages needed by the client and was performing npm install only in the parent folder, parsing the package.json there. After adding this, everything was fine.

Answer 2

You need to build the react app locally and use the build folder in your express webapp project.

The project structure should look like this:

my_app/
├── client/
│   ├── build/
│       ├── reat_built_files
│           
├── package.json
├── server.js
└── azure-pipelines.yml

Reference:

https://devblogs.microsoft.com/premier-developer/deploying-react-apps-to-azure-with-azure-devops/