Home > Software engineering >  heroku deployment with ci/cd
heroku deployment with ci/cd

Time:12-26

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! [email protected] build: react-scripts build npm ERR! spawn ENOENT

[email protected] build /home/runner/work/bigshopcicd/bigshopcicd cd frontend && npm run build

[email protected] build /home/runner/work/bigshopcicd/bigshopcicd/frontend react-scripts build

npm ERR! npm ERR! Failed at the [email protected] 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! [email protected] build: cd frontend && npm run build npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the [email protected] 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/[email protected]
        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: [email protected]
          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"

},

CodePudding user response:

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"
}
  • Related