Server & Routes

Wat is een Server?

Een server is een programma dat luistert naar verzoeken (requests) en antwoorden (responses) terugstuurt.

Wat is Express?

Express is een framework waarmee je makkelijk een server bouwt. Het regelt complexe dingen automatisch.

HTTP Methodes (CRUD)

Je frontend gebruikt HTTP methodes om te zeggen wat het wil:

Je Eerste Express Server

Open server.js en plaats deze code:

// Importeer Express
import express from 'express';

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

// Haal PORT uit .env
const PORT = process.env.PORT || 4000;

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

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

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

Wat is middleware?

Middleware zijn functies die draaien tussen het ontvangen van een verzoek en het sturen van antwoord. express.json() leest JSON data.

Workout Routes Toevoegen

Voeg routes toe voor workouts. Tijdelijk in server.js, later in apart bestand.

Alle workouts ophalen (GET)

Voeg toe VOOR app.listen():

// GET alle workouts
app.get('/api/workouts', (req, res) => {
  res.json({ 
    message: 'Alle workouts',
    data: []  // Later echte data
  });
});

Eén workout ophalen (GET met ID)

// GET één workout
app.get('/api/workouts/:id', (req, res) => {
  const { id } = req.params;
  
  res.json({ 
    message: `Workout ${id}`,
    id: id
  });
});

Nieuwe workout maken (POST)

// POST nieuwe workout
app.post('/api/workouts', (req, res) => {
  const { title, reps, load } = req.body;
  
  res.json({ 
    message: 'Workout aangemaakt',
    data: { title, reps, load }
  });
});

Workout aanpassen (PATCH)

// PATCH workout
app.patch('/api/workouts/:id', (req, res) => {
  const { id } = req.params;
  
  res.json({ 
    message: `Workout ${id} aangepast`,
    updates: req.body
  });
});

Workout verwijderen (DELETE)

// DELETE workout
app.delete('/api/workouts/:id', (req, res) => {
  const { id } = req.params;

  res.json({
    message: `Workout ${id} verwijderd`
  });
});

Zie de cycle — browser → server → DB → terug

Je hebt nu de code gezien. Maar wat gebeurt er als je fetch('/api/workouts') doet? De request reist heen-en-weer tussen browser, server en database. Klik op een HTTP-method-knop en zie wat er stap voor stap gebeurt.

Testen in Browser

Start je server:

npm run dev

Test GET routes

Open in browser:

• localhost:4000/api/workouts - Alle workouts
• localhost:4000/api/workouts/123 - Eén workout

Routes Organiseren

Als je alles in server.js zet, wordt het onoverzichtelijk. Maak aparte bestanden per resource.

Stap 1: Maak route bestand

Maak: src/routes/workoutRoutes.js

// src/routes/workoutRoutes.js
import express from 'express';

// Maak router
const router = express.Router();

// GET alle workouts
router.get('/', (req, res) => {
  res.json({ message: 'GET alle workouts' });
});

// GET één workout
router.get('/:id', (req, res) => {
  const { id } = req.params;
  res.json({ message: `GET workout ${id}` });
});

// POST nieuwe workout
router.post('/', (req, res) => {
  res.json({ message: 'POST workout', data: req.body });
});

// PATCH workout
router.patch('/:id', (req, res) => {
  const { id } = req.params;
  res.json({ message: `PATCH workout ${id}` });
});

// DELETE workout
router.delete('/:id', (req, res) => {
  const { id } = req.params;
  res.json({ message: `DELETE workout ${id}` });
});

// Exporteer router
export default router;

Stap 2: Gebruik routes in server.js

// server.js
import express from 'express';
import workoutRoutes from './src/routes/workoutRoutes.js';

const app = express();
const PORT = process.env.PORT || 4000;

// Middleware
app.use(express.json());

// Routes
app.use('/api/workouts', workoutRoutes);

// Test route
app.get('/', (req, res) => {
  res.json({ message: 'Backend draait!' });
});

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

Hoe werkt het?

1. Express ziet: "Ah, dat begint met /api/workouts"
2. Stuurt door naar workoutRoutes.js
3. router.get('/') wordt uitgevoerd

HTTP Status Codes

Naast data stuur je een status code terug - vertelt frontend of het gelukt is.

Gebruik status codes:

// 200 - OK
res.status(200).json({ data: workouts });

// 201 - Created
res.status(201).json({ data: newWorkout });

// 400 - Bad Request
res.status(400).json({ error: 'Title verplicht' });

// 404 - Not Found
res.status(404).json({ error: 'Workout niet gevonden' });

// 500 - Server Error
res.status(500).json({ error: 'Er ging iets mis' });

Eindresultaat

Volledige server.js:

// server.js
import express from 'express';
import workoutRoutes from './src/routes/workoutRoutes.js';

const app = express();
const PORT = process.env.PORT || 4000;

// Middleware
app.use(express.json());

// Routes
app.use('/api/workouts', workoutRoutes);

// Test route
app.get('/', (req, res) => {
  res.json({ 
    message: 'Backend API draait!',
    endpoints: {
      workouts: '/api/workouts'
    }
  });
});

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

Checklist

Problemen oplossen

❌ "Cannot GET /api/workouts"

❌ "req.body is undefined"

❌ "Cannot find module"

Volgende Stap

Je hebt werkende API routes! Tijd om database te koppelen.

Database →

Koppel MongoDB aan je backend