Serve your React build locally with nginx through docker

#react #javascript #docker

Sometimes, there are build differences between your development server and your build outcome. To debug this, you have to somehow host your build outcome locally. This can be done really easy, just mount your build into a nginx container!

Creating the build

As a first step, you have to build and bundle your JavaScript / TypeScript by running the build command. You can find that command in your package.json. For a React App, created with create-react-app this would be react-scripts build, accessible in the most projects over the script build. This script can be executed through e.g. npm run build, depending on your node package manager.

This provides us our static files in /build. We will have to start a container and mount that directory next.

Creating the container

The second step starts a container and mounts the built files as the default served directory. For the default nginx image, this is the path /usr/share/nginx/html, which provides the famous Welcome to nginx! default page.

Mounting our build output into this folder makes nginx serve the build instead of its default pages.

Start the container with the following command from your project root:

docker run -p 8082:80 -v $(pwd)/build:/usr/share/nginx/html nginx

Your built files will be available under port 8082.