En lille server med Express

Byg din egen server i Node.js og Express. Din første API svarer på sin første forespørgsel.

Vis mig: opsætning af en server

Express er den mest populære pakke til at bygge servere i Node.js – den gør jobbet til bare et par linjer. En server er et separat projekt, adskilt fra React-appen (husk: frontend og backend er to halvdele). I terminalen:

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

mkdir opretter en mappe (make directory),
npm init -y sætter et nyt Node.js-projekt op (opretter package.json),
npm install express downloader Express.

Åbn mappen i VS Code og opret en fil kaldet 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");
});

Kør den:

node server.js

Og åbn http://localhost:3900/api/hello i din browser. Ser du JSON-svaret? Du har lige bygget en server. Ingen magi – 10 linjer.

Hvad der sker i koden:

require("express") – lån en pakke (server-side-versionen af import).
app.get("/api/hello", ...) – “svar på GET-forespørgsler på denne adresse.” Det par af adresse + svar kaldes et endpoint.
response.json({...}) – send JSON tilbage.
app.listen(3900) – lyt på port 3900. (Vite kører på 3901, serveren på 3900 – to programmer kan ikke lytte på samme port.)

Du stopper serveren med Ctrl+C. Og pas på: efter hver kodeændring skal du stoppe og genstarte den – en server er ikke Vite, den opdaterer sig ikke selv.

Vis mig: en server med data

En server udleverer normalt data. Tilføj et andet endpoint over 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);
});

Genstart serveren og åbn http://localhost:3900/api/results – dine data, serveret gennem en API. Præcis sådan virker enhver stor hjemmeside (bare med en database i stedet for et array).

Nu er det din tur 💪

Få en server til at køre efter guiden.
Tilføj et endpoint med data fra dit projekt: 🏫 /api/menu (et array af måltider for ugen) · 🙋 /api/favorites (dine topspil/bøger) · 🌍 /api/trips (en liste over ture) · ⚽ /api/results (kampresultater).
Tilføj et legende endpoint /api/random, der returnerer en anden besked hver gang:

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

Prøv alle endpoints i din browser – og prøv så at kalde ét med fetch() fra konsollen, som du lærte i sidste lektion.

⚠️

“Cannot GET /api/…” betyder, at endpointet ikke eksisterer – tjek for en stavefejl i adressen og om du genstartede serveren efter ændringen. “EADDRINUSE” betyder, at port 3900 allerede er i brug – du har sandsynligvis en gammel server kørende i en anden terminal; find den og stop den (Ctrl+C).

✅

Tjek dig selv: Din server kører på port 3900 og svarer på flere endpoints med dine egne JSON-data. Du kender frontend, du er begyndt på backend – det eneste, der mangler, er at forbinde dem. Det gør vi præcis i næste lektion med en gæstebog.

Det tager du med fra denne lektion

En server i Express: npm init -y, npm install express, node server.js, stop med Ctrl+C, genstart efter hver ændring.
Et endpoint = en adresse + et svar: app.get("/api/something", (request, response) => response.json(...)).
Frontend (3901) og backend (3900) er to programmer på to porte.