Wat is een Server?

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

💡 Simpel voorbeeld

Jij: "Geef me alle workouts"
Server: "Hier zijn ze: [workout 1, 2, 3]"

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:

Methode Wat doet het? CRUD Voorbeeld
GET Data ophalen Read Toon alle workouts
POST Nieuwe data maken Create Maak workout aan
PATCH Data aanpassen Update Pas reps aan
DELETE Data verwijderen Delete Verwijder workout

💡 CRUD staat voor:

Create (POST) - Read (GET) - Update (PATCH) - Delete (DELETE)

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}`);
});
Regel voor regel:
  • import express - Laad Express
  • const app = express() - Maak server
  • const PORT = ... - Kies poort 4000
  • app.use(express.json()) - Kan JSON lezen
  • app.get('/', ...) - Route naar /
  • app.listen(PORT, ...) - Start server

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
  });
});
Uitleg:
  • app.get() - GET route
  • '/api/workouts' - URL pad
  • (req, res) => { } - Functie bij bezoek
  • req - Request (verzoek)
  • res - Response (antwoord)
  • res.json() - Stuur JSON terug

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
  });
});

💡 Wat is :id?

:id is een route parameter - een variabele waarde.

URL: /api/workouts/12345
Dan is req.params.id gelijk aan "12345"

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 }
  });
});
Uitleg:
  • app.post() - POST route
  • req.body - Data van gebruiker
  • { title, reps, load } - Haal velden uit body

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`
  });
});

Testen in Browser

Start je server:

npm run dev

Test GET routes

Open in browser:

Let op!

POST, PATCH en DELETE test je NIET in browser. Hiervoor gebruik je Postman (komt later).

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;

💡 Let op verschil:

In server.js: app.get('/api/workouts', ...)
In workoutRoutes.js: router.get('/', ...)

Waarom? Omdat we in server.js zeggen: gebruik /api/workouts als basis.

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}`);
});
Wat gebeurt hier?
  • import workoutRoutes - Laad routes bestand
  • app.use('/api/workouts', workoutRoutes) - Voor URLs met /api/workouts, gebruik workoutRoutes

Hoe werkt het?

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

Test opnieuw:

localhost:4000/api/workouts moet nog werken!

HTTP Status Codes

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

Code Betekenis Wanneer?
200 OK GET, PATCH, DELETE gelukt
201 Created POST gelukt (iets gemaakt)
400 Bad Request Foute input
404 Not Found Data bestaat niet
500 Server Error Bug in server

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' });

💡 Waarom belangrijk?

Je frontend checkt: "Status 200? Gelukt!" of "Status 404? Toon foutmelding!"

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

✅ Check of je hebt:

  • server.js met test route die werkt
  • Begrijpt GET, POST, PATCH, DELETE
  • workoutRoutes.js gemaakt in src/routes/
  • Alle 5 routes in workoutRoutes.js
  • server.js importeert workoutRoutes
  • localhost:4000/api/workouts werkt
  • Begrijpt req.params en req.body
  • Weet wat status codes zijn

Problemen oplossen

❌ "Cannot GET /api/workouts"

Oorzaak: Route bestaat niet of verkeerd geschreven

Oplossing:

  • Check app.use('/api/workouts', workoutRoutes) in server.js
  • Check import van workoutRoutes
  • Check router.get('/') in workoutRoutes (niet '/api/workouts'!)

❌ "req.body is undefined"

Oorzaak: Mist express.json() middleware

Oplossing: Voeg app.use(express.json()) toe VOOR routes

❌ "Cannot find module"

Oorzaak: Bestand bestaat niet of pad verkeerd

Oplossing:

  • Check of bestand in src/routes/ bestaat
  • Vergeet .js extensie niet!
  • Check ./src/routes/ (met punt!)

Volgende Stap

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

Database →

Koppel MongoDB aan je backend