Mały serwer w Express

Zbudujesz własny serwer w Node.js i Express. Twoje pierwsze API odpowie na pierwsze żądanie.

Pokażę ci: zakładanie serwera

Express to najpopularniejszy pakiet do budowania serwerów w Node.js – zamienia robotę w kilka linii. Serwer to osobny projekt, osobno od aplikacji React (pamiętasz: frontend i backend to dwie połowy). W terminalu:

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

mkdir tworzy folder (make directory),
npm init -y zakłada nowy projekt Node.js (tworzy package.json),
npm install express pobiera Express.

Otwórz folder w VS Code i utwórz plik 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");
});

Uruchom:

node server.js

I otwórz w przeglądarce http://localhost:3900/api/hello. Widzisz odpowiedź JSON? Właśnie zbudowałeś serwer. Żadnej magii – 10 linii.

Co się dzieje w kodzie:

require("express") – pożycz pakiet (serwerowa wersja import).
app.get("/api/hello", ...) – „odpowiadaj na żądania GET pod tym adresem.” Ta para adres + odpowiedź nazywa się endpoint.
response.json({...}) – odeślij JSON.
app.listen(3900) – słuchaj na porcie 3900. (Vite działa na 3901, serwer na 3900 – dwa programy nie mogą słuchać na tym samym porcie.)

Serwer zatrzymujesz Ctrl+C. I uważaj: po każdej zmianie w kodzie musisz go zatrzymać i uruchomić znowu – serwer to nie Vite, sam się nie odświeża.

Pokażę ci: serwer z danymi

Serwer zwykle rozdaje dane. Dodaj drugi endpoint nad 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);
});

Zrestartuj serwer i otwórz http://localhost:3900/api/results – twoje dane, serwowane przez API. Dokładnie tak działa każda duża strona (tylko z bazą danych zamiast tablicy).

Teraz ty 💪

Uruchom serwer według przewodnika.
Dodaj endpoint z danymi z twojego projektu: 🏫 /api/menu (tablica posiłków na tydzień) · 🙋 /api/favorites (twoje ulubione gry/książki) · 🌍 /api/trips (lista wycieczek) · ⚽ /api/results (wyniki meczów).
Dodaj zabawowy endpoint /api/random, który za każdym razem zwraca inną wiadomość:

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

Wypróbuj wszystkie endpointy w przeglądarce – a potem spróbuj wywołać jeden przez fetch() z konsoli, tak jak nauczyłeś się w poprzedniej lekcji.

⚠️

„Cannot GET /api/…” znaczy, że endpoint nie istnieje – sprawdź literówkę w adresie i czy zrestartowałeś serwer po zmianie. „EADDRINUSE” znaczy, że port 3900 jest już zajęty – pewnie masz stary serwer w innym terminalu; znajdź go i zatrzymaj (Ctrl+C).

✅

Sprawdź się: Twój serwer działa na porcie 3900 i odpowiada na kilku endpointach własnymi danymi JSON. Znasz frontend, zaczynasz backend – zostało je połączyć. Zrobimy to dokładnie w następnej lekcji przy księdze gości.

Co wyniesiesz z tej lekcji

Serwer w Express: npm init -y, npm install express, node server.js, zatrzymanie Ctrl+C, restart po każdej zmianie.
Endpoint = adres + odpowiedź: app.get("/api/something", (request, response) => response.json(...)).
Frontend (3901) i backend (3900) to dwa programy na dwóch portach.

Ta lekcja jest częścią płatnego poziomu

Pokażę ci: zakładanie serwera

Pokażę ci: serwer z danymi

Teraz ty 💪

Co wyniesiesz z tej lekcji