![]() ![]() (Which is nice □ ) Instead – ejected or not – we just have to specify “homepage” in our package.json: If you’re using create-react-app, you won’t have to deal with Webpack configs. ![]() I’ll tell you the secret sauce: It’s called “homepage” and it lives in your package.json Specifiying “homepage” (Except you’ve ejected, but that’s not relevant for now) If you created your React app with create-react-app, you probably can’t access your webpack configuration. If set correctly, it will base links like above from that URL – and your application will load like expected. There is the publicPath setting in your Webpack configuration to tell an app what its root path is. Your app does not know it’s own location to build absolute URLs. 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: Īnd that’s the root of our problem. In my case, I put them into a sub-directory react-app, so the correct URL is … ![]() Now let’s have a look where the files actually live. Loading failed for the with source …Ī 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. ![]() To find out what’s wrong, it’s always a good idea to open your browser’s console and check it for error messages. For example, a critical error somewhere in your JavaScript, who knows? The reason for this could be practically everything. But as you visit the site – instead of your freshly deployed app – you see … nothing. 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. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |