npm ERR! missing script: build in REACT DEPLOYED IN HEROKU

Question

I'm trying to deploy a project in Heroku with create-react-app using Node as my server and MongoDB for my database but I'm getting an error. this is my first to deploy a project with React. I have 2 package.json files. One for create-react-app the other is for my node server.

What I did was:

run the build in React,
commit,
create a Heroku app using heroku create -b https://github.com/mars/create-react-app-buildpack.git
I pushed it to Heroku master.

Here are the logs.

Counting objects: 203, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (187/187), done.
Writing objects: 100% (203/203), 191.40 KiB | 5.80 MiB/s, done.
Total 203 (delta 91), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote: 
remote: -----> React.js (create-react-app) multi app detected
remote: -----> Configure create-react-app build environment
remote:        Using `NODE_ENV=development`
remote: =====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-multi.git
remote: =====> Detected Framework: Multipack
remote: =====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-nodejs.git
remote: =====> Detected Framework: Node.js
remote: 
remote: -----> Creating runtime environment
remote:        
remote:        NPM_CONFIG_LOGLEVEL=error
remote:        NPM_CONFIG_PRODUCTION=false
remote:        NODE_VERBOSE=false
remote:        NODE_ENV=development
remote:        NODE_MODULES_CACHE=true
remote: 
remote: -----> Installing binaries
remote:        engines.node (package.json):  unspecified
remote:        engines.npm (package.json):   unspecified (use default)
remote:        
remote:        Resolving node version 8.x...
remote:        Downloading and installing node 8.11.4...
remote:        Using default npm version: 5.6.0
remote: 
remote: -----> Restoring cache
remote:        Skipping cache restore (not-found)
remote: 
remote: -----> Building dependencies
remote:        Installing node modules (package.json + package-lock)
remote:        added 85 packages in 3.391s
remote: 
remote: -----> Caching build
remote:        Clearing previous node cache
remote:        Saving 2 cacheDirectories (default):
remote:        - node_modules
remote:        - bower_components (nothing to cache)
remote: 
remote: -----> Pruning devDependencies
remote:        Skipping because NODE_ENV is not 'production'
remote: 
remote: -----> Build succeeded!
remote: =====> Downloading Buildpack: https://github.com/mars/create-react-app-inner-buildpack.git
remote: =====> Detected Framework: React.js (create-react-app)
remote:        Writing `static.json` to support create-react-app
remote:        Enabling runtime environment variables
remote: npm ERR! missing script: build
remote: 
remote: npm ERR! A complete log of this run can be found in:
remote: npm ERR!     /app/.npm/_logs/2018-09-04T05_56_24_845Z-debug.log
remote:  !     Push rejected, failed to compile React.js (create-react-app) multi app.
remote: 
remote:  !     Push failed
remote: Verifying deploy...
remote: 
remote: !   Push rejected to klikie.
remote: 
To https://git.heroku.com/klikie.git
 ! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/klikie.git

this is my package.json in create-react-app

{
  "name": "klikme",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:8000/",
  "dependencies": {
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "react-router-dom": "^4.3.1",
    "react-scripts": "1.1.5",
    "styled-components": "^3.4.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

this is for my server dep:

{
  "name": "klikme",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "nodemon server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.18.3",
    "express": "^4.16.3",
    "mongoose": "^5.2.12",
    "morgan": "^1.9.0"
  }
}

I added this in my server too since its in the documentation:

app.use(express.static(path.join(__dirname, 'client/build')));
app.get('/', function(req, res) {
  res.sendFile(path.join(__dirname, 'client/build', 'index.html'));
});

Daniel · Accepted Answer · 2018-09-04 12:13:40Z

1

So a couple of things I notice based on what you shared here. You are not using the engines section of your package.json file to specify the Node.js version to use on Heroku. It would look something like this:

{
  "name": "server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "engines": {
    "node": "9.3.0",
    "npm": "5.6.0"
  },

You will also see the version of npm separated out above, Node.js comes bundled with npm, so most of the time you don’t need to specify a separate npm version. However, if you intentionally use a different version of npm locally, you can specify the same version of npm on Heroku.

Lastly, there are Heroku build steps and I do not see that in your main package.json file. Keep in mind that what I have written here does not apply to your create-react-app package.json file because that will be blown away when you deploy to Heroku. create-react-app will cease to exist in Heroku.

So for Heroku specific actions you will want to add something like this to your main package.json file:

"heroku-postbuild":
      "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"

In regards to what you added in your server, try writing it this way:

if (process.env.NODE_ENV === 'production') {
  // Express will serve up production assets
  // like main.js or main.css
  app.use(express.static('client/build'));

  // Express will serve up the index.html file if
  // it doesnt recognize the route
  const path = require('path');
  app.get('*', (req, res) => {
    res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
  });
}

Also, I am assuming this is in your main index.js file and you should also have these two lines of code at the bottom of the file:

const PORT = process.env.PORT || 5000;
app.listen(PORT);

answered Sep 4, 2018 at 12:13

Daniel

15.7k20 gold badges117 silver badges184 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

aRtoo Over a year ago

hello sir. thank you for your answer. i also followed you instruction. it building the site but when i open it, it says that 404 not found ngix. my from the client and server is the same. but regardless right because it will be serve in the build folder?

aRtoo Over a year ago

i change the heroku-postbuild too because itll still look for a build script so i changed it to this. "build": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"

Daniel Over a year ago

@artoo, did you get a successful build to Heroku or did it reject the build? That info would be in your terminal.

aRtoo Over a year ago

i got a success build but when i got to site it just say 404 not found.

aRtoo Over a year ago

i recreated my heroku. its saying now not found but not 404. i think because its not serving the static file because the environement is not being change. i tried this locally and it runned. NODE_ENV=production node server and it runned.

|

Collectives™ on Stack Overflow

npm ERR! missing script: build in REACT DEPLOYED IN HEROKU

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related