CODEWITHSUNDEEP
htmlreactjsserverbuild
bongho cha
bongho cha

Reputation: 21

How to run "index.html" in React

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

Upvotes: 2

Views: 4859

Answers (2)

Fksjii
Fksjii

Reputation: 62

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.

Upvotes: 2

It'sNotMe
It'sNotMe

Reputation: 1260

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.

Upvotes: 2

Related Questions