CODEWITHSUNDEEP
reactjs
amone
amone

Reputation: 3862

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

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?

Upvotes: 57

Views: 125562

Answers (10)

aravvn
aravvn

Reputation: 794

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>

And above mentioned "homepage": "." in package.json file adds . in front of slash so it becomes ./static/js/main.123.js which does the same trick

Upvotes: 47

Mohd Mustafa Ameer
Mohd Mustafa Ameer

Reputation: 5

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

Upvotes: 0

Umer Aziz
Umer Aziz

Reputation: 111

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

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

this works for me , thanks

Upvotes: 0

Manas Gond
Manas Gond

Reputation: 666

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

Upvotes: 47

Steve
Steve

Reputation: 1765

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

Upvotes: 0

R G
R G

Reputation: 31

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.

Upvotes: 0

jose920405
jose920405

Reputation: 8049

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

Upvotes: 8

TechnicalKeera
TechnicalKeera

Reputation: 1043

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

Upvotes: 26

Bimal Grg
Bimal Grg

Reputation: 8146

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.

Upvotes: 0

Isaac Sekamatte
Isaac Sekamatte

Reputation: 5598

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

Upvotes: 5

Related Questions