Dockerizing a React Task: A Hands-On DevOps Implementation

Source: Dev.to

Introduction

In this article I walk through building a Docker‑ized React Task Manager from scratch, showcasing real‑world DevOps practices such as containerization, multi‑stage builds, and production‑ready deployment.

Project Overview

• Frontend – React application built with Vite, served by Nginx.
• Backend – Placeholder API (for future integration).
• Orchestration – Docker Compose to run both containers together.

The project serves both as a DevOps practice exercise and as a template for a production‑ready application.

Prerequisites

• Docker 20+
• Docker Compose 2+
• Node 20 (required by Vite)

Setting Up the React Frontend

# Create the frontend directory and initialize a Vite React project
cd frontend
npm create vite@latest . -- --template react
npm install

Verify the app works locally:

npm run dev

You should see the default Vite UI with the counter and logos.

Dockerfile (Multi‑Stage Build)

# ---- Build stage ----
FROM node:20-alpine AS build
WORKDIR /app

# Install dependencies
COPY package*.json ./
RUN npm install

# Copy source files and build
COPY . .
RUN npm run build

# ---- Production stage ----
FROM nginx:alpine
COPY nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=build /app/dist /usr/share/nginx/html

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Note: The original Dockerfile used node:18, which caused Vite build errors. Vite requires Node 20+.

Docker Compose Configuration

version: "3.9"

services:
  frontend:
    build: ./frontend
    ports:
      - "3000:80"
    depends_on:
      - backend

  backend:
    build: ./backend
    ports:
      - "5000:5000"
    env_file:
      - .env
    networks:
      - devops-net

networks:
  devops-net:
    driver: bridge

Explanation

• frontend – Builds the React app and serves it with Nginx on port 80 inside the container; exposed as localhost:3000.
• backend – Placeholder API, built from ./backend, reachable at localhost:5000.
• depends_on ensures the backend starts before the frontend.
• Containers communicate via the devops-net network using service names (frontend, backend).

Running the Application

# Build and start both containers in the foreground
docker compose up --build

# Or run them detached
docker compose up -d --build

• Frontend URL:
• Backend URL:

Key Takeaways

• Multi‑stage Docker builds produce lean production images by separating the build environment from the runtime environment.
• Node version management is crucial; Vite requires Node 20 or newer.
• Docker Compose simplifies orchestration of multiple services and handles networking automatically.
• Nginx is an efficient static file server for React production builds.

With these steps you have a fully containerized React Task Manager ready for further development and deployment.