Full-Stack Development Environment

🏗️ Full-Stack Architecture

Complete containerized development environment featuring React frontend, Node.js backend API, and PostgreSQL database. Includes hot reload, volume mounting, and isolated development workflow.

⚛️

React Frontend

Port 3000

Vite + Hot Reload

🟢

Node.js API

Port 5000

Express + Nodemon

🐘

PostgreSQL

Port 5432

Persistent Volume

🎯

Key Features

🔥 Hot Module Replacement (HMR) for React
🔄 Auto-restart with Nodemon for API
💾 Persistent PostgreSQL data storage
🔗 Container networking and service discovery
📦 Volume mounting for live code changes
⚙️ Environment-specific configurations

⚡

Development Benefits

Instant Setup: Clone and run with a single command - no manual installation of Node.js, PostgreSQL, or dependencies.

Consistency: Identical environment across all team members, eliminating "works on my machine" issues.

Isolation: Each project runs in its own containers without conflicting with system-wide installations.

Scalability: Easy to add services like Redis, MongoDB, or message queues as your project grows.

⚛️

React Frontend

Port: 3000

Modern React application built with Vite for lightning-fast development experience. Features Hot Module Replacement (HMR) for instant updates without losing component state.

React 18 Vite ES6+ Axios

Dockerfile.frontend

FROM node:18-alpine WORKDIR /app COPY package*.json ./ RUN npm install COPY . . EXPOSE 3000 CMD ["npm", "run", "dev"]

🟢

Node.js Backend

Port: 5000

RESTful API built with Express.js and auto-reload capability via Nodemon. Handles business logic, database connections, and provides endpoints for the React frontend.

Node.js 18 Express Nodemon pg

Dockerfile.backend

FROM node:18-alpine WORKDIR /app COPY package*.json ./ RUN npm install COPY . . EXPOSE 5000 CMD ["npm", "run", "dev"]

🐘

PostgreSQL Database

Port: 5432

Robust relational database with persistent volume storage. Data survives container restarts and includes initialization scripts for schema setup and sample data.

PostgreSQL 15 Alpine Persistent Volume Init Scripts

Database Configuration

postgres: image: postgres:15-alpine environment: POSTGRES_DB: fullstack_db POSTGRES_USER: developer POSTGRES_PASSWORD: dev_password volumes: - postgres_data:/var/lib/postgresql/data - ./init.sql:/docker-entrypoint-initdb.d/init.sql

📝 Docker Compose Configuration

docker-compose.yml

version: '3.8' services: frontend: build: context: ./frontend dockerfile: Dockerfile container_name: react-app ports: - "3000:3000" volumes: - ./frontend:/app - /app/node_modules environment: - VITE_API_URL=http://localhost:5000 depends_on: - backend networks: - fullstack-network stdin_open: true tty: true backend: build: context: ./backend dockerfile: Dockerfile container_name: node-api ports: - "5000:5000" volumes: - ./backend:/app - /app/node_modules environment: - NODE_ENV=development - PORT=5000 - DB_HOST=postgres - DB_PORT=5432 - DB_NAME=fullstack_db - DB_USER=developer - DB_PASSWORD=dev_password depends_on: - postgres networks: - fullstack-network postgres: image: postgres:15-alpine container_name: postgres-db ports: - "5432:5432" environment: - POSTGRES_DB=fullstack_db - POSTGRES_USER=developer - POSTGRES_PASSWORD=dev_password volumes: - postgres_data:/var/lib/postgresql/data - ./init.sql:/docker-entrypoint-initdb.d/init.sql networks: - fullstack-network healthcheck: test: ["CMD-SHELL", "pg_isready -U developer"] interval: 10s timeout: 5s retries: 5 networks: fullstack-network: driver: bridge volumes: postgres_data:

init.sql - Database Schema

-- Create users table CREATE TABLE IF NOT EXISTS users ( id SERIAL PRIMARY KEY, username VARCHAR(50) UNIQUE NOT NULL, email VARCHAR(100) UNIQUE NOT NULL, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); -- Create posts table CREATE TABLE IF NOT EXISTS posts ( id SERIAL PRIMARY KEY, user_id INTEGER REFERENCES users(id), title VARCHAR(200) NOT NULL, content TEXT, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); -- Insert sample data INSERT INTO users (username, email) VALUES ('john_doe', 'john@example.com'), ('jane_smith', 'jane@example.com'); INSERT INTO posts (user_id, title, content) VALUES (1, 'First Post', 'This is my first post!'), (2, 'Docker is Awesome', 'Learning Docker containers!');

🔄 Development Workflow

Terminal

$ docker-compose --version

Docker Compose version v2.23.0

$ Ready to start development environment...

🚀

Quick Start

Getting Started

# Clone the repository git clone https://github.com/yourrepo/fullstack-app.git cd fullstack-app # Start all services docker-compose up -d # View logs docker-compose logs -f # Access the application # Frontend: http://localhost:3000 # Backend API: http://localhost:5000 # PostgreSQL: localhost:5432

🛠️

Common Commands

Daily Development

# Rebuild after dependency changes docker-compose up -d --build # Stop all services docker-compose down # View specific service logs docker-compose logs -f backend # Access container shell docker-compose exec backend sh # Restart specific service docker-compose restart frontend # Clean up everything (including volumes) docker-compose down -v

💡

Development Tips

✅ Code changes in frontend/backend auto-reload without restart
✅ Database data persists across container restarts
✅ Use .dockerignore to exclude node_modules from build
✅ Environment variables configured in docker-compose.yml
✅ Services communicate via container names (service discovery)
✅ Health checks ensure database is ready before app starts