I am testing the build file by putting it on the server.
But, if I type index.html directly at the end of the URL, I get a gray screen. What is the reason?
[Example]
baseURL/ -> working
baseURL/index.html -> not working
5
-
which server are you using? if IIS use web.config, apache and nginx use .htaccessMay'Habit– May'Habit2020-10-22 07:50:51 +00:00Commented Oct 22, 2020 at 7:50
-
I'm not using the local server. I'm testing using filezilla's internal server. Do you know why not when accessing index.html?bongho cha– bongho cha2020-10-22 09:06:31 +00:00Commented Oct 22, 2020 at 9:06
-
if IIS use web.config, apache and nginx use .htaccess, modify thisMay'Habit– May'Habit2020-10-22 09:11:11 +00:00Commented Oct 22, 2020 at 9:11
-
Can't I solve it by modifying the React build file or project file?bongho cha– bongho cha2020-10-22 09:17:16 +00:00Commented Oct 22, 2020 at 9:17
-
Absolutely NO! As I said before, did you understand?May'Habit– May'Habit2020-10-22 09:19:06 +00:00Commented Oct 22, 2020 at 9:19
Add a comment
|
2 Answers
Browsing to baseURL/index.html renders an empty <div>.
By default, CRA builds index.html with no viewable <body> content. It contains only an empty "root" div. Here's that code:
<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>
Browsing directly to index.html renders that page, showing the empty div. That's why you see nothing, or "gray screen."
Browsing to baseURL allows React to function.
Browsing the baseURL of a React project sets React's magic to work. The file index.js is processed, and React inserts your <App /> component into the empty "root" div in index.html.
The React render function performs this task.
The ReactDOM.render() function takes two arguments, HTML code and an HTML element. The purpose of the function is to display the specified HTML code inside the specified HTML element.
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
In the render function above, the first parameter (output from your <App /> component) is inserted in the element identified in the second parameter (the "root" div in index.html). As a result, the browser displays your application output.
2 Comments
Man Man Yu
thanks! so how to test if the index.html from npm run build work ?
It'sNotMe
You can add some HTML to the root div. <div id="root"><p>Hi</p></div>
Think of it that way:
When you are accessing index.html - you will be accessing that like a file on your hard drive. No magic - you get literal conent of index.html - which is empty page.
When you access the route, there magic happens - the actual code executes, Route on the server is triggered - your empty view is being populated by code that your browser will understand and make a fully working page.
Disadvantage of that is SEO of page. Googling robots will have a problem promoting not optimised for SEO react apps - for that you must use ReactDOMServer or other variation.
