Dockerizing a React Task: A Hands-On DevOps Implementation

#devops #react #docker #containers

In this article, I’ll walk through how I built a Dockerized React Task Manager from scratch, emphasizing real-world DevOps practices like containerization, multi-stage builds, and production-ready deployment.

1. Project Overview

Build a React-based Task Manager to track tasks in real time.

Containerize the frontend using Docker and serve it with Nginx.

Set up a backend API placeholder for future integration.

Implement multi-container orchestration using Docker Compose.

This project serves as both a DevOps practice exercise and a production-ready application template.

2. File Structure

devops-react-task-manager/ ├── frontend/ │ ├── Dockerfile │ ├── nginx.conf │ ├── package.json │ └── src/ ├── backend/ │ ├── Dockerfile ├── package.json │ └── app.js ├── docker-compose.yml ├── .env └── README.md

3. Setting Up the React Environment

I use vite for React
cd frontend npm create vite@latest . -- --template react npm install npm run dev

Verified the React app works locally.
Initially displayed default Vite UI with counter and logos

4. Containarized the frontend

# Build stage
FROM node:20-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm install
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;"]

In the first Dockerfile I wrote I use node:18 which It doesnt work with vite during the testing I met with errors before realizing vite doesnt work with version 18 but version 20.

5. Docker Compose Setup

version: "3.9"

service:
  frontend:
   build: ./frontend
   ports:
   - "3000:80"
   depend_on:
   - backend

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

network:
 devops-net:
  driver: bridge

frontend: React app served via Nginx on port 3000.
backend: Placeholder API for future development.