Menu
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?
523
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 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
25
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With