heroku deployment with ci/cd - node.js

Question

I am trying to build a CI/CD pipeline with github actions in order to build and deploy my app to heroku. I used following YAML file. But it shows error in github action. Could anyone please help me to solve this problem. My reository is bigshopcicd.My project structure is
bigshop
|-backend
|-frontend
|-package.json
Error-
Run npm run build
sh: 1: react-scripts: not found
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! frontend#0.1.0 build: react-scripts build
npm ERR! spawn ENOENT
bigshop#1.0.0 build /home/runner/work/bigshopcicd/bigshopcicd
cd frontend && npm run build
frontend#0.1.0 build /home/runner/work/bigshopcicd/bigshopcicd/frontend
react-scripts build
npm ERR!
npm ERR! Failed at the frontend#0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?
npm ERR! A complete log of this run can be found in:
npm ERR! /home/runner/.npm/_logs/2021-12-23T08_13_25_954Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! bigshop#1.0.0 build: cd frontend && npm run build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the bigshop#1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/runner/.npm/_logs/2021-12-23T08_13_25_975Z-debug.log
Error: Process completed with exit code 1.
pipeline.yml-
name: Deployment pipeline
on:
push:
branches:
- main
pull_request:
branches: [main]
types: [opened, synchronize]
jobs:
simple_deployment_pipeline:
runs-on: ubuntu-18.04
steps:
- uses: actions/checkout#v2
- uses: actions/setup-node#v1
with:
node-version: '12.x'
- name: npm install
run: npm install
- name: build
run: npm run build
- name: deployment
uses: akhileshns/heroku-deploy#v3.12.12
if: ${{ github.event_name == 'push' && !contains(join(github.event.commits.*.message, ' ,'), '#skip') }}
with:
heroku_api_key: ${{secrets.HEROKU_API_KEY}}
heroku_app_name: bigshopcicd
heroku_email: fakirsumon78#gmmail.com
healthcheck: 'https://bigshopcicd.herokuapp.com/health'
checkstring: 'ok'
rollbackonhealthcheckfailed: true
- uses: actions/checkout#v2
- name: Bump version and push tag
uses: anothrNick/github-tag-action#eca2b69f9e2c24be7decccd0f15fdb1ea5906598
if: ${{ github.event_name == 'push' && !contains(join(github.event.commits.*.message, ' ,'), '#skip') }}
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
WITH_V: true
DEFAULT_BUMP: patch
RELEASE_BRANCHES: main
package.json file-
"scripts": {
"start": "node backend/server.js",
"dev": "set NODE_ENV=DEVELOPMENT& nodemon backend/server",
"prod": "set NODE_ENV=PRODUCTION& nodemon backend/server",
"seeder": "node backend/utils/seeder.js",
"build": "cd frontend && npm run build",
"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false && npm install --prefix frontend && npm run build --prefix frontend"
},

Answer 1

Your npm install command runs the install in your root package.json which doesn't contain react dependencies. Then the build step goes into ./frontend and tries to use those react script that were'nt fetched.
You could use npm's preinstall target to install the frontend dependencies.
Also try to see if it is possible to split the project into two different ones because this structure seem fragile and you actually loose the advantages of having a separate backend/frontend. ( plus your scripts get overly complicated )
EDIT:
Preinstall isn't specifically made for installing node modules, it is simply a step you can add to your package.json which will be run by npm before the install step, it can contain arbitrary script commands. In your case maybe try :
"scripts": {
"preinstall": "cd frontend && npm install",
"start": "node backend/server.js",
"dev": "set NODE_ENV=DEVELOPMENT& nodemon backend/server",
"prod": "set NODE_ENV=PRODUCTION& nodemon backend/server",
"seeder": "node backend/utils/seeder.js",
"build": "cd frontend && npm run build"
}