Pieni palvelin Expressillä

Rakenna oma palvelin Node.js:llä ja Expressillä. Ensimmäinen API vastaa ensimmäiseen pyyntöönsä.

Näytän sinulle: palvelimen asetus

Express on suosituin paketti palvelimien rakentamiseen Node.js:ssä – se tekee työstä vain muutaman rivin. Palvelin on erillinen projekti, erillään React-sovelluksesta (muista: frontend ja backend ovat kaksi puoliskoa). Terminaalissa:

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

mkdir luo kansion (make directory),
npm init -y asettaa uuden Node.js-projektin (luo package.json),
npm install express lataa Expressin.

Avaa kansio VS Codessa ja luo tiedosto nimeltä 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");
});

Aja se:

node server.js

Ja avaa http://localhost:3900/api/hello selaimessasi. Näetkö JSON-vastauksen? Rakensit juuri palvelimen. Ei taikuutta – 10 riviä.

Mitä koodissa tapahtuu:

require("express") – lainaa paketti (palvelinpuolen versio import:ista).
app.get("/api/hello", ...) – “vastaa GET-pyyntöihin tässä osoitteessa.” Tuo osoite + vastaus -pari on endpoint.
response.json({...}) – lähetä JSON takaisin.
app.listen(3900) – kuuntele portissa 3900. (Vite pyörii 3901:ssä, palvelin 3900:ssa – kaksi ohjelmaa ei voi kuunnella samaa porttia.)

Pysäytät palvelimen Ctrl+C:llä. Ja varo: jokaisen koodimuutoksen jälkeen pitää pysäyttää ja käynnistää uudelleen – palvelin ei ole Vite, se ei päivity itsestään.

Näytän sinulle: palvelin datalla

Palvelin jakaa yleensä dataa. Lisää toinen endpoint ennen listen:ia:

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

Käynnistä palvelin uudelleen ja avaa http://localhost:3900/api/results – datasi, tarjoiltuna API:n kautta. Juuri näin jokainen iso verkkosivu toimii (vain tietokannan sijaan taulukossa).

Nyt sinun vuorosi 💪

Saa palvelin käyntiin oppaan mukaan.
Lisää endpoint datalla projektistasi: 🏫 /api/menu (taulukko viikon aterioista) · 🙋 /api/favorites (suosikkipelisi/-kirjasi) · 🌍 /api/trips (matkalista) · ⚽ /api/results (ottelutulokset).
Lisää leikkisä endpoint /api/random joka palauttaa eri viestin joka kerta:

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

Kokeile kaikkia endpointeja selaimessasi – ja sitten kutsu yhtä fetch():lla konsolista, kuten opit viime oppitunnilla.

⚠️

“Cannot GET /api/…” tarkoittaa että endpointia ei ole – tarkista osoitteen kirjoitusasu ja käynnistitkö palvelimen uudelleen muutoksen jälkeen. “EADDRINUSE” tarkoittaa että portti 3900 on jo käytössä – sinulla on todennäköisesti vanha palvelin käynnissä toisessa terminaalissa; löydä se ja pysäytä (Ctrl+C).

✅

Tarkista itse: Palvelimesi pyörii portissa 3900 ja vastaa useissa endpointeissa omalla JSON-datallasi. Tiedät frontendin, olet aloittamassa backendin – jäljellä on vain niiden yhdistäminen. Teemme juuri sen seuraavassa oppitunnissa vieraskirjalla.

Mitä opit tästä oppitunnista

Palvelin Expressillä: npm init -y, npm install express, node server.js, pysäytys Ctrl+C:llä, uudelleenkäynnistys jokaisen muutoksen jälkeen.
Endpoint = osoite + vastaus: app.get("/api/jotain", (request, response) => response.json(...)).
Frontend (3901) ja backend (3900) ovat kaksi ohjelmaa kahdessa portissa.