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?
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
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": ".",
......
}
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
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
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.
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.
I had an index.php in the webroot which prevented my app from running index.html.
I use HashRouter instead BrowserRouter & also need to add /# infront of every url like this:
href={`/#/blogs/${slug}`}
this works for me , thanks
Try using <HashRouter> instead of <Router>, and don't forget to import {HashRouter}.
Related
I have removed the default React icon from the index.html file in create-react-app, but, it is still showing up.
Here is the code of index.html file
<!DOCTYPE html>
<html lang="en" class="h-full bg-gray-50">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<title>ResumeBuilder</title>
</head>
<body class="h-full">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
Folder structure of public of create-react-app:
How can I remove it?
A simple shortcut could help:
Ctrl+F5 will do a force cache purge for your page.
You should replace reactjs Icon with your website logo Icon
you can easily generate online a favicon there are many websites available like this - https://www.favicon-generator.org/
Open the above site select your site logo and generate a favicon then download the zip file and extract the zip file and copy the logo icon from the generated folder and replace it with react js default icon.
I create a react-app using npx create-react-app and published the app to GitHub using vscode. My repository contains a public folder inside of the main repository that has my index.html file.
Here is my repository on GitHub
I then run the following command in my vscode terminal:
git subtree push --prefix public origin gh-pages
According to this tutorial on how to publish to github with a dist folder I did everything correctly.
When I check my repository it has 2 branches, main and gh-pages however if I go to my deployed site I get a completely blank site. What am I missing here?
The page isn't completely blank, if you visit https://atanasovcode.github.io/product-preview-card/ and view the source, you see the contents of your index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#500;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght#9..144,700&display=swap" rel="stylesheet">
<title>Product Preview Cardp</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
There are some comments in there that seem relevant:
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the tag.
To begin the development, run npm start or yarn start.
To create a production bundle, use npm run build or yarn build.
My app works great in the dev environment, where I use proxies. After I pushed to heroku (production), I saw a blank screen. In Chrome Developer Tools, I saw the following two errors:
Unexpected token. manifest.json:1
Uncaught SyntaxError: Unexpected token < main.bac17543.js:1
When i click on these two errors, I saw that the manifest file, the main.css file, and the main.css file all have the HTML file as the source. It fails to load the other files from the client/build/index.html.
Okay, so experimenting with this, I found when I run "npm run dev," it works great on the client port. However, there's an error when the app starts on the server port and serves the index.html file with the following express code shown in the course:
if (process.env.NODE_ENV === 'production') {
//Express will serve up production assets like main.js file
app.use(express.static('/client/build'));
//Express will serve up html file if it doesn't recognize the route
const path = require('path');
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'client', 'build', 'index.html'))
});
}
This code successfully serves up the html file. But all other files linked within fail.
After several reloads to Heroku, I reproduced the error by taking out the production if statement and navigating to localhost:5000 (sever port). After running "npm run build" from the client folder, I received the same errors when "npm run dev" is run. Even if i switch "build" to "public" to run index.html before "npm run build," I receive the same errors. To test if the html file was called, I wrote <h3>testing html</h3>, and the HTML successfully rendered to the screen as the only content. But it seems that manifest, favicon, css files, and javascript files were not found, returning the original index.html file and throwing an error at the beginning of the file: "<."
Here is my index.html file under the build folder:
<!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>Compass</title><link href="./static/css/main.c092d6b6.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.bac17543.js"></script></body></html>
And here it is in the public folder:
<!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="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<h3>this HTML is called, but the javascript file fails when served from Express</h3>
<div id="root"></div>
</body>
</html>
I've tried both absolute and relative paths in the href and src attributes in both folders. Yet still no dice. I'm pretty confident the paths are right because they work otherwise, but for some reason it's not reading correctly. The build paths are server/build/index.html, sever/build/static/css/main.d3f5fbbb.css, and server/build/static/js/main.69f468ec.js.
Perhaps there is some configuration issue? I haven't touched configuration for webpack or anything. I'm just not sure why the buck stops with the HTML file when serving from express. Can you please advise?
I had this same exact issue. I was able to solve the problem by setting my homepage in my react package.json from the github page that was auto filled to the heroku url since that was what was serving the static files.
Found this info to be helpful and led me to checking homepage property in my package.json
https://github.com/facebook/create-react-app/issues/527
Hope this helps or someone else that is trying to deploy express and react from one repo to heroku.
WebStorm with create-react-app has, in the /public/index.html file, a folder path to /public tagged as %PUBLIC_URL%.
It can't find the directory %PUBLIC_URL% as it doesn't exist, nor should this exist.
Other than suppressing the error with <!--suppress HtmlUnknownTarget -->, is there a way in Webstorm to alias a directory variable like, %PUBLIC_URL%, to the root path of /public for no editor errors in development?
<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">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
This article seems to give some more insght on this:
https://medium.com/#jenniferdobak/the-public-folder-and-favicons-in-create-react-app-8dc2cc1d492b
This is a good time to address that funky looking %PULIC_URL% tag. Remember the ‘escape hatch’ React provides in case we put assets in the public folder? During the build, assets prefixed with the %PULIC_URL% tag will be recognized and complied. However this is NOT best practice and should be used only when necessary.
Thus, in most cases, you can replace %PUBLIC_URL% with something like public, but of course, it depends on how you have structured your React project.
I've got a project that runs fine in the dev server environment, but now I am trying to get it to run on an Apache server. I ran 'npm run build' on my package.json file ("build": "babel-node tools/build.js && npm run open:dist"), and it created a dist folder with the following files:
index.html
main.js
main.map.js
main.css
main.css.map
I placed this folder inside of the htdocs folder in my Apache directory. I double clicked on index.html hoping it would take me to the home page of the app, but nothing happens. Not even an error in the console.
Here's the index.html file I'm using:
<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8"/>
<title>Survey Builder</title>
<link href="./dist/app/main.8286783e52fd295f2f9e5d678a8a2acd.css" rel="stylesheet">
</head>
<body>
<div id="app">
</div>
<script type="text/javascript" src="./dist/app/main.66670fe7523b3b72f307.js"></script>
</body>
</html>
Thanks a bunch in advance!
I'll answer my own question.
*If you're using React and you're deploying on Apache, you need to know that the path where you place your files in Apache must be reflected in your React routes. So, if you place your production ready React files inside of a folder in your htdocs Apache directory, you must also reflect that path in your routes. If you dump your production ready files straight into Apache's htdocs directory, it will work out of the box.
I hope this helps...