Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

what is the use of react-scripts build?

I just started using react and I’m a little confused, I understand that to run the server we type the command:

npm run start (react-scripts start)

but what’s the use of npm run build (react-scripts build)?
from this answer
I understand that it’s used to reduce the size of the web application but how do I use that build/ folder?

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>Solution :

npm run start should probably not be used in production at all. It is just for developing locally.

When you generate the build folder with npm run build, that is what should be used in production, but somehow you have to actually serve it to a browser.

If you have a react app without any api calls in it… then you can probably just run it locally by double-clicking on index.html. You will see it running in your browser served from the local file system. However, I don’t think that it will let you fetch, so if you have any fetches, your project will probably just look broken.

Some options for seeing it work locally are:


if you have python installed, then there is a static webserver built in:

cd build
python3 -m http.server 8888

and then go to http://localhost:8888/index.html with your browser. This is how I always do it because it I don’t need to install any packages.


If you don’t have python, and want to do it with node, then you can look at it with this npm package for example: https://www.npmjs.com/package/http-server

npm install --save http-server

if you add this script to package.json

"prod-server": "http-server build -p 8888",

and then after building you can start your node server like this

npm run prod-server

and then you can open http://localhost:8888/index.html in your browser and see what is in that directory


Another thing you can do to see that production version in action locally, and get some idea what will happen to it when it is deployed for real is follow instructions for setting up an apache http server. You might already have one, or look up who to set up a local "LAMP" stack even though you only need the "A" part of that. And then just drag the contents of the build directory into your apache http public directory and open it like you would any other file.


To show it publicly, since it is static, you can also deploy it to github pages, or to a "cdn", or any other web host that can serve static files, since the files in there only need to be executed in your browser

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading