A Beginner's Guide to Dockerizing a Full-Stack Node.js and React Application with MongoDB Using Docker Compose

ghassenyaa — Wed, 16 Oct 2024 16:17:29 +0000

Docker is a powerful tool for containerizing applications, enabling developers to package their code and dependencies into a portable, lightweight unit. This guide is designed for beginners who want to containerize a simple Node.js backend, a React frontend, and MongoDB using Docker, along with Docker Compose to orchestrate all containers.

Prerequisites
Before we begin, ensure you have the following installed:

Node.js
Docker
Docker Compose

Step 1: Setting Up Your Project Structure

Let’s assume you have the following directory structure:

/my-app
│
├── backend (Node.js app)
│   ├── package.json
│   └── server.js
├── frontend (React app)
│   ├── package.json
│   └── src
├── docker-compose.yml
└── README.md

We will create a Dockerfile for both the Node.js and React applications, and then configure a docker-compose.yml file to manage the services, including MongoDB.

Step 2: Dockerizing the Node.js App (Backend)

In the /backend directory, create a file named Dockerfile:

# Use the official Node.js image
FROM node:18

# Set the working directory in the container
WORKDIR /usr/src/app

# Copy package.json and package-lock.json
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the rest of the application code
COPY . .

# Expose port 5000 (or whichever port your Node.js app uses)
EXPOSE 5000

# Command to run your application
CMD ["node", "server.js"]

This Dockerfile defines:

A base Node.js image.
Instructions to copy your Node.js app code and install dependencies.
A command to start the app.

Step 3: Dockerizing the React App (Frontend)

In the /frontend directory, create another Dockerfile:

# Use the official Node.js image
FROM node:18

# Set the working directory in the container
WORKDIR /usr/src/app

# Copy package.json and package-lock.json
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the rest of the application code
COPY . .

# Build the React application for production
RUN npm run build

# Install an HTTP server to serve the static files
RUN npm install -g serve

# Expose port 3000
EXPOSE 3000

# Serve the React application
CMD ["serve", "-s", "build"]

This Dockerfile does the following:

Uses the official Node.js image.
Installs the app dependencies.
Builds the React app and serves it on port 3000 using the serve package.

Step 4: Setting Up MongoDB

MongoDB is easy to run inside a Docker container. We don't need to create a separate Dockerfile for it. Instead, we will pull an official MongoDB image when configuring docker-compose.yml.

Step 5: Creating the docker-compose.yml File

The docker-compose.yml file orchestrates all the containers: backend, frontend, and MongoDB. Create this file at the root of your project (/my-app).

version: '3'
services:
  backend:
    build: ./backend
    ports:
      - '5000:5000'
    volumes:
      - ./backend:/usr/src/app
    depends_on:
      - mongo
    environment:
      MONGO_URI: mongodb://mongo:27017/mydb
  frontend:
    build: ./frontend
    ports:
      - '3000:3000'
    volumes:
      - ./frontend:/usr/src/app
    depends_on:
      - backend
  mongo:
    image: mongo:5
    ports:
      - '27017:27017'
    volumes:
      - mongo-data:/data/db
volumes:
  mongo-data:

Step 6: Running the Application

Once everything is set up, navigate to your project directory and run the following command:

docker-compose up --build

This command will:

Build the Node.js and React Docker images.
Pull the MongoDB image from Docker Hub.
Start all services (backend, frontend, and MongoDB) together.

Accessing the Application:

The Node.js backend should be accessible at http://localhost:5000.
The React frontend should be accessible at http://localhost:3000.

Step 7: Testing the Application

You can now test your Node.js backend and React frontend together. For instance:

Your backend could expose a /api route that stores and retrieves data from MongoDB.
Your frontend could send requests to the backend API (e.g., using Axios or Fetch).

Make sure the backend's API base URL is configured correctly in the React app (e.g., using environment variables).

Step 8: Stopping and Cleaning Up Containers

When you're done testing or developing, you can stop and remove all the containers and associated resources with the following command:

docker-compose down

If you wish to remove the persisted MongoDB data volume as well:

docker-compose down -v

Conclusion

You have now successfully Dockerized a Node.js backend, React frontend, and MongoDB using Docker Compose! This setup allows you to run all services in separate containers, ensuring a consistent and portable environment across different machines.

With Docker, you can easily share your entire application stack, including its dependencies, with your team or deploy it in any Docker-supported environment.

Additional Resources

To further enhance your Docker knowledge, you can explore:

Good luck with your Docker journey!

DEV Community: ghassenyaa