Standardize Local Development Environment with Docker Compose

[rishabh0510rishabh]

Description

Currently, setting up the local development environment requires manually installing specific versions of Node.js and MongoDB, as well as managing separate terminal processes for the client and server. This often leads to "it works on my machine" inconsistencies and increases onboarding time for new contributors.

The goal of this issue is to create a fully containerized environment for the entire MERN stack using Docker Compose. This involves defining Dockerfiles for both the frontend and backend services, setting up a MongoDB container, and configuring network communication between these containers.

Technical Impact

• Onboarding: Reduces setup time from minutes/hours of configuration to a single command.
• Consistency: Eliminates environment-specific bugs caused by varying Node.js or MongoDB versions across different developer machines.
• Isolation: Keeps project dependencies isolated from the host operating system.

Proposed Solution

1. Backend Dockerization:
   • Create a server/Dockerfile to build the Node.js/Express backend.
   • Ensure appropriate ports are exposed.
2. Frontend Dockerization:
   • Create a client/Dockerfile to build the React frontend.
3. Docker Compose:
   • Create a docker-compose.yml file in the root directory.
   • Define services for frontend, backend, and database (MongoDB image).
   • Configure volumes for data persistence (MongoDB) and hot-reloading (for development).
   • Set up internal networking so the backend can communicate with the database container.
4. Configuration:
   • Add a .dockerignore file to exclude node_modules and local logs.

Likely Affected Files

• docker-compose.yml (new)
• client/Dockerfile (new)
• server/Dockerfile (new)
• .dockerignore (new)

Verification Steps

To verify that the Docker setup is working correctly:

1. Ensure Docker Desktop or the Docker engine is running on your machine.
2. Navigate to the project root and run docker-compose up --build.
3. Verify that three containers (frontend, backend, and db) spin up successfully without errors in the terminal logs.
4. Open a browser and navigate to http://localhost:3000 (or the configured client port) to ensure the frontend loads.
5. Perform an action that requires an API call (e.g., logging in or fetching expenses) to verify the frontend can talk to the backend and the backend can talk to the database.
6. Stop the containers (Ctrl+C or docker-compose down) and restart them to ensure data persistence remains intact.

Labels: ECWoC26

[github-actions]

Thank you for raising this issue!

We'll review it as soon as possible. We truly appreciate your contributions! ✨

Meanwhile make sure you've visited the README.md, CONTRIBUTING.md, and CODE_OF_CONDUCT.md before creating a PR for this. Also, please do NOT create a PR until this issue has been assigned to you. 😊

[github-actions]

⚠️ Inactivity Warning

  @rishabh0510rishabh, this issue has been inactive for **15 hours**.

  Please provide an update within the next **15 hours**, or you may be **automatically unassigned**.

[github-actions]

⚠️ Inactivity Warning

  @rishabh0510rishabh, this issue has been inactive for **15 hours**.

  Please provide an update within the next **15 hours**, or you may be **automatically unassigned**.

[github-actions]

⚠️ Inactivity Warning

  @rishabh0510rishabh, this issue has been inactive for **15 hours**.

  Please provide an update within the next **15 hours**, or you may be **automatically unassigned**.

[github-actions]

⚠️ Inactivity Warning

  @rishabh0510rishabh, this issue has been inactive for **15 hours**.

  Please provide an update within the next **15 hours**, or you may be **automatically unassigned**.

[github-actions]

⚠️ Inactivity Warning

  @rishabh0510rishabh, this issue has been inactive for **15 hours**.

  Please provide an update within the next **15 hours**, or you may be **automatically unassigned**.

[github-actions]

Closed automatically via merged PR #625.