Andrew Jessen-Tyler
Reputation: 29
Did React Deployments Break?
So, I was having issues with deploying my own react application. No matter what host I went to, any amount of configuration I did, it would always crash when the host tried to start the app. This never happened locally with npm start.
So I decided to test something. I did npx create-react-app, and tried to deploy the default template created. And that still caused the same issues. Even Heroku says for react apps you don't need to do anything special to launch them. But the template wasn't even working there.
Anyone know what the problem is? Are other people able to recreate the problem?
Logs below
2020-03-30T22:21:58.168608+00:00 app[api]: Initial release by user [email protected]
2020-03-30T22:21:58.168608+00:00 app[api]: Release v1 created by user [email protected]
2020-03-30T22:21:58.347629+00:00 app[api]: Release v2 created by user [email protected]
2020-03-30T22:21:58.347629+00:00 app[api]: Enable Logplex by user [email protected]
2020-03-30T22:26:43.000000+00:00 app[api]: Build started by user [email protected]
2020-03-30T22:28:16.040569+00:00 app[api]: Release v3 created by user [email protected]
2020-03-30T22:28:16.040569+00:00 app[api]: Deploy 44c5aa91 by user [email protected]
2020-03-30T22:28:16.068600+00:00 app[api]: Scaled to web@1:Free by user [email protected]
2020-03-30T22:28:23.000000+00:00 app[api]: Build succeeded
2020-03-30T22:28:24.279073+00:00 heroku[web.1]: Starting process with command `npm start`
2020-03-30T22:28:26.822957+00:00 app[web.1]:
2020-03-30T22:28:26.822973+00:00 app[web.1]: > [email protected] start /app
2020-03-30T22:28:26.822973+00:00 app[web.1]: > react-scripts start
2020-03-30T22:28:26.822973+00:00 app[web.1]:
2020-03-30T22:28:29.038913+00:00 app[web.1]: ℹ ｢wds｣: Project is running at http://172.16.181.194/
2020-03-30T22:28:29.039243+00:00 app[web.1]: ℹ ｢wds｣: webpack output is served from
2020-03-30T22:28:29.039318+00:00 app[web.1]: ℹ ｢wds｣: Content not from webpack is served from /app/public
2020-03-30T22:28:29.039385+00:00 app[web.1]: ℹ ｢wds｣: 404s will fallback to /
2020-03-30T22:28:29.039552+00:00 app[web.1]: Starting the development server...
2020-03-30T22:28:29.039553+00:00 app[web.1]:
2020-03-30T22:28:29.135017+00:00 heroku[web.1]: State changed from starting to crashed
2020-03-30T22:28:29.140081+00:00 heroku[web.1]: State changed from crashed to starting
2020-03-30T22:28:29.120640+00:00 heroku[web.1]: Process exited with status 0
2020-03-30T22:28:40.542948+00:00 heroku[web.1]: Starting process with command `npm start`
2020-03-30T22:28:44.192508+00:00 app[web.1]:
2020-03-30T22:28:44.192577+00:00 app[web.1]: > [email protected] start /app
2020-03-30T22:28:44.192586+00:00 app[web.1]: > react-scripts start
2020-03-30T22:28:44.192587+00:00 app[web.1]:
2020-03-30T22:28:48.250771+00:00 app[web.1]: ℹ ｢wds｣: Project is running at http://172.18.157.142/
2020-03-30T22:28:48.251237+00:00 app[web.1]: ℹ ｢wds｣: webpack output is served from
2020-03-30T22:28:48.251410+00:00 app[web.1]: ℹ ｢wds｣: Content not from webpack is served from /app/public
2020-03-30T22:28:48.251571+00:00 app[web.1]: ℹ ｢wds｣: 404s will fallback to /
2020-03-30T22:28:48.251836+00:00 app[web.1]: Starting the development server...
2020-03-30T22:28:48.251837+00:00 app[web.1]:
2020-03-30T22:28:48.457330+00:00 heroku[web.1]: State changed from starting to crashed
2020-03-30T22:28:48.438730+00:00 heroku[web.1]: Process exited with status 0
2020-03-30T22:29:54.647373+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=www-ajessen-com.herokuapp.com request_id=73b57bdf-b013-48a9-b12e-99876536b11a fwd="76.25.173.6" dyno= connect= service= status=503 bytes= protocol=https
2020-03-30T22:29:55.398422+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=www-ajessen-com.herokuapp.com request_id=2ecfa71e-b4e6-40b5-8cf3-52a443dc6627 fwd="76.25.173.6" dyno= connect= service= status=503 bytes= protocol=https
2020-03-30T22:35:57.000000+00:00 app[api]: Build started by user [email protected]
2020-03-30T22:37:50.689086+00:00 app[api]: Deploy 3d808d7f by user [email protected]
2020-03-30T22:37:50.689086+00:00 app[api]: Release v4 created by user [email protected]
2020-03-30T22:37:51.091460+00:00 heroku[web.1]: State changed from crashed to starting
2020-03-30T22:37:57.000000+00:00 app[api]: Build succeeded
2020-03-30T22:37:58.499221+00:00 heroku[web.1]: Starting process with command `npm start`
2020-03-30T22:38:00.987943+00:00 app[web.1]:
2020-03-30T22:38:00.987955+00:00 app[web.1]: > [email protected] start /app
2020-03-30T22:38:00.987955+00:00 app[web.1]: > react-scripts start
2020-03-30T22:38:00.987955+00:00 app[web.1]:
2020-03-30T22:38:03.442018+00:00 app[web.1]: ℹ ｢wds｣: Project is running at http://172.18.162.234/
2020-03-30T22:38:03.442407+00:00 app[web.1]: ℹ ｢wds｣: webpack output is served from
2020-03-30T22:38:03.442503+00:00 app[web.1]: ℹ ｢wds｣: Content not from webpack is served from /app/public
2020-03-30T22:38:03.442557+00:00 app[web.1]: ℹ ｢wds｣: 404s will fallback to /
2020-03-30T22:38:03.442766+00:00 app[web.1]: Starting the development server...
2020-03-30T22:38:03.442768+00:00 app[web.1]:
2020-03-30T22:38:03.545947+00:00 heroku[web.1]: State changed from starting to crashed
2020-03-30T22:38:03.530597+00:00 heroku[web.1]: Process exited with status 0
2020-03-30T22:38:05.709421+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=www-ajessen-com.herokuapp.com request_id=8781040b-b024-442e-8701-4e9a1600f0dd fwd="76.25.173.6" dyno= connect= service= status=503 bytes= protocol=https
2020-03-30T22:38:06.358803+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=www-ajessen-com.herokuapp.com request_id=b03f3e41-68d5-4ca3-a2f8-1b6c8d05c623 fwd="76.25.173.6" dyno= connect= service= status=503 bytes= protocol=https
2020-03-30T22:39:36.446830+00:00 heroku[web.1]: State changed from crashed to starting
2020-03-30T22:39:45.325285+00:00 heroku[web.1]: Starting process with command `npm start`
2020-03-30T22:39:47.986187+00:00 app[web.1]:
2020-03-30T22:39:47.986204+00:00 app[web.1]: > [email protected] start /app
2020-03-30T22:39:47.986205+00:00 app[web.1]: > react-scripts start
2020-03-30T22:39:47.986205+00:00 app[web.1]:
2020-03-30T22:39:51.485064+00:00 app[web.1]: ℹ ｢wds｣: Project is running at http://172.17.252.142/
2020-03-30T22:39:51.485781+00:00 app[web.1]: ℹ ｢wds｣: webpack output is served from
2020-03-30T22:39:51.485949+00:00 app[web.1]: ℹ ｢wds｣: Content not from webpack is served from /app/public
2020-03-30T22:39:51.486058+00:00 app[web.1]: ℹ ｢wds｣: 404s will fallback to /
2020-03-30T22:39:51.486334+00:00 app[web.1]: Starting the development server...
2020-03-30T22:39:51.486336+00:00 app[web.1]:
2020-03-30T22:39:51.613503+00:00 heroku[web.1]: State changed from starting to crashed
2020-03-30T22:39:51.596854+00:00 heroku[web.1]: Process exited with status 0
2020-03-30T23:02:43.508156+00:00 heroku[web.1]: State changed from crashed to starting
2020-03-30T23:02:51.548403+00:00 heroku[web.1]: Starting process with command `npm start`
2020-03-30T23:02:54.042798+00:00 app[web.1]:
2020-03-30T23:02:54.042819+00:00 app[web.1]: > [email protected] start /app
2020-03-30T23:02:54.042820+00:00 app[web.1]: > react-scripts start
2020-03-30T23:02:54.042821+00:00 app[web.1]:
2020-03-30T23:02:57.394552+00:00 app[web.1]: ℹ ｢wds｣: Project is running at http://172.18.49.2/
2020-03-30T23:02:57.395065+00:00 app[web.1]: ℹ ｢wds｣: webpack output is served from
2020-03-30T23:02:57.395180+00:00 app[web.1]: ℹ ｢wds｣: Content not from webpack is served from /app/public
2020-03-30T23:02:57.395271+00:00 app[web.1]: ℹ ｢wds｣: 404s will fallback to /
2020-03-30T23:02:57.395508+00:00 app[web.1]: Starting the development server...
2020-03-30T23:02:57.395509+00:00 app[web.1]:
2020-03-30T23:02:57.512012+00:00 heroku[web.1]: State changed from starting to crashed
2020-03-30T23:02:57.493490+00:00 heroku[web.1]: Process exited with status 0
Upvotes: 0
Views: 128
Answers (1)
Arun Kumar Mohan
Reputation: 11915
Looks like Heroku is trying to run the development build on Production (it runs npm start -- react-scripts start). Before deploying to Heroku, you should either build your code using react-scripts build and have your own server (Node server, for example) render the public/index.html file for every request as done here or use create-react-app buildpack to let the buildpack do it for you using the Nginx web server.
I recommend the latter.
heroku buildpacks:set https://github.com/mars/create-react-app-buildpack.git
git push heroku master
For more info, check out Deploying React with Zero Configuration.
Hope this helps.
Upvotes: 1
Related Questions
- Why failed to deploy a react app on Heroku
- Heroku Nodejs - React error deploying app
- Heroku deployment issues with create-react-app
- Reactjs deployement on Heroku App crashed
- React app crashed with Heroku after deployment
- React app working well locally but fails after deployment on Heroku
- Nodejs not deploying on heroku - node-pre-gyp install --fallback-to-build
- Crashed on heroku
- Heroku & React Deployment Successful with Application error
- React app crashes on Heroku after using npm install