It’s one of the most annoying situations after deploying a static React app: After all that work, you finally deployed your app for production. But as you visit the site – instead of your freshly deployed app – you see … nothing.
A blank, white, screen.
To find out what’s wrong, it’s always a good idea to open your browser’s console and check it for error messages.
Loading failed for the <script> with source …
Now let’s have a look where the files actually live. In my case, I put them into a sub-directory react-app, so the correct URL is https://www.andreasreiterer.at/react-app/static/js…
<script src="/static/js/1.3aec9dfa.chunk.js"></script> <script src="/static/js/main.72f93e60.chunk.js"></script>
And that’s the root of our problem. Your app does not know it’s own location to build absolute URLs.
Webpack’s publicPath Setting
There is the
publicPath setting in your Webpack configuration to tell an app what its root path is. In our example, that would be https://www.andreasreiterer.at/react-app/
If set correctly, it will base links like above from that URL – and your application will load like expected.
If you created your React app with create-react-app, you probably can’t access your webpack configuration. (Except you’ve ejected, but that’s not relevant for now)
So where do we put that information?
I’ll tell you the secret sauce: It’s called “homepage” and it lives in your package.json
If you’re using create-react-app, you won’t have to deal with Webpack configs. (Which is nice 😛 ) Instead – ejected or not – we just have to specify “homepage” in our package.json:
The way how create-react-app has it’s webpack configuration set up, this will replace the
publicPath with the correct base URL for your app. (If you want to know more about the
publicPath setting, have a look at the Webpack documentation)
Now that we told your app it’s base URL, run
npm run build again and copy the app to your web space to find your app up and running.
Note: If you experience routing-issues with
react-router on your static deployment, this article might be helpful for you.
The next time you get a white screen after deploying a React app, remember the steps you’ve learned today:
- Check the browser’s console for errors
- Does the app link to the wrong bundle?
- Update the “homepage” setting in your package.json
- Build your app again and put it on your web space