Setting Up a Full-Stack React (Vite) + Node.js + MongoDB App in Docker

Introduction

Setting up a React Native development environment with Docker ensures a clean workspace, avoids dependency conflicts, and simplifies collaboration. This guide details the entire process, from setting up Docker containers for the frontend, backend, and MongoDB database to resolving common errors.

---

Prerequisites

• Docker and Docker Compose installed on your system.

• A basic understanding of React, Node.js, and MongoDB.

---

Project Structure

EDairy/
│── backend/
│   ├── Dockerfile
│   ├── server.js
│   ├── config/
│   │   ├── database.js
│   ├── package.json
│── frontend/
│   ├── Dockerfile
│   ├── package.json
│── mongo-init.js
│── docker-compose.yml
│── .env

---

Writing the Docker Configuration

1. docker-compose.yml

This file defines services for MongoDB, the backend, and the frontend.

version: '3.8'

services:
  mongodb:
    image: mongo
    container_name: mongo-container
    restart: always
    ports:
      - "27017:27017"
    volumes:
      - mongodb_data:/data/db
      - ./mongo-init.js:/docker-entrypoint-initdb.d/mongo-init.js:ro
    environment:
      MONGO_INITDB_ROOT_USERNAME: your_username
      MONGO_INITDB_ROOT_PASSWORD: your_password 
      MONGO_INITDB_DATABASE: your_database

  backend:
    build: ./backend
    container_name: backend-container
    restart: always
    ports:
      - "4000:4000"
    depends_on:
      - mongodb
    env_file:
      - .env
    volumes:
      - ./backend:/app
      - /app/node_modules
    command: npm start

  frontend:
    build: ./frontend
    container_name: frontend-container
    restart: always
    ports:
      - "5173:5173"
    depends_on:
      - backend
    env_file:
      - .env
    volumes:
      - ./frontend:/app
      - /app/node_modules
    command: npm run dev

volumes:
  mongodb_data:

---

2. MongoDB Initialization Script (mongo-init.js)

This script initializes the database with a user.

db.createUser({
  user: "your_user",
  pwd: "your_password",
  roles: [{ role: "readWrite", db: "yourDB" }]
});

---

3. Backend Dockerfile

Defines the backend container.

FROM node:18
WORKDIR /app
COPY package.json .
RUN npm install
COPY . .
EXPOSE 4000
CMD ["npm", "start"]

---

4. Frontend Dockerfile

Defines the frontend container.

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

---

Setting Up Environment Variables (.env)

MONGO_URI=mongodb://your_username:your_password@mongodb:27017/edairy?authSource=admin
PORT=4000

---

Running the Project

Run the following command to start all services:

docker-compose up --build

To stop the containers:

docker-compose down

---

Debugging Issues

1. MongoDB Authentication Failed

Error:

MongoServerError: Authentication failed.

Solution: Ensure the username and password in .env match the mongo-init.js script.

2. Frontend Not Running on Exposed Port

Error:

VITE running but not accessible

Solution: Use --host in the package.json script:

"dev": "vite --host"

---

Conclusion

Using Docker for MERN development simplifies the setup and ensures a consistent environment. This guide covered setting up containers, initializing the database, resolving issues, and running the project.