Search code examples
javascriptreactjscreate-react-app

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?


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