Malý server v Expressu · Programuj s Martinem

Postavíš vlastní server v Node.js a Expressu. Tvoje první API odpoví na první požadavek.

Ukaž mi to: založení serveru

Express je nejoblíbenější balíček pro stavbu serverů v Node.js – dělá z toho pár řádků. Server je samostatný projekt, oddělený od React aplikace (pamatuj: frontend a backend jsou dvě půlky). V terminálu:

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

mkdir vyrobí složku (make directory),
npm init -y založí nový Node.js projekt (vytvoří package.json),
npm install express stáhne Express.

Otevři složku ve VS Code a vytvoř soubor server.js:

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

// Když někdo pošle GET na /api/pozdrav, odpověz
aplikace.get("/api/pozdrav", (pozadavek, odpoved) => {
  odpoved.json({ zprava: "Ahoj! Tady tvůj vlastní server. 🎉" });
});

aplikace.listen(3900, () => {
  console.log("Server běží na http://localhost:3900");
});

Spusť ho:

node server.js

A otevři v prohlížeči http://localhost:3900/api/pozdrav. Vidíš JSON odpověď? Právě jsi postavil(a) server. Žádná magie – 10 řádků.

Co se v kódu děje:

require("express") – půjč si balíček (serverová obdoba import).
aplikace.get("/api/pozdrav", ...) – „na téhle adrese odpovídej na GET požadavky”. Té dvojici adresa + odpověď se říká endpoint.
odpoved.json({...}) – pošli zpátky JSON.
aplikace.listen(3900) – poslouchej na portu 3900. (Vite běží na 3901, server na 3900 – dva programy nemůžou poslouchat na stejném portu.)

Server vypneš Ctrl+C. A pozor: po každé změně kódu ho musíš vypnout a zapnout znovu – server není Vite, sám se neobnoví.

Ukaž mi to: server s daty

Server obvykle rozdává data. Přidej nad listen druhý endpoint:

const vysledky = [
  { souper: "Lipová", skore: "3:1", doma: true },
  { souper: "Rohatec", skore: "2:2", doma: false },
  { souper: "Kyjov", skore: "4:0", doma: true },
];

aplikace.get("/api/vysledky", (pozadavek, odpoved) => {
  odpoved.json(vysledky);
});

Restartuj server a otevři http://localhost:3900/api/vysledky – tvoje data, servírovaná přes API. Přesně takhle (jen s databází místo pole) funguje každý velký web.

Teď ty 💪

Rozjeď server podle návodu.
Přidej endpoint s daty svého projektu: 🏫 /api/jidelnicek (pole jídel na týden) · 🙋 /api/oblibene (tvoje top hry/knihy) · 🌍 /api/vylety (seznam výletů) · ⚽ /api/vysledky (výsledky zápasů).
Přidej hravý endpoint /api/nahoda, který vrátí pokaždé jinou hlášku:

const hlasky = ["Dnes to vyhrajeme!", "Trénink v 17:00!", "Sokol do toho!"];

aplikace.get("/api/nahoda", (pozadavek, odpoved) => {
  const nahodna = hlasky[Math.floor(Math.random() * hlasky.length)];
  odpoved.json({ hlaska: nahodna });
});

Vyzkoušej všechny endpointy v prohlížeči – a pak si zkus jeden zavolat přes fetch() z konzole, jak umíš z minulé lekce.

⚠️

„Cannot GET /api/…” znamená, že endpoint neexistuje – zkontroluj překlep v adrese a jestli jsi server po změně restartoval(a). „EADDRINUSE” znamená, že port 3900 už někdo používá – nejspíš ti běží starý server v jiném terminálu; najdi ho a vypni (Ctrl+C).

✅

Kontrola: Tvůj server běží na portu 3900 a odpovídá na několika endpointech vlastními daty v JSON. Frontend umíš, backend začínáš – zbývá je propojit. Přesně to uděláme v příští lekci s návštěvní knihou.

Co si z téhle lekce odnést

Server v Expressu: npm init -y, npm install express, node server.js, vypnutí Ctrl+C, po změně restart.
Endpoint = adresa + odpověď: aplikace.get("/api/neco", (pozadavek, odpoved) => odpoved.json(...)).
Frontend (3901) a backend (3900) jsou dva programy na dvou portech.