How I Shrank a Docker Image for a React App from 1.43 GB to 22 MB

Step 1: Create the React Project

Use the official Create‑React‑App scaffold to generate a new project: npx create-react-app docker-image-test Enter the project directory, install dependencies, and start the development server:

cd docker-image-test
yarn install
yarn start

Open http://localhost:3000 in a browser to verify the app runs.

Step 2: Build the First Docker Image

Create a simple Dockerfile based on the official node:12 image:

FROM node:12
WORKDIR /app
COPY package.json ./
RUN yarn install
COPY . .
EXPOSE 3000
CMD ["yarn", "start"]

Build and list the image:

docker build -t docker-image-test .
docker images

The resulting image is about 1.43 GB .

Run the container to confirm the app works:

docker run --rm -it -p 3000:3000/tcp docker-image-test:latest

Step 3: Switch to a Smaller Base Image

Replace node:12 with the Alpine‑based node:12-alpine, which is much lighter because it lacks the full Ubuntu distribution.

FROM node:12-alpine
WORKDIR /app
COPY package.json ./
RUN yarn install
COPY . .
EXPOSE 3000
CMD ["yarn", "start"]

Rebuild the image; the size drops to roughly 580 MB .

Step 4: Apply Multi‑Stage Builds

Use a two‑stage Dockerfile to separate the build environment from the runtime image, copying only the compiled assets:

# STAGE 1
FROM node:12-alpine AS build
WORKDIR /app
COPY package.json ./
RUN yarn install
COPY . /app
RUN yarn build

# STAGE 2
FROM node:12-alpine
WORKDIR /app
RUN npm install -g webserver.local
COPY --from=build /app/build ./build
EXPOSE 3000
CMD ["webserver.local", "-d", "./build"]

After rebuilding, the final image is about 97.5 MB .

Step 5: Serve the App with Nginx

Replace the Node runtime with an Nginx server to serve the static build, further reducing the image:

# STAGE 1
FROM node:12-alpine AS build
WORKDIR /app
COPY package.json ./
RUN yarn install
COPY . /app
RUN yarn build

# STAGE 2
FROM nginx:stable-alpine
COPY --from=build /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

The resulting image size is only 22.4 MB , and the container serves the React app efficiently.

Validate the container runs:

docker run --rm -it -p 3000:80/tcp docker-image-test:latest

These techniques—using Alpine base images, multi‑stage builds, and a lightweight web server—can be applied to any Node.js or JavaScript project to dramatically shrink Docker image size, improve portability, and speed up CI/CD pipelines.