En liten server med Express

Bygg din egen server i Node.js och Express. Ditt första API svarar på sin första förfrågan.

Jag visar: sätta upp en server

Express är det mest populära paketet för att bygga servrar i Node.js – det gör jobbet till bara några rader. En server är ett separat projekt, isär från React-appen (kom ihåg: frontend och backend är två halvor). I terminalen:

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

mkdir skapar en mapp (make directory),
npm init -y sätter upp ett nytt Node.js-projekt (skapar package.json),
npm install express laddar ner Express.

Öppna mappen i VS Code och skapa en fil som heter 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

Och öppna http://localhost:3900/api/hello i webbläsaren. Ser du JSON-svaret? Du byggde precis en server. Ingen magi – 10 rader.

Vad som händer i koden:

require("express") – låna ett paket (serverversionen av import).
app.get("/api/hello", ...) – “svara på GET-förfrågningar på den här adressen.” Det paret adress + svar kallas ett endpoint.
response.json({...}) – skicka tillbaka JSON.
app.listen(3900) – lyssna på port 3900. (Vite kör på 3901, servern på 3900 – två program kan inte lyssna på samma port.)

Du stoppar servern med Ctrl+C. Och pass på: efter varje kodändring måste du stoppa och starta om den – en server är inte Vite, den uppdaterar sig inte själv.

Jag visar: en server med data

En server delar oftast ut data. Lägg till ett andra endpoint ovanför 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);
});

Starta om servern och öppna http://localhost:3900/api/results – din data, serverad via ett API. Så funkar varje stor webbplats (bara med en databas i stället för en array).

Nu är det din tur 💪

Få en server att köra efter guiden.
Lägg till ett endpoint med data från ditt projekt: 🏫 /api/menu (en array med måltider för veckan) · 🙋 /api/favorites (dina toppspel/böcker) · 🌍 /api/trips (en lista med resor) · ⚽ /api/results (matchresultat).
Lägg till ett lekfullt endpoint /api/random som returnerar ett annat meddelande varje gång:

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

Prova alla endpoints i webbläsaren – och försök sedan anropa ett med fetch() från konsolen, som du lärde dig i förra lektionen.

⚠️

“Cannot GET /api/…” betyder att endpointet inte finns – kolla stavning i adressen och om du startade om servern efter ändringen. “EADDRINUSE” betyder att port 3900 redan används – du har förmodligen en gammal server som kör i en annan terminal; hitta den och stoppa den (Ctrl+C).

✅

Kolla själv: Din server kör på port 3900 och svarar på flera endpoints med din egen JSON-data. Du kan frontend, du börjar på backend – allt som återstår är att koppla ihop dem. Det gör vi i nästa lektion med en gästbok.

Det här tar du med dig från lektionen

En server i Express: npm init -y, npm install express, node server.js, stoppa med Ctrl+C, starta om efter varje ändring.
Ett endpoint = en adress + ett svar: app.get("/api/something", (request, response) => response.json(...)).
Frontend (3901) och backend (3900) är två program på två portar.

Den här lektionen ingår i en betald nivå

Jag visar: sätta upp en server

Jag visar: en server med data

Nu är det din tur 💪

Det här tar du med dig från lektionen