How to run build version using create-react-app?

Question

So, I developed a small React application using create-react-app. (I have always made applications from scratch.)

Then, after I was kind of happy with it, I decided to run npm run build to make an optimized production build.

Can someone please tell me how I can run the production build instead of the Dev build?

Adaptive

Answer 1

When you run npm run build your console should actually say something like the following

The build folder is ready to be deployed.
You may serve it with a static server:

npm install -g serve
serve -s build

The build script is building your entire app into the build folder, ready to be statically served. However actually serving it require some kind of static file server, like the the one they propose.

After running the command serve -s build you can access your production build at localhost (on the specified port).

You can of course run whatever static file server you like, I usually use express for this, however serve seems like the easiest option to just serve your statics files with a single command.

Contortionist

I have done this, i want this serve -s build to run in background with forever, but it gives error – Subway

forever is command that let us some process in background. Please refer this link: npmjs.com/package/forever – Subway

What command are you running with forever, and what error du you get? Maybe this should be asked as another stackoverflow question, since it is not directly related to the given question – Contortionist

@Contortionist I have done the above steps, and got the urls for the running server. But i am not access those urls. getting site cant be reached. – Solanum

@Sravani did your build succeed, check that you actually have something in your build folder. – Contortionist

Even I followed these steps but the files didn't runs. It gives error: serve' is not recognized as an internal or external command, operable program or batch file. – Molybdenous

thank you for your answer. I had to make sure the homepage field in my package.json is set to . to serve the files from any directory. – Dives

try npx serve -s build – Gonadotropin

@Contortionist Where does it install packages after this command npm install -g serve? – Salsbury

@Salsbury it is installed globally (that is why we use -g). You can see where the global packages are installed with the command npm list -g --depth=0 – Contortionist

globally installing and running serve -s build works.. – Cacka

Is there any difference if homepage of package.json or PUBLIC_URL is set? – Cassy

This gives following error in the console: Uncaught SyntaxError: Unexpected token '<' – Witchcraft

serve does not support non-root mode: github.com/vercel/serve/issues/556 – Naamann

@ReemaParakh to run the process in background, you may use PM2 pm2.keymetrics.io – Cruzcruzado

Answer 2

Also you can use "serve" tool, using "npx". in this case no need to install it globally.

npx serve -s build

Throaty

404 | the requested path could not be found – Haukom

Might be helpful for others: the serve should be from outside the build folder – Tav

This is the proper answer, no need to install that package, just run it once – Cheju

"404 | the requested path could not be found" -> You need to run "npm run build" before ;) – Friseur

Answer 3

Navigate inside the directory of your app first.

According to the official create-react-app website. When you run npm run build you create a build directory with a production build of your app.

After running the command above the next thing you can do to check the build version of your app is to to install serve to serve your status site on the port 5000 by default.

npm install -g serve
serve -s build

This will copy the link to your clipboard that you can paste in your browser and see the build version of you app.

Ringworm

you can also do this in a single line: npx serve -s build – Breeden

Answer 4

First of all run

npm install -g serve 

It will install globally the serve, and then execute

serve -s build

Trotta

Answer 5

use this command : npm install -g serve -s build

Kyliekylila

Can you give a short explanation what the command does and what the flags mean? – Kerrin

You need to install serve globally if you want to practice running the production build. This command makes sense to me - I think it answers the question in a narrow way. – Manoff

Answer 6

You've to first install serve package globally.

If you're using yarn, run this command to do so: yarn global add serve.

For npm: npm install -g serve

And then execute: serve -s build

Kershner