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!
Top comments (1)
Nice Read