Here are simple steps that show you how to start with an empty React app (using create-react-app), create a production build of that app and then run it inside a Docker container.

Let's start by creating a new React app:

1. Install create-react-app

npm install create-react-app --global

1. Create a new React app:

create-react-app react-docker-app

1. Go to the react-docker-app folder and run it, to make sure all is good:

cd react-docker-app && yarn start

The yarn start command compiles the React app and opens the browser.

Now that we have the app running let's create a Dockerfile in the root folder of the project. Here are the contents of the Dockerfile:

Before we continue, let's explain what's happening in this Dockerfile.

Lines 1-4 are the first stage of the build. In this stage, you copy all source code to the container and execute yarn run build that creates an optimized production build.

Lines 6-10 are the second stage for the build. You install the serve package and on line 9, you copy the output from the first stage of the build from the folder /app/build to the current folder in the container (/app - this gets set by the WORKDIR /app instruction in the Dockerfile).

About multi-stage builds: If you're wondering about two FROM statements in the Dockerfile. This is because you want to use a multi-stage build. In the first stage of the build, you copy the source code to the container and run the build command. In the second build stage, you copy only the built artifacts (HTML, JS, ...) to the container. Using multi-stage build results in a significantly smaller Docker image. The first image in the example is ~198MB, while the second one is only 86.7 MB.

With the last line, you run the serve command to serve the contents of the current folder on port 80.

Instead of serve, you could also use Nginx; however that might require a bit more config.

To build the image, you can run the following command from the project root folder, where your Dockerfile is:

docker build -t react-docker-app .

With the -t you specify the name of the image, and with the . you specify the build context (e.g. the current folder). When the build completes, the last line should look something like this:

Successfully tagged react-docker-app:latest

Finally, let's run this container now. To run it locally, you need to provide the name of the image and the port we want the React app to be accessible on. Note that we used port 80 in the serve command, so need to make sure to use 80 when specifying the container port like this:

docker run -it -p 8080:80 react-docker-app

Once the container is running, you can open http://localhost:8080 and you'll be able to access the React app running inside the Docker container.

🔥 If you want to learn more about Kubernetes, Istio, Docker, and cloud-native in general, check out the my Learn Istio ebook 📖. You can get a free preview of the book at 👉 https://learnistio.com 👈