Het opzetten van een lokale ontwikkelomgeving met Docker Desktop voor je MERN-stack (MongoDB, Express, React, Node.js) vereist het maken van Dockerfiles voor je applicatiecomponenten en een docker-compose.yml-bestand om alles te orchestreren. Hieronder vind je de stappen en voorbeeldbestanden om dit te realiseren: 1. Maak een projectstructuur: ``` /project-root │ ├── backend │ ├── Dockerfile │ ├── package.json │ └── (andere backend-bestanden) │ ├── frontend │ ├── Dockerfile │ ├── package.json │ └── (andere frontend-bestanden) │ └── docker-compose.yml ``` 2. Dockerfile voor de backend (Node.js/Express): ```dockerfile # backend/Dockerfile FROM node:14-alpine WORKDIR /app COPY package*.json ./ RUN npm install COPY . . EXPOSE 5000 CMD ["npm", "start"] ``` 3. Dockerfile voor de frontend (React): ```dockerfile # frontend/Dockerfile FROM node:14-alpine WORKDIR /app COPY package*.json ./ RUN npm install COPY . . RUN npm run build FROM nginx:alpine COPY --from=0 /app/build /usr/share/nginx/html EXPOSE 80 CMD ["nginx", "-g", "daemon off;"] ``` 4. docker-compose.yml om alles te verbinden: ```yaml version: '3.8' services: mongo: image: mongo:latest container_name: mongo ports: - "27017:27017" volumes: - mongo-data:/data/db backend: build: ./backend container_name: backend ports: - "5000:5000" environment: - MONGO_URI=mongodb://mongo:27017/jeDatabaseNaam depends_on: - mongo frontend: build: ./frontend container_name: frontend ports: - "3000:80" depends_on: - backend volumes: mongo-data: ``` 5. Stappen om te starten: - Zorg dat je alle bestanden correct hebt geplaatst. - Open een terminal in de projectroot. - Voer `docker-compose up --build` uit. - Wacht totdat alle images zijn opgebouwd en de containers draaien. - Bezoek `http://localhost:3000` voor je frontend. - De backend draait op `http://localhost:5000`. Deze setup zorgt dat je MongoDB, Express, React en Node.js componenten samenwerken in je lokale ontwikkelomgeving. Pas indien nodig de configuraties en poorten aan.

Hier is een stapsgewijze handleiding om je MERN-stack applicatie op te zetten met Docker Desktop: ### 1. Projectstructuur ``` jouw-project/ ├── backend/ │ ├── Dockerfile │ ├── package.json │ └── (andere backend bestanden) ├── frontend/ │ ├── Dockerfile │ ├── package.json │ └── (andere frontend bestanden) └── docker-compose.yml ``` ### 2. Backend Dockerfile (in /backend) ```dockerfile FROM node:18-alpine WORKDIR /app COPY package*.json ./ RUN npm install COPY . . EXPOSE 5000 CMD ["npm", "start"] ``` ### 3. Frontend Dockerfile (in /frontend) ```dockerfile FROM node:18-alpine WORKDIR /app COPY package*.json ./ RUN npm install COPY . . EXPOSE 3000 CMD ["npm", "start"] ``` ### 4. docker-compose.yml (in hoofdmap) ```yaml version: '3.8' services: mongodb: image: mongo:6.0 container_name: mern_mongodb ports: - "27017:27017" volumes: - mongodb_data:/data/db environment: - MONGO_INITDB_ROOT_USERNAME=admin - MONGO_INITDB_ROOT_PASSWORD=password backend: build: ./backend container_name: mern_backend ports: - "5000:5000" depends_on: - mongodb environment: - DB_CONNECTION=mongodb://admin:password@mongodb:27017 - DB_NAME=mernapp volumes: - ./backend:/app - /app/node_modules frontend: build: ./frontend container_name: mern_frontend ports: - "3000:3000" depends_on: - backend volumes: - ./frontend:/app - /app/node_modules stdin_open: true tty: true volumes: mongodb_data: ``` ### 5. Configuratie stappen: **Backend aanpassingen:** - Zorg dat je Express server verbinding maakt met: `mongodb://admin:password@mongodb:27017/mernapp` - Voeg CORS configuratie toe voor communicatie met frontend **Frontend aanpassingen:** - Configureer API calls naar: `http://localhost:5000` ### 6. Uitvoeren: ```bash # Start alle services docker-compose up --build # Of in detached mode docker-compose up -d --build ``` ### 7. Controleer of alles werkt: - Frontend: http://localhost:3000 - Backend API: http://localhost:5000 - MongoDB: localhost:27017 ### Belangrijke tips: - Gebruik `.dockerignore` bestanden om node_modules en logbestanden uit te sluiten - Voor productie, gebruik multi-stage builds en environment variabelen - Pas poorten aan indien nodig in de compose file - Voor development: de volumes zorgen voor live reloading Met deze setup heb je een volledig geïsoleerde ontwikkelomgeving waar alle componenten automatisch met elkaar communiceren!