title: "Web process failed to bind to $PORT within 60 seconds of launch" when deploying Webpack App to Heroku
body: <p>I am trying to deploy my Webpack application to Heroku. I am using 'npm run dev' as the command in my Procfile.
  I have set </p>
  
  <pre><code>DEFAULT_PORT = process.env.port || 8080 
  </code></pre>
  
  <p>in webpack-dev-server.js
  Heroku runs my app, but it crashes saying:</p>
  
  <pre><code>Web process failed to bind to $PORT within 60 seconds of launch
  </code></pre>
  
  <p>You can see my logs and .json file below. I am quite confused.</p>
  
  <pre><code>2017-12-12T22:53:21.995212+00:00 app[web.1]:     + 41 hidden modules
  2017-12-12T22:53:21.995212+00:00 app[web.1]: Child html-webpack-plugin for "index.html":
  2017-12-12T22:53:21.995216+00:00 app[web.1]:        [2] (webpack)/buildin/global.js 509 bytes {0} [built]
  2017-12-12T22:53:21.995213+00:00 app[web.1]:      1 asset
  2017-12-12T22:53:21.995214+00:00 app[web.1]:        [0] ./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html 1.4 kB {0} [built]
  2017-12-12T22:53:21.995215+00:00 app[web.1]:        [1] ./node_modules/lodash/lodash.js 540 kB {0} [built]
  2017-12-12T22:53:21.995219+00:00 app[web.1]:        [0] ./node_modules/css-loader!./src/css/style.css 830 bytes {0} [built]
  2017-12-12T22:53:21.995216+00:00 app[web.1]:        [3] (webpack)/buildin/module.js 517 bytes {0} [built]
  2017-12-12T22:53:21.995219+00:00 app[web.1]:        [1] ./node_modules/css-loader/lib/css-base.js 2.26 kB {0} [built]
  2017-12-12T22:53:21.995224+00:00 app[web.1]: webpack: Compiled successfully.
  2017-12-12T22:53:21.995218+00:00 app[web.1]: Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js!src/css/style.css:
  2017-12-12T22:54:13.856117+00:00 heroku[web.1]: Error R10 (Boot timeout) -&gt; Web process failed to bind to $PORT within 60 seconds of launch
  2017-12-12T22:54:13.856117+00:00 heroku[web.1]: Stopping process with SIGKILL
  2017-12-12T22:54:13.973488+00:00 heroku[web.1]: Process exited with status 137
  2017-12-12T22:54:13.988182+00:00 heroku[web.1]: State changed from starting to crashed
  2017-12-12T22:54:13.990564+00:00 heroku[web.1]: State changed from crashed to starting
  2017-12-12T22:54:18.192737+00:00 heroku[web.1]: Starting process with command `npm run dev`
  2017-12-12T22:54:27.691608+00:00 app[web.1]: Project is running at http://localhost:59703/
  2017-12-12T22:54:27.691900+00:00 app[web.1]: webpack output is served from /
  2017-12-12T22:54:30.791009+00:00 app[web.1]: Hash: 40cb4c337991c9ef0121
  2017-12-12T22:54:30.791029+00:00 app[web.1]: Version: webpack 3.10.0
  2017-12-12T22:54:30.791031+00:00 app[web.1]: Time: 3102ms
  2017-12-12T22:54:30.791032+00:00 app[web.1]:            Asset       Size  Chunks                    Chunk Names
  2017-12-12T22:54:30.791033+00:00 app[web.1]:    app.bundle.js    1.05 MB       0  [emitted]  [big]  main
  2017-12-12T22:54:30.791034+00:00 app[web.1]: style.bundle.css  617 bytes       0  [emitted]         main
  2017-12-12T22:54:30.791035+00:00 app[web.1]:       index.html    1.14 kB          [emitted]         
  2017-12-12T22:54:30.791035+00:00 app[web.1]:    [2] ./node_modules/react/index.js 190 bytes {0} [built]
  2017-12-12T22:54:30.791036+00:00 app[web.1]:   [10] ./node_modules/react-dom/index.js 1.36 kB {0} [built]
  2017-12-12T22:54:30.791037+00:00 app[web.1]:   [17] multi (webpack)-dev-server/client?http://localhost:59703 ./src/js/app.jsx 40 bytes {0} [built]
  2017-12-12T22:54:30.791038+00:00 app[web.1]:   [18] (webpack)-dev-server/client?http://localhost:59703 7.95 kB {0} [built]
  2017-12-12T22:54:30.791038+00:00 app[web.1]:   [19] ./node_modules/url/url.js 23.3 kB {0} [built]
  2017-12-12T22:54:30.791039+00:00 app[web.1]:   [26] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]
  2017-12-12T22:54:30.791039+00:00 app[web.1]:   [28] ./node_modules/loglevel/lib/loglevel.js 7.86 kB {0} [built]
  2017-12-12T22:54:30.791040+00:00 app[web.1]:   [29] (webpack)-dev-server/client/socket.js 1.05 kB {0} [built]
  2017-12-12T22:54:30.791041+00:00 app[web.1]:   [31] (webpack)-dev-server/client/overlay.js 3.73 kB {0} [built]
  2017-12-12T22:54:30.791042+00:00 app[web.1]:   [36] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
  2017-12-12T22:54:30.791043+00:00 app[web.1]:   [37] (webpack)/hot/log.js 1.04 kB {0} [optional] [built]
  2017-12-12T22:54:30.791043+00:00 app[web.1]:   [38] (webpack)/hot/emitter.js 77 bytes {0} [built]
  2017-12-12T22:54:30.791044+00:00 app[web.1]:   [40] ./src/js/app.jsx 451 bytes {0} [built]
  2017-12-12T22:54:30.791045+00:00 app[web.1]:   [52] ./src/components/App.jsx 3.48 kB {0} [built]
  2017-12-12T22:54:30.791046+00:00 app[web.1]:   [54] ./src/css/style.css 41 bytes {0} [built]
  2017-12-12T22:54:30.791047+00:00 app[web.1]:     + 41 hidden modules
  2017-12-12T22:54:30.791047+00:00 app[web.1]: Child html-webpack-plugin for "index.html":
  2017-12-12T22:54:30.791048+00:00 app[web.1]:      1 asset
  2017-12-12T22:54:30.791049+00:00 app[web.1]:        [0] ./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html 1.4 kB {0} [built]
  2017-12-12T22:54:30.791050+00:00 app[web.1]:        [1] ./node_modules/lodash/lodash.js 540 kB {0} [built]
  2017-12-12T22:54:30.791050+00:00 app[web.1]:        [2] (webpack)/buildin/global.js 509 bytes {0} [built]
  2017-12-12T22:54:30.791051+00:00 app[web.1]:        [3] (webpack)/buildin/module.js 517 bytes {0} [built]
  2017-12-12T22:54:30.791052+00:00 app[web.1]: Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js!src/css/style.css:
  2017-12-12T22:54:30.791053+00:00 app[web.1]:        [0] ./node_modules/css-loader!./src/css/style.css 830 bytes {0} [built]
  2017-12-12T22:54:30.791054+00:00 app[web.1]:        [1] ./node_modules/css-loader/lib/css-base.js 2.26 kB {0} [built]
  2017-12-12T22:54:30.791084+00:00 app[web.1]: webpack: Compiled successfully.
  2017-12-12T22:54:26.379844+00:00 app[web.1]: 
  2017-12-12T22:54:26.379885+00:00 app[web.1]: &gt; rapperapplication@1.0.0 dev /app
  2017-12-12T22:54:26.379886+00:00 app[web.1]: &gt; webpack-dev-server
  2017-12-12T22:54:26.379887+00:00 app[web.1]: 
  2017-12-12T22:54:49.900296+00:00 heroku[router]: at=error code=H20 desc="App boot timeout" method=GET path="/" host=rapperapplication.herokuapp.com request_id=3ab024a0-4ec0-4e90-9508-a701cf0c596e fwd="73.236.18.255" dyno= connect= service= status=503 bytes= protocol=https
  2017-12-12T22:55:18.669392+00:00 heroku[web.1]: Process exited with status 137
  2017-12-12T22:55:18.680949+00:00 heroku[web.1]: State changed from starting to crashed
  2017-12-12T22:55:18.551666+00:00 heroku[web.1]: Error R10 (Boot timeout) -&gt; Web process failed to bind to $PORT within 60 seconds of launch
  2017-12-12T22:55:18.551666+00:00 heroku[web.1]: Stopping process with SIGKILL
  2017-12-12T22:55:21.000471+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=rapperapplication.herokuapp.com request_id=bfda82f0-f194-47a1-ac40-11daddf4b9a8 fwd="73.236.18.255" dyno= connect= service= status=503 bytes= protocol=https
  2017-12-12T22:55:21.791196+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=rapperapplication.herokuapp.com request_id=2f3821a1-f17b-486c-83bb-084a413b6298 fwd="73.236.18.255" dyno= connect= service= status=503 bytes= protocol=https
  </code></pre>
  
  <p>Here is my .JSON file:</p>
  
  <pre><code>        {
        "name": "rapperapplication",
        "version": "1.0.0",
        "description": "display information about rappers",
        "main": "app.js",
        "scripts": {
          "build": "webpack",
          "dev": "webpack-dev-server"
        },
        "keywords": [
          "rappers"
        ],
        "author": "Daniel Sigut",
        "license": "ISC",
        "devDependencies": {
          "babel-core": "^6.26.0",
          "babel-loader": "^7.1.2",
          "babel-preset-env": "^1.6.1",
          "babel-preset-react": "^6.24.1",
          "css-loader": "^0.28.7",
          "extract-text-webpack-plugin": "^3.0.2",
          "file-loader": "^1.1.5",
          "html-webpack-plugin": "^2.30.1",
          "webpack": "^3.10.0",
          "webpack-dev-server": "^2.9.7"
        },
        "dependencies": {
          "react": "^16.2.0",
          "react-dom": "^16.2.0",
          "react-router-dom": "^4.2.2"
        }
      }
  </code></pre>
  
  <p>And lastly, here is my app.jsx file:</p>
  
  <pre><code>import React from 'react';
  import { render } from 'react-dom';
  import App from '../components/App'
  import '../css/style.css';
  
  render((
    &lt;App /&gt;
  ), document.getElementById('app'));
  </code></pre>