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.[![enter image description here](https://i.stack.imgur.com/k8qmc.png)](https://i.stack.imgur.com/k8qmc.png)

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.