React is a great way to develop, build and ship applications fast. It provides good and fast developer experience, and many tools that help us develop applications faster.
But sometimes, we end up in a rather tricky situation. Everything works on our local development server. But when we run the application in production, it's the exact opposite. In other words, nothing works. That brings us to a very important question.
How to Run React JS Build Locally?
Running production build of React JS app locally is a straightforward process. It can be summed up into a series of 3 steps.
- Creating production build of React JS application
- Using the local server to serve the React JS build
- Testing if everything works as expected
note
I'll explain each step in more detail in this article. If you're interested in that, read further!
tip
If local environemnt is causing you trouble, you can try other options as well. Check out this guide to learn where programmers write code .
Running React Build Locally
To create a production build of your React app, all you need to do is run the following command.
npm run build
# Or if you're using Yarn
yarn buildIt will take a couple of seconds, maybe even minutes. But after some time, you should see it produces a new folder. Usually, it's called build or public.
info
Most React project managers like Create React App, Next or Gatsby have the build process preconfigured. That's why we only need to run one command. And in the background, they do all the magic for us.
The build process is meant to optimize everything in our application. And make it production ready for our users. This step is very important as it gets rids of all the unnecessary things.
To give you an example. In development mode, we love console logs, hot reloading, and descriptive error messages. But in the production version, we don't want any of these. Luckily for us, the build process usually removes all these features.
Serving React Build Folder
Now that we have our build files generated, it's time to turn them into a functioning website. In order to do so, we need some sort of HTTP server running on our local machine.
While this may sound difficult, we can quickly achieve it by installing a package called serve.
Serving React Build With Serve
Assuming you would like to serve a static site, single page application or just a static file (no matter if on your device or on the local network), this package is just the right choice for you. (source: Serve)
In your terminal, run the following command.
npm install -g serve
# Or if you're using Yarn
yarn global add serveAll that's left to do is tell serve package which folder you want to serve. Assuming you're inside your project directory. You'd run a command like this.
serve buildAnd you should see the following output, specifying where your React app is being served.
Testing React Build Locally
When your React app is up and running, all that's left to do is use your app, test it, and debug it. And eventually, find the problem you were facing in the first place.
note
I wish I could share tips and tricks to help you find your problem, but there is no magic solution that fits all use cases. The bugs vary from application to application. And in order to resolve them, you'll just need to spend time testing and debugging.
Concluding Thoughts
React team is trying their best to make the life of React developers easier and more enjoyable. One thing that really helps us is the ability to run and test the production build of React JS apps locally.
Sometimes, we end up in a situation, where the production build of our React app is not working. The ability to run and test the production build of our app locally can save us a ton of time and headaches.
In this article, you learned the necessary steps to run, serve and test React build locally. With this knowledge, next time you're facing a production problem, you know exactly what steps you need to take.