How to Containerize a React Application

Containers and Kubernetes have become some of the enduring darlings of developers. A recent React deployment I needed to push into a Kubernetes environment made me revisit how much easier the job becomes once a Dockerfile is part of the workflow.

Before getting into the main guide, it helps to remember how much pain containers replace. In one of my internships, I worked as a pre-sales engineer for EduERP, an open-source ERP for universities.

EduERP ran on the LAMP stack and had a number of dependencies. Guiding a university through setup on its own server could take a full week because installation, configuration, and troubleshooting all had to be repeated manually. Docker would have changed that entire experience.

The modern approach

Today the workflow can be reduced to five steps:

1. Create a Dockerfile containing all instructions for installing dependencies and running the application.
2. Build the Docker image from that Dockerfile.
3. Push the Docker image to a container repository.
4. Have the client pull the Docker image from the repository.
5. Run the Docker container.

That shift means a setup that once took days can become a repeatable process measured in minutes.

Pre-requisites

Before starting, make sure you have:

• Node.js installed in your development environment
• Docker installed
• A terminal of choice

If you do not have an existing React app, create one:

npx create-react-app my-app
cd my-app

Create an Nginx configuration file that the Docker image can use to serve the application:

server {
    listen 8080;
    server_name frontend;
    location / {
        root /usr/share/nginx/html;
        try_files $uri /index.html;
    }
}

Step 1: Create your Dockerfile

For React apps, the development workflow is usually:

1. npm install to install dependencies
2. npm run build to produce the optimized build output
3. Serve the built site through a web server such as Nginx

That sequence leads directly to a multi-stage Dockerfile:

FROM bitnami/node:12-prod as builder
WORKDIR /app
COPY ./package.json /app/package.json
COPY ./yarn.lock /app/yarn.lock
ENV NODE_ENV=production
RUN yarn install --production
COPY . .
RUN yarn build

FROM nginxinc/nginx-unprivileged
COPY ./nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=builder /app/build /usr/share/nginx/html
EXPOSE 8080

Step 2: Build the image

Build the image with a tag of your choice:

docker build -t my-react-app-name .

Step 3: Run the container

To run the container, keep three things in mind:

• the container's internal port
• the port on your own machine
• the image name you used while building

docker run -p 8080:8080 my-react-app-name

If everything works, http://localhost:8080 should serve the newly containerized React application.

Next steps

• Push the image to a registry such as Docker Hub
• Create a Kubernetes pod definition to run the image

With Docker containers, deployment becomes consistent and predictable across environments. That is the real payoff.