Setting Up Docker for a Full-Stack Project: Node.js, React, and MongoDB

Introduction

Docker simplifies full-stack development by containerizing your application and its dependencies. This guide will walk you through setting up a Node.js backend, a React frontend, and a MongoDB database using Docker.

Prerequisites

Before starting, ensure you have:

Docker installed on your machine. Get Docker
Basic knowledge of Node.js, React, and MongoDB.

Project Structure

Here’s the directory structure for the project:

fullstack-docker/
├── backend/
│   ├── Dockerfile
│   ├── package.json
│   ├── server.js
├── frontend/
│   ├── Dockerfile
│   ├── package.json
│   ├── src/
├── docker-compose.yml

Setting Up the Backend (Node.js)

Step 1: Write the Node.js Server Code

Create a backend/server.js file:

const express = require('express')
const mongoose = require('mongoose')
const app = express()
const PORT = 5000

// Middleware
app.use(express.json())

// Connect to MongoDB
mongoose
  .connect('mongodb://mongo:27017/mydatabase', {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  })
  .then(() => console.log('Connected to MongoDB'))
  .catch((err) => console.error(err))

// Routes
app.get('/', (req, res) => {
  res.send('Hello from Node.js!')
})

app.listen(PORT, () => {
  console.log(`Server running on http://localhost:${PORT}`)
})

Step 2: Create the Backend Dockerfile

In backend/Dockerfile:

# Use Node.js LTS as the base image
FROM node:18

# Set working directory
WORKDIR /app

# Copy package.json and install dependencies
COPY package.json .
RUN npm install

# Copy the application code
COPY . .

# Expose the application port
EXPOSE 5000

# Start the server
CMD ["node", "server.js"]

Setting Up the Frontend (React)

Step 1: Create a React App

Use create-react-app to bootstrap the frontend:

npx create-react-app frontend

Step 2: Create the Frontend Dockerfile

In frontend/Dockerfile:

# Use Node.js LTS as the base image
FROM node:18

# Set working directory
WORKDIR /app

# Copy package.json and install dependencies
COPY package.json .
RUN npm install

# Copy the application code
COPY . .

# Expose the application port
EXPOSE 3000

# Start the React development server
CMD ["npm", "start"]

Setting Up MongoDB

No additional configuration is required for MongoDB when using Docker. It will be set up directly in docker-compose.yml.

Create the Docker Compose File

In the root directory, create docker-compose.yml:

version: '3.8'
services:
  backend:
    build:
      context: ./backend
    ports:
      - '5000:5000'
    depends_on:
      - mongo
    volumes:
      - ./backend:/app

  frontend:
    build:
      context: ./frontend
    ports:
      - '3000:3000'
    depends_on:
      - backend
    volumes:
      - ./frontend:/app

  mongo:
    image: mongo:6
    ports:
      - '27017:27017'
    volumes:
      - mongo-data:/data/db

volumes:
  mongo-data:

Running the Application

Step 1: Build the Docker Images

docker-compose build

Step 2: Start the Services

docker-compose up

Step 3: Verify Everything is Running

Backend: http://localhost:5000
Frontend: http://localhost:3000
MongoDB: Accessible internally via mongo service.

Stopping and Cleaning Up

Stop the services:

docker-compose down

To remove all containers, networks, and volumes:

docker-compose down --volumes

Conclusion

With this setup, you have a fully containerized full-stack project using Node.js, React, and MongoDB. This approach ensures a consistent development environment and simplifies deployment across different platforms.