Deploy React-Redux webpack on heroku - reactjs

Question

Well, Im having a big problem, I have a front-end only react that send request to a ruby on rails api, we use redux, babel and webpack. My problem is, I cant make this react project work on Heroku.
This is a 503 response error from heroku.
Package.json:
{
"name": "real-networking-ui",
"version": "1.0.0",
"description": "Real Netoworking UI",
"main": "index.js",
"scripts": {
"start": "node -r babel-register ./node_modules/webpack-dev-server/bin/webpack-dev-server --config ./webpack.config.dev.js --progress --profile --colors",
"build": "node -r babel-register ./node_modules/webpack/bin/webpack --config ./webpack.config.prod --progress --profile --colors",
"lint": "eslint app test *.js"
},
"engines": {
"node": "6.6.0"
},
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^6.3.6",
"babel-core": "^6.10.4",
"babel-eslint": "^6.1.0",
"babel-loader": "^6.2.4",
"babel-plugin-dev-expression": "^0.2.1",
"babel-plugin-lodash": "^3.2.11",
"babel-plugin-react-transform": "^2.0.2",
"babel-plugin-transform-remove-console": "^6.8.0",
"babel-plugin-transform-remove-debugger": "^6.8.0",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.11.1",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-react-optimize": "^1.0.1",
"babel-preset-stage-0": "^6.5.0",
"babel-register": "^6.9.0",
"classnames": "^2.2.5",
"css-loader": "^0.23.1",
"eslint": "^2.13.1",
"eslint-config-airbnb": "^9.0.1",
"eslint-import-resolver-webpack": "^0.3.2",
"eslint-loader": "^1.6.1",
"eslint-plugin-import": "^1.10.0",
"eslint-plugin-jsx-a11y": "^1.5.3",
"eslint-plugin-react": "^5.2.2",
"extract-text-webpack-plugin": "^1.0.1",
"html-webpack-plugin": "^2.21.0",
"json-loader": "^0.5.4",
"postcss-css-variables": "^0.5.1",
"postcss-loader": "^0.9.1",
"postcss-mixins": "^5.0.0",
"postcss-nested": "^1.0.0",
"postcss-partial-import": "^1.3.0",
"react-transform-hmr": "^1.0.4",
"style-loader": "^0.13.1",
"svg-react": "^1.0.9",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1"
},
"dependencies": {
"axios": "^0.15.3",
"core-js": "^2.4.1",
"css-loader": "^0.23.1",
"lodash": "^4.17.2",
"moment": "^2.17.1",
"node-sass": "^3.13.0",
"react": "^15.1.0",
"react-dom": "^15.1.0",
"react-hot-loader": "^3.0.0-beta.6",
"react-maskedinput": "^3.3.1",
"react-modal": "^1.6.4",
"react-redux": "^4.4.5",
"react-router": "^3.0.0",
"react-router-redux": "^4.0.5",
"react-select": "^1.0.0-rc.2",
"react-select-box": "^3.0.1",
"redux": "^3.5.2",
"redux-thunk": "^2.1.0",
"sass-loader": "^4.0.2",
"style-loader": "^0.13.1",
"svg-react": "^1.0.9",
"validator": "^6.2.0",
"whatwg-fetch": "^2.0.1"
},
"eslintConfig": {
"extends": "react-app"
},
"babel": {
"presets": [
"react-app"
]
}
}
webpack.config.base:
import ExtractTextPlugin from 'extract-text-webpack-plugin';
import HtmlWebpackPlugin from 'html-webpack-plugin';
export default {
entry: './app/app.js',
output: {
path: './app/App/dist',
filename: '/bundle.js',
},
module: {
loaders: [
{
test: /\.json$/,
loader: 'json',
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('css!sass'),
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('css!sass'),
},
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
{
test: /\.svg$/,
loader: 'babel?presets[]=es2015,presets[]=react!svg-react',
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: './app/App/index.html',
}),
new ExtractTextPlugin('/app/App/css/default.css', {
allChunks: true,
}),
],
};
webpack.config.dev:
import webpack from 'webpack';
import baseConfig from './webpack.config.base';
const config = {
...baseConfig,
debug: true,
devtool: 'cheap-module-eval-source-map',
plugins: [
...baseConfig.plugins,
new webpack.HotModuleReplacementPlugin(),
],
devServer: {
colors: true,
historyApiFallback: true,
inline: true,
hot: true,
},
};
export default config;
webpack.config.prod.js:
import webpack from 'webpack';
import baseConfig from './webpack.config.base';
const config = {
...baseConfig,
plugins: [
...baseConfig.plugins,
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production'),
},
}),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({
compressor: {
screw_ie8: true,
warnings: false,
},
}),
],
};
export default config;
Procfile:
web: npm start
If you need more information about that tell me that I edit it.
Thank you for the help.

Answer 1

The heroku default configuration is to cache the dependencies in node_modules and set production environment to true.
Caching node_modules prevents additional modules from getting installed.
Production Environment prevents devDependencies in package.json from getting installed.
Refer to this link to solve the above problems
Also, webpack-dev-server doesn't work in Heroku, so it's better to create a small web server (Personally I like Express server) to serve the dist folder and then deploy the app.
Additionally, If you are still facing the problem, try running heroku logs --tail and paste the logs here.

Answer 2

My take on this is the devDependencies should be re-installed under dependencies. Under similar circumstances I had the error screen when trying to deploy on Heroku. The devDependencies are ignored and whenever your code asks for them Heroku alarms.