MERN app deploying to heroku, a blank page

I’ve made a very simple MERN app, without a mongo database, by using create-react-app. When I deploy to heroku all I am presented with is a blank page. I have tried numerous things with no luck. The API is sending email correctly and the page title is correct, but all of the content is missing. Please take a look for me, this is my first deploy.

Here’s the code: https://github.com/samames/essae Here’s the deploy: https://protected-wave-21372.herokuapp.com/

Many thanks

–edit–

here are the logs:

2020-11-13T18:00:38.000000+00:00 app[api]: Build succeeded
2020-11-13T18:00:38.289382+00:00 heroku[web.1]: Stopping all processes with SIGTERM
2020-11-13T18:00:38.395329+00:00 heroku[web.1]: Process exited with status 143
2020-11-13T18:00:53.206813+00:00 heroku[web.1]: Starting process with command `node backend/index.js`
2020-11-13T18:00:56.521645+00:00 app[web.1]: app listening at http://localhost:9508
2020-11-13T18:00:57.608133+00:00 heroku[web.1]: State changed from starting to up
2020-11-13T18:01:03.750237+00:00 heroku[router]: at=info method=GET path="/" host=protected-wave-21372.herokuapp.com request_id=216189ff-cb13-4b39-8d8a-155df094c5b6 fwd="176.26.189.232" dyno=web.1 connect=1ms service=52ms status=200 bytes=2532 protocol=https
2020-11-13T18:01:03.902311+00:00 heroku[router]: at=info method=GET path="/static/js/main.2940f24a.chunk.js" host=protected-wave-21372.herokuapp.com request_id=34237762-907b-4211-b154-8ee408429549 fwd="176.26.189.232" dyno=web.1 connect=16ms service=11ms status=200 bytes=2532 protocol=https
2020-11-13T18:01:03.903848+00:00 heroku[router]: at=info method=GET path="/static/css/main.8c8b27cf.chunk.css" host=protected-wave-21372.herokuapp.com request_id=a1e4b2db-48b9-401c-9e4c-f0f4a3cfb84a fwd="176.26.189.232" dyno=web.1 connect=14ms service=13ms status=200 bytes=2532 protocol=https
2020-11-13T18:01:04.022038+00:00 heroku[router]: at=info method=GET path="/static/js/2.a8698f08.chunk.js" host=protected-wave-21372.herokuapp.com request_id=bc42d048-b7df-4d05-96d3-46524fb9dcd5 fwd="176.26.189.232" dyno=web.1 connect=0ms service=13ms status=200 bytes=2532 protocol=https
2020-11-13T18:01:04.238582+00:00 heroku[router]: at=info method=GET path="/favicon.ico" host=protected-wave-21372.herokuapp.com request_id=b777ec00-6257-42b8-9a14-17774d0d2475 fwd="176.26.189.232" dyno=web.1 connect=76ms service=32ms status=200 bytes=2532 protocol=https
2020-11-13T18:01:04.464416+00:00 heroku[router]: at=info method=GET path="/manifest.json" host=protected-wave-21372.herokuapp.com request_id=641614ee-8c0e-421f-8962-1049bb5e486c fwd="176.26.189.232" dyno=web.1 connect=54ms service=20ms status=200 bytes=2532 protocol=https
2020-11-13T18:01:12.011012+00:00 heroku[router]: at=info method=GET path="/" host=protected-wave-21372.herokuapp.com request_id=a2fedc75-f471-4db8-8c5f-185d3df4c2f7 fwd="176.26.189.232" dyno=web.1 connect=146ms service=69ms status=304 bytes=237 protocol=https
2020-11-13T18:01:12.321043+00:00 heroku[router]: at=info method=GET path="/static/css/main.8c8b27cf.chunk.css" host=protected-wave-21372.herokuapp.com request_id=36f0c3af-eb7d-4c42-8ed4-db9c55ccb444 fwd="176.26.189.232" dyno=web.1 connect=29ms service=23ms status=304 bytes=237 protocol=https
2020-11-13T18:01:12.331957+00:00 heroku[router]: at=info method=GET path="/static/js/main.2940f24a.chunk.js" host=protected-wave-21372.herokuapp.com request_id=9d008e30-fc1e-4e7b-a47e-40871e1c9df2 fwd="176.26.189.232" dyno=web.1 connect=33ms service=30ms status=304 bytes=237 protocol=https
2020-11-13T18:01:12.334294+00:00 heroku[router]: at=info method=GET path="/static/js/2.a8698f08.chunk.js" host=protected-wave-21372.herokuapp.com request_id=1b957b00-06e5-4011-a3c5-a35a4309a27e fwd="176.26.189.232" dyno=web.1 connect=32ms service=26ms status=304 bytes=237 protocol=https
2020-11-13T18:01:12.494914+00:00 heroku[router]: at=info method=GET path="/manifest.json" host=protected-wave-21372.herokuapp.com request_id=722289d9-d546-48f1-9ae4-8b8c8ff1b6f3 fwd="176.26.189.232" dyno=web.1 connect=30ms service=20ms status=304 bytes=237 protocol=https
2020-11-13T18:01:12.496361+00:00 heroku[router]: at=info method=GET path="/favicon.ico" host=protected-wave-21372.herokuapp.com request_id=1d3a9073-1df4-4465-a57c-c6fbd20cf5cf fwd="176.26.189.232" dyno=web.1 connect=27ms service=22ms status=200 bytes=2532 protocol=https

Answer

The problem is quite simple – there is typo in static files path. Just change this line to app.use(express.static(path.join(__dirname, '../frontend/build')));. Without those missing .. express cannot find requested static files and it fallbacks to app.get('*', (req, res). In other words, your index.html file is returned instead of any static file.

Leave a Reply

Your email address will not be published. Required fields are marked *