Azure Deployment Pipeline fails at "react-scripts build" - node.js

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/