How to fix the Whitescreen After a Static Deployment with create-react-app
Tags: webdev
Published: 2018-12-01 09:26:38

---
title: How to fix the Whitescreen After a Static Deployment with create-react-app
published: true
tags: Web Development
cover_image: https://i2.wp.com/www.andreasreiterer.at/wp-content/uploads/2018/11/andrew-guan-448009-unsplash.jpg
canonical_url: https://www.andreasreiterer.at/fix-whitescreen-static-react-app/
---

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._

The reason for this could be practically everything. For example, a critical error somewhere in your JavaScript, who knows?

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 ...`

A very common thing you might see there in a “white-screen-situation”, is that your app failed to load the JavaScript bundle – and that’s what we’re going to fix today.

![](https://i0.wp.com/www.andreasreiterer.at/wp-content/uploads/2018/11/mainjsnotfound.jpg?resize=660%2C84&ssl=1)

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…_

If you check the DOM of your _index.html_, you’ll see, that the JavaScript bundle’s links are absolute URLs – from the root of your application:

```
<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_

## Specifiying “homepage”

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:_

![](https://i1.wp.com/www.andreasreiterer.at/wp-content/uploads/2018/11/homepage_package_json.jpg?resize=660%2C90&ssl=1)

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](https://webpack.js.org/configuration/output/#output-publicpath))

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](https://dev.to/a_reiterer/how-to-fix-browserrouter-for-react-apps-on-apache-43jd-temp-slug-7791315) might be helpful for you.

## Wrapping up

The next time you get a white screen after deploying a React app, remember the steps you’ve learned today:

1. Check the browser’s console for errors
2. Does the app link to the wrong bundle?
3. Update the “homepage” setting in your _package.json_
4. Build your app again and put it on your web space
5. Success!



### Don't miss my next post!

Did you like this article? Sign up to my [newsletter](https://www.andreasreiterer.at/dev-newsletter/) and get my future blog posts delivered right into your inbox.

* * *

_Photo by [Andrew Guan](https://unsplash.com/photos/lTUyP3RaLpw?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on_ [_Unsplash_](https://unsplash.com/search/photos/white-screen?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)

The post [How to fix the Whitescreen After a Static Deployment with create-react-app](https://www.andreasreiterer.at/fix-whitescreen-static-react-app/) appeared first on [Andreas Reiterer](https://www.andreasreiterer.at).