1

I have a few small react web apps I have made that I am trying to deploy to heroku. I found this https://github.com/mars/create-react-app-buildpack through a youTube video and supposedly this is/was a simple method for deployment. There are several steps the author lists (first two don't apply):

  1. git init
  2. heroku create $APP_NAME --buildpack https://github.com/mars/create-react-app-buildpack.git
  3. git add .
  4. git commit -m "Start with create-react-app"
  5. git push heroku master
  6. heroku open

Once I get to the git push heroku master I get an error in console that says: 

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-03-26T16_55_19_748Z-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 my-simple-react-weather-app.
remote:
To https://git.heroku.com/my-simple-react-weather-app.git
 ! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/my-simple-react-weather-app.git'

I did some searching and found a few build scripts for my package.json file but none of them seem to work (""build": " webpack --config webpack.conf.js"")

Here is my package.json:

{
  "name": "redux-simple-starter",
  "version": "1.0.0",
  "description": "Simple React YouTube App",
  "main": "index.js",
  "scripts": {
    "start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js",
    "test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js --recursive ./test",
    "test:watch": "npm run test -- --watch"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.2.1",
    "babel-loader": "^6.2.0",
    "babel-preset-es2015": "^6.1.18",
    "babel-preset-react": "^6.1.18",
    "chai": "^3.5.0",
    "chai-jquery": "^2.0.0",
    "jquery": "^2.2.1",
    "jsdom": "^8.1.0",
    "mocha": "^2.4.5",
    "react-addons-test-utils": "^0.14.7",
    "webpack": "^1.12.9",
    "webpack-dev-server": "^1.14.0"
  },
  "dependencies": {
    "babel-preset-stage-1": "^6.1.18",
    "lodash": "^3.10.1",
    "react": "^0.14.3",
    "react-dom": "^0.14.3",
    "react-redux": "4.3.0",
    "react-router": "^2.0.1",
    "redux": "^3.0.4",
    "youtube-api-search": "0.0.5"
  }
}

Can anyone help me out here? I am logged into my heroku account already. Is there a simpler way than what I am doing here?

kostix
  • 51,517
  • 14
  • 93
  • 176
RobiminusMaximus
  • 91
  • 1
  • 2
  • 9

3 Answers3

3

If you provide a git repo it may help to git to the issue quickly but for now make sure you installed

react-scripts

npm i react-scripts --save-dev

make sure -dev is there so it runs before server launch for more details

also, keep your client ( react app ) package.json including the same 

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"

also its very important to make sure you are using the right buildpacks if its only react app no node.js for more details

heroku create $APP_NAME --buildpack mars/create-react-app

but if you are building dual with node.js 

heroku buildpacks:clear

and consider to follow instructions here How to use create-react-app with a custom Node server on Heroku

Ahmed Younes
  • 964
  • 12
  • 17
2

You mentioned that "build": " webpack --config webpack.conf.js" is not working. I am guessing that is why you omitted it from your package.json. This is what is needed to resolve the error message. Once you get this script working in your package.json, then all should be good.

Looking at the start script, it's possible that you need to run webpack by specifying it from the .bin directory. I'm not sure what version of node you are using.

scripts: {
    ...
    "build": "./node_modules/.bin/webpack --config webpack.conf.js",
    ...
}
psychotiq
  • 583
  • 1
  • 4
  • 7
-1

Try this: 

"build": "webpack"

This where I got it from. https://webpack.js.org/guides/getting-started/

spottybadrabbit
  • 1
  • 1