Docker Image Slimming for ReactJS Applications: A Step‑by‑Step Guide

Docker image size significantly impacts CI/CD pipelines and cloud deployments; this article walks through a practical example of slimming a ReactJS application container to achieve a much smaller, more efficient image.

Step 1: Create the project – Use the command npx create-react-app docker-image-test to scaffold a React app, then run cd docker-image-test , yarn install , and yarn start to verify it works at http://localhost:3000 .

Step 2: Build the first image – Write a Dockerfile based on node:12 that copies the source, installs dependencies, and runs yarn start . Build with docker build -t docker-image-test . and inspect the image size (≈1.43 GB).

Step 3: Switch to an Alpine base image – Replace node:12 with node:12-alpine in the Dockerfile and rebuild. The image size drops to about 580 MB, showing the benefit of a smaller Linux distribution.

Step 4: Apply multi‑stage builds – Introduce a two‑stage Dockerfile: the first stage builds the React app (install deps, yarn build ), the second stage uses a fresh node:12-alpine image and copies only the /app/build directory. After rebuilding, the final image is roughly 97.5 MB.

Step 5: Serve with Nginx – Replace the Node runtime with nginx:stable-alpine in the second stage, copying the built static files into /usr/share/nginx/html . Build the image again; the resulting size is only 22.4 MB, and the container can be run with docker run --rm -it -p 3000:80/tcp docker-image-test:latest to serve the app.

The guide concludes that these straightforward techniques—using Alpine images, multi‑stage builds, and a lightweight web server—can dramatically shrink Docker images for any Node.js‑based project, making containers more portable and efficient.