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

Question

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.

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.

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?

@Sulthan I've added. I am also trying to figure out it but it is the output of "npm run build". No error in the console — amone, Jun 05 '17 at 14:20
Does `main.js` contain only your code or does it also includes all dependencies? That should be trivial to check. — Sulthan, Jun 05 '17 at 14:21
In case this helps anyone... my problem was that my server wasn't allowing access to the static files requested by `index.html` — Lasf, Apr 09 '20 at 04:57

score 45 · Accepted Answer · edited Mar 08 '19 at 00:06

Probably you've not noticed yet but I don't think your html file is able to import css and script files correctly. When I look at your file structure, I see the everything about build is under the build folder. But in your html file, there are slashes ("/") before the file paths. That's why browser is looking for those files under the parent of the "build". Try to remove slashes.

<!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>
      <style></style>
      <link href="static/css/main.65027555.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.316f1156.js"></script>
    </body>
</html>

The network console in browser should be one of the first places to check anyway. The file loading error is probably there. — Sulthan, Jun 05 '17 at 15:40

score 44 · Answer 2 · edited Nov 01 '21 at 06:42

44

The above problem can be overcome if you add

"homepage":".",

in your package.json. This is not official but a good hack to follow.

https://github.com/facebookincubator/create-react-app/issues/1487

edited Nov 01 '21 at 06:42

Rifky Niyas

1,737
10
25

answered Dec 12 '17 at 12:59

Manas Gond

640
7
13

2

When linking some reference, you can post something useful like the most important part of the post, so your answer can be more valuable... – DaFois Dec 12 '17 at 13:12
1

Below is the source for above comment. May be it will help someone else. https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#serving-the-same-build-from-different-paths – Kodin Jun 16 '18 at 19:44
3

Adding the updated link here : https://facebook.github.io/create-react-app/docs/deployment#serving-the-same-build-from-different-paths – Naveen Kumar G C May 20 '19 at 13:13

score 25 · Answer 3 · answered Dec 01 '19 at 04:59

25

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": ".",
   ......
}

answered Dec 01 '19 at 04:59

TechnicalKeera

923
10
20

5

Adding `"homepage": "."` is what worked for me. I can see in the index.html file built it prefixed all the links with a '.' which was exactly the problem I was having, thank you! – James Webb Feb 21 '20 at 15:36
Can confirm. Changing start_url is not working. Changing homepage in package.json works for me. – Jim LK Yu May 18 '23 at 08:29

score 7 · Answer 4 · answered Oct 05 '20 at 01:45

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

I changed `BrowserRouter` to `HashRouter` and it worked! Thanks — mtkilic, Jul 18 '23 at 01:24

score 5 · Answer 5 · answered May 18 '18 at 08:25

5

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

answered May 18 '18 at 08:25

Isaac Sekamatte

5,500
1
34
40

can we use build directory to host the server? – Arvin Feb 24 '21 at 07:59

score 0 · Answer 6 · answered Jul 14 '18 at 06:48

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.

score 0 · Answer 7 · answered Dec 10 '20 at 01:16

0

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.

answered Dec 10 '20 at 01:16

R G

31
4

score 0 · Answer 8 · answered Feb 20 '21 at 08:31

0

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

answered Feb 20 '21 at 08:31

Steve

2,066
13
60
115

score 0 · Answer 9 · answered Jan 06 '23 at 13:24

0

I use HashRouter instead BrowserRouter & also need to add /# infront of every url like this:

href={`/#/blogs/${slug}`}

this works for me , thanks

answered Jan 06 '23 at 13:24

Umer Aziz

111
5

score 0 · Answer 10 · edited Jan 30 '23 at 11:30

0

Try using <HashRouter> instead of <Router>, and don't forget to import {HashRouter}.

edited Jan 30 '23 at 11:30

Suraj Rao

29,388
11
94
103

answered Jan 30 '23 at 11:21

Mohd Mustafa Ameer

3
2

can you please montion what is the difference ? – Ahmed Sbai Feb 02 '23 at 17:45

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

10 Answers10

Linked