I developed website for movies and pushed it to Heroku successfully(done with node js and React) but it's not running

Viewed 126

Here is the package.json for the root react app

    {
      "name": "movie-timeline",
      "version": "0.1.0",
      "private": true,
      "dependencies": {
        "@fortawesome/fontawesome-svg-core": "^1.2.30",
        "@testing-library/jest-dom": "^4.2.4",
        "@testing-library/react": "^9.3.2",
        "@testing-library/user-event": "^7.1.2",
        "axios": "^0.19.2",
        "bootstrap": "^4.5.2",
        "create-react-app": "^3.4.1",
        "react": "^16.13.1",
        "react-dom": "^16.13.1",
        "react-icons": "^3.10.0",
        "react-router-dom": "^5.2.0",
        "react-scripts": "3.4.2",
        "react-spring": "^8.0.27"
      },
      "scripts": {
        "dev": "set PORT=3006 && react-scripts start",
        "start": "serve -s build",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
      },
      "proxy": "http://localhost:3006",
      "eslintConfig": {
        "extends": "react-app"
      },
      "browserslist": {
        "production": [
          ...
        ],
        "development": [
          ...
        ]
      }
    }

I added set PORT=3006 && react-scripts start" script so it can run locally and on Heroku.

This is what heroku logs:

$ heroku logs --tail

Warning: heroku update available from 7.38.2 to 7.42.6.
2020-08-12T22:32:51.450396+00:00 app[web.1]: npm ERR! errno ENOENT
2020-08-12T22:32:51.452680+00:00 app[web.1]: npm ERR! movie-timeline@0.1.0 start: `serve -s build`    
2020-08-12T22:32:51.452896+00:00 app[web.1]: npm ERR! spawn ENOENT
2020-08-12T22:32:51.453058+00:00 app[web.1]: npm ERR!
2020-08-12T22:32:51.453205+00:00 app[web.1]: npm ERR! Failed at the movie-timeline@0.1.0 start script.
2020-08-12T22:32:51.453348+00:00 app[web.1]: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
2020-08-12T22:32:51.467442+00:00 app[web.1]: 
2020-08-12T22:32:51.467627+00:00 app[web.1]: npm ERR! A complete log of this run can be found in:
2020-08-12T22:32:51.467740+00:00 app[web.1]: npm ERR!     /app/.npm/_logs/2020-08-12T22_32_51_460Z-debug.log
2020-08-12T22:32:51.556136+00:00 heroku[web.1]: Process exited with status 1
2020-08-12T22:32:51.706650+00:00 heroku[web.1]: State changed from starting to crashed   
2020-08-13T00:12:06.031766+00:00 heroku[web.1]: State changed from crashed to starting   
2020-08-13T00:12:29.908831+00:00 heroku[web.1]: Starting process with command `npm start`
2020-08-13T00:12:34.256591+00:00 app[web.1]: 
2020-08-13T00:12:34.256605+00:00 app[web.1]: > movie-timeline@0.1.0 start /app
2020-08-13T00:12:34.256606+00:00 app[web.1]: > serve -s build
2020-08-13T00:12:34.256606+00:00 app[web.1]: 
2020-08-13T00:12:34.267835+00:00 app[web.1]: sh: 1: serve: not found
2020-08-13T00:12:34.277638+00:00 app[web.1]: npm ERR! code ELIFECYCLE
2020-08-13T00:12:34.277976+00:00 app[web.1]: npm ERR! syscall spawn
2020-08-13T00:12:34.278160+00:00 app[web.1]: npm ERR! file sh
2020-08-13T00:12:34.278407+00:00 app[web.1]: npm ERR! errno ENOENT
// ...

can someone help me, please?

1 Answers

When you are pushing to Heroku, it run this script from your package.json within the react app:

{
  "scripts": {    
    "start": "serve -s build",
    // other
  },
}

And this is confirmed from the heroku logs...

// ...
2020-08-13T00:12:34.256605+00:00 app[web.1]: > movie-timeline@0.1.0 start /app
2020-08-13T00:12:34.256606+00:00 app[web.1]: > serve -s build
2020-08-13T00:12:34.256606+00:00 app[web.1]: 
2020-08-13T00:12:34.267835+00:00 app[web.1]: sh: 1: serve: not found
// ...

Because you installed serve globally on your local machine, the project runs.
Therefore you need to install serve locally for heroku to run it while starting your app.

$ npm install --save-dev serve

That way, heroku will be able to run your "start" script.

Related