1

I am trying to use react-native-web in my college project.

I've following steps here and successfully create a dev version of react-native-web app. I want to deploy my app onto Heroku, after searching many questions, I still can't run my app on Heroku. It always crashed after 60 seconds after starting. 

2018-02-24T19:19:44.376383+00:00 heroku[web.1]: Starting process with command `./node_modules/.bin/webpack-dev-server --inline --port 28330`
2018-02-24T19:19:49.667640+00:00 app[web.1]: Project is running at [1m[34mhttp://localhost:28330/[39m[22m
2018-02-24T19:19:49.668544+00:00 app[web.1]: webpack output is served from [1m[34m/[39m[22m
2018-02-24T19:20:02.082843+00:00 app[web.1]: Hash: [1m070ba25084e72482b7f3[39m[22m
2018-02-24T19:20:02.082868+00:00 app[web.1]: Version: webpack [1m3.11.0[39m[22m
2018-02-24T19:20:02.082871+00:00 app[web.1]: Time: [1m11923[39m[22mms
2018-02-24T19:20:02.082873+00:00 app[web.1]:     [1mAsset[39m[22m     [1mSize[39m[22m  [1mChunks[39m[22m  [1m[39m[22m           [1m[39m[22m       [1mChunk Names[39m[22m
2018-02-24T19:20:02.082874+00:00 app[web.1]: [1m[33mbundle.js[39m[22m  [1m[33m2.35 MB[39m[22m       [1m0[39m[22m  [1m[32m[emitted][39m[22m  [1m[33m[big][39m[22m  main
2018-02-24T19:20:02.082877+00:00 app[web.1]:    [2] [1m./node_modules/react/index.js[39m[22m 190 bytes {[1m[33m0[39m[22m}[1m[32m [built][39m[22m
2018-02-24T19:20:02.082878+00:00 app[web.1]:   [65] [1m./node_modules/react-native-web/dist/index.js[39m[22m 12.9 kB {[1m[33m0[39m[22m}[1m[32m [built][39m[22m
2018-02-24T19:20:02.082880+00:00 app[web.1]:  [122] [1mmulti (webpack)-dev-server/client?http://localhost:28330 ./index.web.js[39m[22m 40 bytes {[1m[33m0[39m[22m}[1m[32m [built][39m[22m
2018-02-24T19:20:02.082882+00:00 app[web.1]:  [123] [1m(webpack)-dev-server/client?http://localhost:28330[39m[22m 7.91 kB {[1m[33m0[39m[22m}[1m[32m [built][39m[22m
2018-02-24T19:20:02.082884+00:00 app[web.1]:  [124] [1m./node_modules/url/url.js[39m[22m 23.3 kB {[1m[33m0[39m[22m}[1m[32m [built][39m[22m
2018-02-24T19:20:02.082885+00:00 app[web.1]:  [131] [1m./node_modules/strip-ansi/index.js[39m[22m 161 bytes {[1m[33m0[39m[22m}[1m[32m [built][39m[22m
2018-02-24T19:20:02.082887+00:00 app[web.1]:  [133] [1m./node_modules/loglevel/lib/loglevel.js[39m[22m 7.86 kB {[1m[33m0[39m[22m}[1m[32m [built][39m[22m
2018-02-24T19:20:02.082889+00:00 app[web.1]:  [134] [1m(webpack)-dev-server/client/socket.js[39m[22m 1.08 kB {[1m[33m0[39m[22m}[1m[32m [built][39m[22m
2018-02-24T19:20:02.082890+00:00 app[web.1]:  [136] [1m(webpack)-dev-server/client/overlay.js[39m[22m 3.67 kB {[1m[33m0[39m[22m}[1m[32m [built][39m[22m
2018-02-24T19:20:02.082892+00:00 app[web.1]:  [141] [1m(webpack)/hot nonrecursive ^\.\/log$[39m[22m 170 bytes {[1m[33m0[39m[22m}[1m[32m [built][39m[22m
2018-02-24T19:20:02.082893+00:00 app[web.1]:  [143] [1m(webpack)/hot/emitter.js[39m[22m 77 bytes {[1m[33m0[39m[22m}[1m[32m [built][39m[22m
2018-02-24T19:20:02.082895+00:00 app[web.1]:  [145] [1m./index.web.js[39m[22m 380 bytes {[1m[33m0[39m[22m}[1m[32m [built][39m[22m
2018-02-24T19:20:02.082897+00:00 app[web.1]:  [243] [1m./node_modules/react-native-web/dist/exports/Vibration/index.js[39m[22m 796 bytes {[1m[33m0[39m[22m}[1m[32m [built][39m[22m
2018-02-24T19:20:02.082899+00:00 app[web.1]:  [283] [1m./node_modules/react-native-web/dist/exports/VirtualizedList/index.js[39m[22m 327 bytes {[1m[33m0[39m[22m}[1m[32m [built][39m[22m
2018-02-24T19:20:02.082901+00:00 app[web.1]:  [285] [1m./App.js[39m[22m 2.53 kB {[1m[33m0[39m[22m}[1m[32m [built][39m[22m
2018-02-24T19:20:02.082903+00:00 app[web.1]:     + 271 hidden modules
2018-02-24T19:20:02.082911+00:00 app[web.1]: webpack: Compiled successfully.
2018-02-24T19:20:21.276101+00:00 heroku[web.1]: Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch
2018-02-24T19:20:21.276101+00:00 heroku[web.1]: Stopping process with SIGKILL
2018-02-24T19:20:21.364850+00:00 heroku[web.1]: Process exited with status 137
2018-02-24T19:20:44.673361+00:00 heroku[web.1]: Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch
2018-02-24T19:20:44.673652+00:00 heroku[web.1]: Stopping process with SIGKILL
2018-02-24T19:20:44.812657+00:00 heroku[web.1]: Process exited with status 137
2018-02-24T19:20:44.892098+00:00 heroku[web.1]: State changed from starting to crashed

Is there anyone who can show me the steps to deploy my react-native-web into Heroku?

Thanks.

Syahrul Ardiansyah
  • 43
  • 1
  • 8
  • Did you check [this question?](https://stackoverflow.com/questions/15693192/heroku-node-js-error-web-process-failed-to-bind-to-port-within-60-seconds-of) – bennygenel Feb 24 '18 at 19:40
  • I did, but I don't know where to put the code and how to run the code – Syahrul Ardiansyah Feb 24 '18 at 19:42
  • You might need to create a server.js file with express framework or similar and serve your app with that and set the port to correct value. I'm not sure how because I have never used it but [this](https://stackoverflow.com/questions/33272967/how-to-make-the-webpack-dev-server-run-on-port-80-and-on-0-0-0-0-to-make-it-publ) and [this](https://github.com/StephenGrider/ReduxSimpleStarter/issues/57#issuecomment-306110573) posts might lead you somewhere – bennygenel Feb 24 '18 at 19:54
  • for reactjs there is a buildpack for heroku https://github.com/mars/create-react-app-buildpack , not sure if any for react native exists. – Fawaz Mar 03 '18 at 09:48

1 Answers1

0

You're trying to run the webpack-dev-server in a production environment, which is not recommended.

You will need to:

  1. Setup a production webpack build script in npm/yarn so that your browser side code gets built (usually output to a 'build' or 'dist' directory). There should be instructions for on Heroku (see here) so it knows which script to run to build this on the server after the server checks out your master branch.
  2. Setup a minimal server script that is loaded via a 'start' script. Try ExpressJs for this. Note that Heroku creates a PORT environment variable (process.env.PORT) that contains the assigned HTTP port to use for the HTTP server (pass it to express.listen). Heroku have a minimal Express server example to look at.
Dave Meehan
  • 3,133
  • 1
  • 17
  • 24