Project Setup

Wat gaan we maken?

Je gaat een backend server bouwen. Dit is het "achtergrond" gedeelte waar:

• Data wordt opgeslagen (in een database)
• Gebruikers kunnen inloggen
• Je React frontend data kan ophalen
• Alles veilig verwerkt wordt

Stap 0: Basis Folders Aanmaken

Maak handmatig deze folders:

Windows & Mac

1. Maak een repository aan genaamd mern-workout
2. Clone je repository op je laptop en open in VSCode
3. In de folder mern-workout maak je folder backend

Open in VS Code

1. Open Visual Studio Code
2. File → Open Folder
3. Selecteer de workouts folder (niet backend!)

Terminal openen

In VS Code:

• Windows/Linux: Ctrl + `
• Mac: Cmd + `
• Of: View → Terminal

Navigeer naar backend

cd backend

Stap 1: Mappenstructuur

Maak een professionele structuur voor je backend.

Waarom een goede structuur?

• Code blijft overzichtelijk
• Je weet waar elk bestand hoort
• Makkelijk uitbreiden
• Samenwerken wordt simpel

De structuur:

workouts/
└── backend/
    ├── src/
    │   ├── controllers/      # Business logica
    │   ├── models/           # Database schemas
    │   ├── routes/           # API routes
    │   └── middleware/       # Middleware functies
    └── server.js             # Entry point

Folders aanmaken

In de terminal voor mac gebruikers (als je in backend zit):

mkdir -p src/controllers src/models src/routes src/middleware

In de terminal voor windows gebruikers (als je in backend zit):

mkdir src\controllers src\models src\routes src\middleware

Stap 2: NPM Initialiseren

Wat is NPM?

NPM (Node Package Manager) helpt je om:

• Code van anderen te downloaden
• Je project te beheren
• Scripts uit te voeren

Type in de terminal:

npm init -y

Stap 3: Package.json Aanpassen

Wat is package.json?

package.json is het "paspoort" van je project met:

• Naam van je project
• Welke packages je gebruikt
• Scripts om server te starten

Open package.json en vervang met:

{
  "name": "mern-workout",
  "version": "1.0.0",
  "description": "MERN Stack Backend",
  "type": "module",
  "main": "server.js",
  "scripts": {
    "dev": "node --watch --env-file=.env server.js",
    "start": "node --env-file=.env server.js"
  },
  "keywords": ["mern", "express", "mongodb"],
  "author": "Jouw Naam",
  "license": "ISC"
}

Stap 4: Dependencies Installeren

Wat zijn dependencies?

Code-pakketten van anderen die jij kunt gebruiken. Bouwblokken in plaats van alles zelf schrijven.

Packages installeren:

1. Express - De basis

npm install express

2. Mongoose - Database

npm install mongoose

3. CORS - Frontend verbinding

npm install cors

"dependencies": {
  "cors": "^2.8.5",
  "express": "^5.0.0",
  "mongoose": "^8.0.0"
}

Stap 5: .env Bestand

Wat is .env?

Een bestand met geheime informatie:

• Database wachtwoorden
• API sleutels
• Configuratie

Bestand aanmaken

1. Maak nieuw bestand in VS Code
2. Sla op als .env (met punt!)
3. Voeg toe:

# Server configuratie
PORT=4000

# MongoDB (later invullen)
MONGO_URI=

# Development of production
NODE_ENV=development

Stap 6: .gitignore

Wat is .gitignore?

Lijst van bestanden die Git moet negeren bij uploaden:

• Wachtwoorden (.env)
• Downloaded packages (node_modules)
• Tijdelijke bestanden

Bestand aanmaken

1. Maak nieuw bestand
2. Sla op als .gitignore
3. Voeg toe:

# Dependencies
node_modules/

# Geheime info
.env

# OS bestanden
.DS_Store
Thumbs.db

# Editor bestanden
.vscode/
.idea/

Stap 7: Je Eerste Server

Nu maken we eindelijk de server!

Bestand aanmaken

1. Maak nieuw bestand
2. Sla op als server.js
3. Voeg toe:

// Importeer Express
import express from 'express';

// Maak Express app
const app = express();

// Haal PORT uit .env (of gebruik 4000)
const PORT = process.env.PORT || 4000;

// Middleware: lees JSON
app.use(express.json());

// Test route - reageer op GET /
app.get('/', (req, res) => {
  res.json({ 
    message: 'Mijn eerste backend!',
    success: true
  });
});

// Start de server
app.listen(PORT, () => {
  console.log(`Server draait op http://localhost:${PORT}`);
});

Stap 8: Test Je Server!

In de terminal:

npm run dev

Test in browser

Ga naar: http://localhost:4000

Je ziet:

{
  "message": "Mijn eerste backend!",
  "success": true
}

Server stoppen

Druk Ctrl + C in de terminal.

Checklist

Je Project Structuur

workouts/
└── backend/
    ├── src/
    │   ├── controllers/
    │   ├── models/
    │   ├── routes/
    │   └── middleware/
    ├── node_modules/
    ├── .env
    ├── .gitignore
    ├── package.json
    ├── package-lock.json
    └── server.js

Problemen oplossen

❌ "Cannot find module 'express'"

❌ "Cannot use import statement"

❌ "Port 4000 is already in use"

Volgende Stap

Je eerste server draait! Nu gaan we routes en API endpoints toevoegen.

Server & Routes →

Bouw API endpoints voor je applicatie