0

I've written a small react app to test the build command.

Simply I didn't change anything after running npx create-react-app . I've only deleted everything inside ./src folder as usual, and created ./index.html and ./components/App.js

and after that I ran the npm run build command, and here is the files tree:

  .
├── build
│   ├── static
│   │   └── js
│   │       ├── 2.cc830c28.chunk.js
│   │       ├── 2.cc830c28.chunk.js.LICENSE.txt
│   │       ├── 2.cc830c28.chunk.js.map
│   │       ├── main.c49fc855.chunk.js
│   │       ├── main.c49fc855.chunk.js.map
│   │       ├── runtime-main.900dd88b.js
│   │       └── runtime-main.900dd88b.js.map
│   ├── asset-manifest.json
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src
│   ├── components
│   │   └── App.js
│   └── index.js
├── package.json
├── package-lock.json
└── README.md

Now, what I've done is to go to ./build/index.html file, and trying to open it inside the browser, --> nothing? blank page? why?

  • but if you normally run npm start and navigate to localhost:3000 in the browser, you'll see everything working.
  • and if you npm i -g serve from inside ./ directory and then ran serve ./build and then navigate to localhost:5000 you'll see your ./build/index.html file working and everything shows up normally.

so what is the magic with serve, why I need to serve the file in order to render the content on the screen? why I can't just open ./build/index.html file?

just for the curios folks,

./src/index.js:

import React from 'react'
import ReactDOM from 'react-dom'
import App from './components/App'

ReactDOM.render(<App />, document.querySelector('#root'))

./src/components/App.js

import React from 'react'

export default function App() {
    return (
        <div>
            Hello From React App
        </div>
    )
}

Some people suggested to add the "homepage" property inside the ./package.json file, but I need instructions on where to put it and how?

Ekmek
  • 413
  • 2
  • 12
  • What's the content of `index.html`? – Alex Ironside Feb 26 '21 at 09:33
  • for the both ./public and ./build ones, I didn't change anything, they're purely generated by create-react-app – Ekmek Feb 26 '21 at 09:35
  • @AlexIronside, _Can you explain a little in detail about where to write ("homepage":"file:/// – Ekmek Feb 26 '21 at 09:41
  • Oh I don't know. I just found this while searching for an answer. There is some sort of explanation in the answer – Alex Ironside Feb 26 '21 at 10:45
  • I've found it, you'll put the homepage property in the first level of the object in the package.json file, and you'll set the value of it as the absolute path to the build directory without adding a "/" at the end of the path, eg:`"homepage": "C:/Users/SomeOne/Documents/tests/my-react-app/build"` – Ekmek Feb 26 '21 at 11:38

0 Answers0