DevOps CI/CD Demo App - Frontend

A production-ready React frontend application designed as Phase 1 of a complete CI/CD and GitOps pipeline. This project demonstrates modern DevOps practices with clean architecture, containerization, and deployment readiness.

🎯 Project Overview

This is a minimal, professional frontend application built to showcase:

• Modern React development with Vite
• Production-grade Docker containerization
• Nginx web server configuration
• CI/CD pipeline readiness
• Future Kubernetes deployment compatibility

🏗️ Architecture

fe-demo-app/
├── src/
│   ├── App.jsx          # Main application component
│   ├── App.css          # Application styles
│   ├── main.jsx         # React entry point
│   └── index.css        # Global styles
├── public/              # Static assets (auto-created)
├── Dockerfile           # Multi-stage Docker build
├── nginx.conf           # Nginx server configuration
├── vite.config.js       # Vite build configuration
├── package.json         # Dependencies and scripts
└── index.html           # HTML template

🚀 Quick Start

Prerequisites

• Node.js 18+ and npm
• Docker (for containerization)

Local Development

1. Install dependencies:

cd fe-demo-app
npm install

2. Run development server:

npm run dev

Access the app at http://localhost:5173

3. Build for production:

npm run build

Output will be in the dist/ directory.

4. Preview production build:

npm run preview

🐳 Docker Usage

Build Docker Image

# Build the image
docker build -t fe-demo-app:latest .

# Build with specific tag
docker build -t fe-demo-app:v1.0.0 .

Run Container

# Run on port 8080
docker run -d -p 8080:80 --name fe-demo fe-demo-app:latest

# Access the app
open http://localhost:8080

Container Management

# View logs
docker logs fe-demo

# Stop container
docker stop fe-demo

# Remove container
docker rm fe-demo

# Health check
curl http://localhost:8080/health

📦 Docker Image Details

• Base Images:
  • Builder: node:18-alpine (lightweight Node.js)
  • Runtime: nginx:1.25-alpine (minimal web server)
• Multi-stage build: Optimized for small image size
• Production optimizations:
  • Gzip compression enabled
  • Static asset caching (1 year)
  • Security headers configured
  • Health check endpoint at /health

🔧 Tech Stack

Component	Technology	Purpose
Framework	React 18	UI library
Build Tool	Vite	Fast development and build
Web Server	Nginx	Production static file serving
Container	Docker	Application containerization

🎨 Features

• Interactive UI: Counter and deploy button demonstrations
• Responsive Design: Mobile-friendly layout
• Production Ready: Optimized build and serving
• Health Monitoring: Built-in health check endpoint
• Clean Code: Minimal, maintainable structure

🔮 Future Phases (Not Implemented Yet)

This project is designed to integrate with:

Phase 2: CI Pipeline

• Jenkins pipeline configuration
• Automated builds on git push
• Docker image building and tagging
• Push to Docker registry (Docker Hub/ECR)

Phase 3: GitOps Deployment

• Kubernetes manifests (Deployment, Service, Ingress)
• ArgoCD application configuration
• Automated deployment from git repository
• Environment-specific configurations (dev/staging/prod)

Phase 4: Monitoring & Observability

• Application metrics
• Log aggregation
• Health monitoring
• Performance tracking

📝 Configuration Files

nginx.conf

• Optimized for SPA routing
• Gzip compression enabled
• Security headers configured
• Static asset caching
• Health check endpoint

Dockerfile

• Multi-stage build for optimization
• Production dependencies only
• Minimal final image size
• Health check included

🧪 Testing the Build

# Test local build
npm run build && npm run preview

# Test Docker build
docker build -t fe-demo-app:test .
docker run -p 8080:80 fe-demo-app:test

# Test health endpoint
curl http://localhost:8080/health

📊 Image Size Optimization

The multi-stage Dockerfile ensures:

• Build dependencies are not included in final image
• Only production artifacts are served
• Alpine Linux base for minimal footprint
• Typical final image size: ~25-30MB

🔐 Security Features

• No exposed secrets or credentials
• Security headers configured in Nginx
• Minimal attack surface (Alpine base)
• Non-root user execution (Nginx default)
• Health check for container orchestration

📚 Best Practices Implemented

✅ Multi-stage Docker builds
✅ .dockerignore for build optimization
✅ Production-grade Nginx configuration
✅ Health check endpoints
✅ Proper caching strategies
✅ Security headers
✅ Clean project structure
✅ Version control ready

🤝 Contributing

This is a demo project for CI/CD learning. Feel free to:

• Fork and experiment
• Add features for learning
• Integrate with your own CI/CD tools
• Extend with backend services

📄 License

MIT License - Free to use for learning and portfolio projects.

👨‍💻 Author

Built as a resume-grade DevOps demonstration project.

---

Version: 1.0.0
Status: ✅ Production Ready
Next Phase: CI/CD Pipeline Integration