create-react-app npm run build command

Question

I have a built a small React application with create-react-app, and it runs fine from the local server after running npm start. OK so far.

Answer 1

After building your application through create-react-app create-react-app

Run command npm run build After that run command npm install -g serve & finally serve -s build

More detailed information can be found from here create-react-app-deployment

Answer 2

https://www.taniarascia.com/getting-started-with-react/ and The final script can be found on the GitHub.

npm run build -> will create a folder build which include the index.html and static folder. By just clicking the index.html will open on a new browser's tab. But it shows only blank page. Why? because it's need a server to make it works.

Solution :

Move the file on other folder. Open the folder using VC Code. Open the index.html and right click -> select : Open with live server. A new tabs opened on your browser with related ip address and port.

Or you can run it on localhost using xampp :

Open the XAMPP server. Place it on localhost. And it must work.

Answer 3

you can't run the production build by clicking on index.html, you have to modify your script like bellow.

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "deploy": "serve -s build"
  }

after running npm run-script build, run npm run-script deploy, you will get some thing like this, this is where you can load your production build.

npm install -g serve before run npm run-script deploy.

Answer 4

open index.html file. scroll near end and you will see

<script src="/static/js/2.b5125f99.chunk.js"></script><script src="/static/js/main.fcdfb32d.chunk.js"></script></body></html>

just add a dot in front of the two src attribute:

<script src="./static/js/2.b5125f99.chunk.js"></script><script src="./static/js/main.fcdfb32d.chunk.js"></script></body></html>

also if you have any styles you must also scroll near beginning where you will see:

<link href="/static/css/main.1eabf3ab.chunk.css" rel="stylesheet">

and also place a dot in front of the href attribute

<link href="./static/css/main.1eabf3ab.chunk.css" rel="stylesheet">

NOTE: filename may/will not be the same for you

also be sure to change this back when using a server or just run npm run build again(i have no idea what happens if you dont)

Answer 5

I tried to run the same command and react app was also showing white screen. main js file was taking the relative path to the file and showing error when I open js file in new browser "Your file was not found" I make it to absolute path and its working fine.

Answer 6

However, when I run npm run build, the process appears to execute correctly (creates build folder, which contains the bundled js file and the html.index file), but when I open index.html in my browser it renders nothing. What am I missing?

When you run npm run build, it prints the relevant instructions:

You can’t just open index.html because it is supposed to be served with a static file server.
This is because most React apps use client-side routing, and you can’t do that with file:// URLs.

In production, you can use Nginx, Apache, Node (e.g. Express), or any other server to serve static assets. Just make sure that if you use client-side routing, you serve index.html for any unknown request, like /*, and not just for /.

In development, you can use pushstate-server for this. It works with client-side routing well. This is exactly what the printed instructions suggest you to do.

I also tried uploading it to a remote server and when I went to the URL the browser came back with Forbidden: You don't have permission to access / on this server.

You need to upload the contents of the build folder, not the build folder itself. Otherwise the server can’t find your index.html because it is inside build/index.html, and so it fails. If your server doesn’t detect a top-level index.html, please refer to your server’s documentation on configuring files served by default.