How to make Mern Stack work on Heroku
I am testing Mern Stack (Mongo Express React / Redux Node) and setting it up without development. Now I'm trying to deploy to Heroku. I did the heroku git push master as usual, but when I browse the site I see Heroku app error. I added MongoDB via Heroku and changed my heroku config settings so it uses this db (I think I did it right). So I check the logs:
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! mern-starter@1.0.0 start: `cross-env NODE_ENV=development nodemon index.js`
npm ERR! spawn ENOENT
Down a bit:
> mern-starter@1.0.0 start /app
> cross-env NODE_ENV=development nodemon index.js
sh: 1: cross-env: not found
Further down:
npm ERR! Linux 3.13.0-79-generic
npm ERR! argv "/app/.heroku/node/bin/node" "/app/.heroku/node/bin/npm" "start"
npm ERR! node v5.10.0
npm ERR! npm v3.8.3
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! mern-starter@1.0.0 start: `cross-env NODE_ENV=development nodemon index.js`
npm ERR! syscall spawn
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the mern-starter@1.0.0 start script 'cross-env NODE_ENV=development nodemon index.js'.
So, I don't know that much about the end, but the development script in package.json seems to be working:
"scripts": {
"test": "mocha shared/tests/*.spec.js --compilers js:babel-register",
"test:server": "cross-env NODE_ENV=test PORT=8080 MONGO_URL=mongodb://localhost:27017/mern-test mocha --compilers js:babel-register --recursive server/tests/**/*.spec.js",
"start": "cross-env NODE_ENV=development nodemon index.js",
"start:prod": "cross-env NODE_ENV=production node index.js",
"bs": "npm run clean && npm run build && npm run start:prod",
"minify": "cleancss -o static/css/app.min.css static/css/app.css",
"build": "cross-env NODE_ENV=production webpack --config webpack.config.prod.js && npm run minify",
"clean": "rimraf static/dist",
"slate": "rimraf node_modules && npm install",
"lint": "eslint client server shared"
}
So how can I get this to work?
EDIT:
"devDependencies": {
"babel-eslint": "^5.0.0-beta6",
"babel-loader": "^6.2.1",
"babel-plugin-react-transform": "^2.0.0",
"babel-plugin-transform-react-constant-elements": "6.5.0",
"babel-plugin-transform-react-inline-elements": "6.6.5",
"babel-plugin-transform-react-remove-prop-types": "0.2.4",
"babel-polyfill": "^6.3.14",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-react-hmre": "^1.1.0",
"babel-register": "^6.7.2",
"chai": "^3.5.0",
"clean-css": "^3.4.9",
"cross-env": "^1.0.7",
"css-loader": "^0.23.1",
"css-modules-require-hook": "^2.1.0",
"deep-freeze": "0.0.1",
"eslint": "^1.10.3",
"eslint-config-airbnb": "^4.0.0",
"eslint-plugin-react": "^3.16.1",
"expect": "^1.13.4",
"expect-jsx": "^2.2.2",
"extract-text-webpack-plugin": "^1.0.1",
"mocha": "^2.4.5",
"nodemon": "^1.9.1",
"pre-commit": "^1.1.2",
"react-addons-test-utils": "^0.14.7",
"react-transform-hmr": "^1.0.1",
"redux-devtools": "^3.1.1",
"redux-devtools-dock-monitor": "^1.1.0",
"redux-devtools-log-monitor": "^1.0.4",
"rimraf": "^2.5.1",
"style-loader": "^0.13.0",
"supertest": "^1.1.0",
"webpack": "^1.12.12",
"webpack-dev-middleware": "^1.5.1",
"webpack-hot-middleware": "^2.6.4"
},
source to share
I wrote about it here: https://hashnode.com/post/deploying-mern-to-heroku-success-cio7sc1py013nis531rg3lfmz
The reason is that herokou is not aware of your tree devDependencies
, only your normal one dependencies
gets the click.
A quick fix is ββto copy all yours devDependencies
to yourdependencies
You will also have to remove the .gitignore
following from the file :
public/*
static/dist
static/css/app.min.css
There are a few other steps outlined in the article, but these are the main reasons why it won't work without any additional configuration.
source to share