Search code examples
node.jsreactjsherokuwebpackredux

React/Node app deployed to heroku shows a blank screen


I am trying for the first time ever to deploy my app to Heroku. I am using create-react-app, redux, with node/mongodb on the backend. When I go to my app via heroku open I am greeted with a blank screen. When I view source my react index.html template is in place, but when I click any of the assets like manifest.json, or the main.js file, they're completely blank. All of my backend API is working (I went to my google oauth route and was properly greeted with the google sign in screen) but none of the views are rendering.

I checked my build directory and all the build seems like it worked properly from what my rookie eyes could see. I checked my Heroku logs and have no errors whatsoever.

I know this is vague, but is there anything I should check? Anything I can share here to help get some direction? I apologize for not sharing more on my first draft of this post but I honestly don't know what to share to give clarity. I am happy to edit and add code. This is my first "fullstack" deployment so I am completely brand new to this and 3 hours of troubleshooting and googling hasn't* helped me solve this. The app is running just fine in development on my laptop, so I am guessing it has something to do with my create-react-app build.

This is the link to my application on Heroku. https://desolate-stream-86031.herokuapp.com/


Solution

  • The JS file isn't empty its just that the server is returning index.html no matter what you request. I don't know what server you're using but it seems its configured to serve a single page app (always index.html) but not static assets (JS, CSS, etc).

    EDIT: I could tell from the X-Powered-By header in the request for your JS file that you're using the Express framework to serve your static assets. You can see the docs at https://expressjs.com/en/starter/static-files.html to see how you can configure Express to properly serve static assets. You need to specify a path of where to serve your static assets, e.g. /static to be yourdomain.com/static, and the path of where the static files actually exist on the system. I assume create-react-app defaults to look for static assets at /static.