How to run create-react-app build version

5
votes

I have created a test React application and I started it with the create-react-app. I am starting it with with yarn start, but that starts the debug version of the application. I did npm run build and it created the build folder, however when I do yarn start from the /build folder, it still starts the debug version of the application. I need this for testing performance with the optimized version. How can I solve this?

4
reactjsnpmcreate-react-appyarnpkg
Any luck with my proposed answer? - Paul McLoughlin
I've updated my answer with resources for running production builds locally using apache, nginx and express. - Paul McLoughlin

4 Answers

11
votes

You can actually use static server to run build version of your app. It's doable with serve. You can test it with:

npm run build

npx serve -s build

4
votes

You're trying to move from a development build to a production build with create-react-app you need to deploy it using a web server, I would recommend using Heroku or a droplet or you can use Netlify which has a simple set up procedure using the below commands: 

cd project-name
npm run build

npm install netlify-cli -g
netlify deploy

Follow command line prompts and choose yes for new project and ./build as your deploy folder and voila you have a production React app!

You can host the app locally using apache, nginx, express

4
votes

Navigate inside the directory of your app first.

According to the official create-react-app website. When you run npm run build or yarn 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 install serve to serve your static 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 your app.

2
votes

If you want to run your app in browser with build files served locally from the filesystem (i.e., without a web server), you can put this in your package.json:

"homepage": ".",

Now

  1. build your app with npm run build.
  2. launch <your app>/build/index.html in the browser.

Note: This solution is not suggested if your app (or some routing library) is using the HTML5 pushState history API. https://facebook.github.io/create-react-app/docs/deployment#serving-apps-with-client-side-routing