Step-by-Step Guide: Dockerize Node.js, React, MongoDB App

fullstack-docker-app/
├── backend/
│   ├── node_modules/
│   ├── package.json
│   ├── server.js
│   └── Dockerfile
├── frontend/
│   ├── build/
│   ├── node_modules/
│   ├── public/
│   ├── src/
│   ├── package.json
│   ├── nginx.conf
│   └── Dockerfile
└── docker-compose.yml

mkdir backend
cd backend
npm init -y

npm install express mongoose cors

// backend/server.js
const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');

const app = express();
app.use(cors());
app.use(express.json());

const PORT = process.env.PORT || 5000;
const MONGO_URI = process.env.MONGO_URI || 'mongodb://database:27017/mydatabase';

// --- MongoDB Connection ---
mongoose.connect(MONGO_URI)
    .then(() => console.log('MongoDB Connected...'))
    .catch(err => console.log(err));

// --- Mongoose Schema and Model ---
const MessageSchema = new mongoose.Schema({
    text: { type: String, required: true },
    timestamp: { type: Date, default: Date.now }
});
const Message = mongoose.model('Message', MessageSchema);

// --- API Routes ---
// Get all messages
app.get('/api/messages', async (req, res) => {
    try {
        const messages = await Message.find().sort({ timestamp: -1 });
        res.json(messages);
    } catch (err) {
        res.status(500).json({ message: 'Error fetching messages' });
    }
});

// Post a new message
app.post('/api/messages', async (req, res) => {
    const newMessage = new Message({ text: req.body.text });
    try {
        const savedMessage = await newMessage.save();
        res.status(201).json(savedMessage);
    } catch (err) {
        res.status(400).json({ message: 'Error posting message' });
    }
});

app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

# backend/Dockerfile

# Use an official Node.js runtime as a parent image
FROM node:18-alpine

# Set the working directory in the container
WORKDIR /app

# Copy package.json and package-lock.json to the working directory
# This step is separated to leverage Docker's layer caching
COPY package*.json ./

# Install any needed packages
RUN npm install

# Copy the rest of the application's source code
COPY . .

# Make port 5000 available to the world outside this container
EXPOSE 5000

# Define the command to run the app when the container starts
CMD [ "node", "server.js" ]

npx create-react-app frontend

// frontend/src/App.js
import React, { useState, useEffect } from 'react';
import './App.css';

function App() {
    const [messages, setMessages] = useState([]);
    const [newMessage, setNewMessage] = useState('');
    const [error, setError] = useState('');

    // The backend URL will be proxied by Nginx
    const API_URL = '/api/messages';

    useEffect(() => {
        fetch(API_URL)
            .then(res => res.json())
            .then(data => setMessages(data))
            .catch(err => setError('Could not fetch messages. Is the backend running?'));
    }, []);

    const handleSubmit = (e) => {
        e.preventDefault();
        if (!newMessage.trim()) return;

        fetch(API_URL, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ text: newMessage }),
        })
        .then(res => res.json())
        .then(data => {
            setMessages([data, ...messages]);
            setNewMessage('');
            setError('');
        })
        .catch(err => setError('Failed to post message.'));
    };

    return (
        <div className="App">
            <header className="App-header">
                <h1>Full-Stack Message Board</h1>
                <p className="subtitle">Dockerized with Node.js, React & Nginx</p>
                
                {error && <p className="error-message">{error}</p>}

                <form onSubmit={handleSubmit} className="message-form">
                    <input
                        type="text"
                        value={newMessage}
                        onChange={(e) => setNewMessage(e.target.value)}
                        placeholder="Write a new message..."
                    />
                    <button type="submit">Post</button>
                </form>

                <div className="message-list">
                    {messages.map((msg) => (
                        <div key={msg._id} className="message-item">
                            <p>{msg.text}</p>
                            <span>{new Date(msg.timestamp).toLocaleString()}</span>
                        </div>
                    ))}
                </div>
            </header>
        </div>
    );
}

export default App;

/* frontend/src/App.css */
.App { text-align: center; background-color: #282c34; min-height: 100vh; font-size: calc(10px + 2vmin); color: white; }
.App-header { padding: 20px; }
.subtitle { color: #61dafb; font-size: 0.8em; margin-top: -15px; }
.message-form { margin: 20px 0; }
.message-form input { padding: 10px; font-size: 1em; border-radius: 5px; border: none; margin-right: 10px; width: 300px; }
.message-form button { padding: 10px 20px; font-size: 1em; border-radius: 5px; border: none; background-color: #61dafb; color: #282c34; cursor: pointer; }
.message-list { margin-top: 20px; display: flex; flex-direction: column; align-items: center; }
.message-item { background-color: #3a3f4a; border-radius: 8px; padding: 10px 20px; margin-bottom: 10px; width: 400px; text-align: left; }
.message-item p { margin: 0; }
.message-item span { font-size: 0.7em; color: #aaa; }
.error-message { color: #ff6b6b; background-color: #4a3a3a; padding: 10px; border-radius: 5px; }

# frontend/nginx.conf
server {
  listen 80;

  # Handle requests for the React App
  location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    # This is necessary for Single Page Applications (SPAs)
    # It ensures that all routes are directed to index.html
    try_files $uri $uri/ /index.html;
  }

  # Handle API requests
  location /api {
    # Forward requests to our backend service
    # The name 'backend' comes from our docker-compose service name
    proxy_pass http://backend:5000; 
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
  }

  # Optional: Hide Nginx version
  server_tokens off;
}

# frontend/Dockerfile

# --- Stage 1: Build the React App ---
# Use a Node image to build our static files
FROM node:18-alpine AS builder

WORKDIR /app

# Copy package files and install dependencies
COPY package*.json ./
RUN npm install

# Copy the rest of the source code
COPY . .

# Build the production-ready static files
RUN npm run build

# --- Stage 2: Serve the app with Nginx ---
# Use a lightweight Nginx image for the final production image
FROM nginx:stable-alpine

# Copy the built static files from the 'builder' stage
COPY --from=builder /app/build /usr/share/nginx/html

# Copy our custom Nginx configuration
COPY nginx.conf /etc/nginx/conf.d/default.conf

# Expose port 80 to the outside world
EXPOSE 80

# Start Nginx in the foreground
CMD ["nginx", "-g", "daemon off;"]

# docker-compose.yml
version: '3.8'

services:
  # Backend Service (Node.js API)
  backend:
    build: ./backend
    container_name: backend-api
    ports:
      - "5000:5000"
    environment:
      - MONGO_URI=mongodb://database:27017/mydatabase
    depends_on:
      - database
    volumes:
      # Mounts local 'backend' folder into container for live-reloading
      - ./backend:/app
      # This anonymous volume prevents local node_modules from overwriting container's
      - /app/node_modules

  # Frontend Service (React + Nginx)
  frontend:
    build: ./frontend
    container_name: frontend-client
    ports:
      # Map host port 3000 to container port 80 (where Nginx listens)
      - "3000:80" 
    depends_on:
      - backend

  # Database Service (MongoDB)
  database:
    image: mongo:latest
    container_name: mongodb
    ports:
      - "27017:27017"
    volumes:
      # This named volume persists data even if the container is removed
      - mongodb_data:/data/db

# Named volume for data persistence
volumes:
  mongodb_data:

docker-compose up --build