3

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
harry young
  • 600
  • 1
  • 8
  • 24
  • Repush to Heroku and let is build again. Can't find anything wrong that is suppose to happen. Maybe you could provide the heroku logs. – Nano Adam Nov 13 '20 at 17:56
  • This might help you : https://stackoverflow.com/questions/55568697/blank-page-after-running-build-on-create-react-app – Harshana Nov 13 '20 at 17:58
  • i added the logs. – harry young Nov 13 '20 at 18:05
  • i added "homepage": ".", in the package.json and same issue :/ – harry young Nov 13 '20 at 18:11
  • From a very quick glance at the console, the problem is because your JS chunks are, for some reason, HTML (namely a copy of the entire page's source) rather than Javascript. It's not immediately obvious why this might be the case (although I will take a quick look at your github to see if I can spot any issues), but that's a starting point for debugging at least. – Robin Zigmond Nov 15 '20 at 19:50
  • I think the problem might be simply that you've got `/frontend/build` in your `.gitignore` file, which is where you've told Express to serve all your static assets from. Since I presume you're deploying to Heroku via Git (I don't know any other way to deploy to Heroku), this means that `build` folder, and therefore all the compiled JS files you need, simply aren't there on the server. Simple solution: don't ignore those files! – Robin Zigmond Nov 15 '20 at 19:56
  • You are required to post a [mcve] here, **within your question**, and [not a link](https://meta.stackoverflow.com/a/254430/162698) to any other site. – Rob Mar 15 '21 at 23:55
  • @Rob, can you tell me how? Since I was struggling with my deployment, I wanted to share the entire repository. Please tell me how I can make this question better as I don't want to lose reputation points. – harry young Mar 16 '21 at 00:29

1 Answers1

3

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.

sawim
  • 1,032
  • 8
  • 18