Why won't React production build run on the browser?

user_733417 0
Viewed 95939

I'm trying to build my react app using react's build tool. When I try to "npm start", the app works fine.

npm start

On http://localhost:3000 => I can access the application.

enter image description here

But when I build the application and try to access "index.html" file on the build folder, it doesn't work and I encounter with a white blank screen.

npm run build

http://myreact-app/build/index.html => White blank screen.

This is the build folder which has been created after run npm run build.

enter image description here

And this is the index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="/manifest.json">
    <link rel="shortcut icon" href="/favicon.ico">
    <title>React App</title>
    <link href="/static/css/main.9a0fe4f1.css" rel="stylesheet">
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript> 
    <div id="root"></div>
    <script type="text/javascript" src="/static/js/main.46d8cd76.js"></script>
  </body>
</html>

Am I doing something wrong? Can't I access the built index.html file on my apache web server?

reactjs
8 Answers

To fix this problem go to your build folder then you will see manifest.json file, open it and you will see your manifest.json have:

"start_url": ".",

change it to

"start_url": "/",

there is alternative way to fix the problem:

before your react project build go to your package.json file and specify homepage property with . value or maybe with your site base url, see example:

{
   ....
   "homepage": ".",
   ......
}
user_23766940

you should try use the serve package here to run single page app.

  • npm install -g serve to install globally
  • serve help to see help texts
  • serve --single build to serve single page app. I server will be started from which you can access your react app
user_24972640

If nothing of above works. Maybe the problem is that you are using react-router-dom and the routes needs a special compilation generating individual htmls for each page that exists in your router config.

Ref: I'm using create-react-app and I need to open build/index.html in browser directly without a server

In summary you need to use <HashRouter> instead <Router> and a <Switch> wrapper to your routes. For example:

<Switch>
  <Route exact path='/' component={WelcomePage} />
  <Route exact path='/game' component={GamePage} />
</Switch>

Consider that your routes will change to:

http://localhost:3000/#/ -> Root page
http://localhost:3000/#/game -> Other page
user_29077510

You need to install local server plugin/extenstion.

If you are vscode user then search live server extension and install it. Then there will be "Go live" option in bottom of your editor.

For other editor user (atom/sublime) search for live server plugins.

user_58300100

Sometimes the reason that the content is not served is because the command of "serve -s" was executed from outside of the build directory. The correct way is to go into the build directory then execute "serve -s" from therein.

user_142058130

I had an index.php in the webroot which prevented my app from running index.html.

user_6679030
Related