Een kleine server met Express

Bouw je eigen server in Node.js en Express. Je eerste API beantwoordt zijn eerste verzoek.

Ik laat je zien: een server opzetten

Express is het populairste package om servers in Node.js te bouwen – het maakt er een paar regels van. Een server is een apart project, los van de React-app (onthoud: frontend en backend zijn twee helften). In de terminal:

cd Desktop
mkdir my-server
cd my-server
npm init -y
npm install express

mkdir maakt een map (make directory),
npm init -y zet een nieuw Node.js-project op (maakt package.json),
npm install express downloadt Express.

Open de map in VS Code en maak een bestand server.js:

const express = require("express");
const app = express();

// When someone sends a GET to /api/hello, respond
app.get("/api/hello", (request, response) => {
  response.json({ message: "Hi! This is your own server. 🎉" });
});

app.listen(3900, () => {
  console.log("Server running at http://localhost:3900");
});

Start hem:

node server.js

En open http://localhost:3900/api/hello in je browser. Zie je het JSON-antwoord? Je bouwde net een server. Geen magie – 10 regels.

Wat er in de code gebeurt:

require("express") – leen een package (de serverkant van import).
app.get("/api/hello", ...) – “reageer op GET-verzoeken op dit adres.” Dat paar adres + antwoord heet een endpoint.
response.json({...}) – stuur JSON terug.
app.listen(3900) – luister op poort 3900. (Vite draait op 3901, de server op 3900 – twee programma’s kunnen niet op dezelfde poort luisteren.)

Je stopt de server met Ctrl+C. En let op: na elke codewijziging moet je stoppen en opnieuw starten – een server is geen Vite, hij ververst zichzelf niet.

Ik laat je zien: een server met data

Een server deelt meestal data uit. Voeg een tweede endpoint toe boven listen:

const results = [
  { opponent: "Lakeside", score: "3:1", home: true },
  { opponent: "Northgate", score: "2:2", home: false },
  { opponent: "Elmwood", score: "4:0", home: true },
];

app.get("/api/results", (request, response) => {
  response.json(results);
});

Herstart de server en open http://localhost:3900/api/results – jouw data, via een API. Zo werkt elke grote website (alleen met een database in plaats van een array).

Nu jij 💪

Laat een server draaien volgens de handleiding.
Voeg een endpoint toe met data uit je project: 🏫 /api/menu (array met maaltijden van de week) · 🙋 /api/favorites (je topgames/boeken) · 🌍 /api/trips (lijst met reizen) · ⚽ /api/results (wedstrijduitslagen).
Voeg een speels endpoint /api/random toe dat elke keer een ander bericht teruggeeft:

const messages = ["We're winning today!", "Practice at 5 PM!", "Let's go, Eagles!"];

app.get("/api/random", (request, response) => {
  const random = messages[Math.floor(Math.random() * messages.length)];
  response.json({ message: random });
});

Probeer alle endpoints in je browser – en roep er daarna één aan met fetch() uit de console, zoals in de vorige les.

⚠️

“Cannot GET /api/…” betekent dat het endpoint niet bestaat – controleer een typefout in het adres en of je de server na de wijziging herstart hebt. “EADDRINUSE” betekent dat poort 3900 al in gebruik is – je hebt waarschijnlijk een oude server in een andere terminal; zoek hem en stop (Ctrl+C).

✅

Controleer jezelf: Je server draait op poort 3900 en antwoordt op meerdere endpoints met je eigen JSON-data. Je kent de frontend, je begint aan de backend – alleen ze koppelen blijft over. Dat doen we in de volgende les met een gastenboek.

Wat neem je mee uit deze les

Een server in Express: npm init -y, npm install express, node server.js, stop met Ctrl+C, herstart na elke wijziging.
Een endpoint = een adres + een antwoord: app.get("/api/something", (request, response) => response.json(...)).
De frontend (3901) en de backend (3900) zijn twee programma’s op twee poorten.

Een kleine server met Express

Deze les maakt deel uit van een betaald niveau

Ik laat je zien: een server opzetten

Ik laat je zien: een server met data

Nu jij 💪

Wat neem je mee uit deze les