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.

Jeg viser deg: opsetning af en server

Express er den mest populære pakke til at bygge servere i Node.js – den gjø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 oppretter en mappe (make directory),
npm init -y setter et nyt Node.js-projekt op (oppretter package.json),
npm install express downloader Express.

Åpne mappen i VS Code og lag en fil kalt 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");
});

Kjør den:

node server.js

Og åpne http://localhost:3900/api/hello i nettleseren. Ser du JSON-svaret? Du har nettopp bygget en server. Ingen magi – 10 linjer.

Hva 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 tilbake.
app.listen(3900) – lyt på port 3900. (Vite kjører på 3901, serveren på 3900 – to programmer kan ikke lytte på samme port.)

Du stopper serveren med Ctrl+C. Og pas på: etter hver kodeendring skal du stoppe og genstarte den – en server er ikke Vite, den oppdaterer sig ikke selv.

Jeg viser deg: en server med data

En server udleverer normalt data. Legg til 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 åpne http://localhost:3900/api/results – dine data, serveret gjennom en API. Nøyaktig sådan fungerer hver stor nettside (bare med en database i stedet for et array).

Nå er det din tur 💪

Få en server til at kjøre etter guiden.
Legg til et endpoint med data fra prosjektet ditt: 🏫 /api/menu (et array af måltider for ugen) · 🙋 /api/favorites (dine topspil/bøger) · 🌍 /api/trips (en liste over ture) · ⚽ /api/results (kampresultater).
Legg til et legende endpoint /api/random, der returnerer en anden melding 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 nettleseren – og prøv så at kalde ét med fetch() fra konsollen, som du lærte i siste leksjon.

⚠️

“Cannot GET /api/…” betyder, at endpointet ikke eksisterer – sjekk for en stavefeil i adressen og om du genstartede serveren etter endringen. “EADDRINUSE” betyder, at port 3900 allerede er i bruk – du har sandsynligvis en gammel server kjørende i en anden terminal; finn den og stop den (Ctrl+C).

✅

Sjekk deg selv: Din server kjører på port 3900 og svarer på flere endpoints med dine egne JSON-data. Du kjenner frontend, du er begyndt på backend – det eneste, der mangler, er at forbinde dem. Det gjør vi nøyaktig i neste leksjon med en gjestebok.

Dette tar du med deg fra leksjonen

En server i Express: npm init -y, npm install express, node server.js, stop med Ctrl+C, genstart etter hver endring.
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.