Statikus fájlok és projektszerkezet

1Statikus fájlok kiszolgálása

import express from "express";
import path from "node:path";

const app = express();

app.use(express.static(path.join(import.meta.dirname, "public")));

Ettől a public mappa tartalma közvetlenül elérhető lesz.

Az eredmények:

Amit magától elintéz

Ez a három dolog kézzel is megírható lenne (a 2. fejezetben pont ezt soroltuk fel a hiányzó funkciók közt), de nem kell:

A csapda: a relatív útvonal

Ez a fejezet első felének legfontosabb buktatója. A rövidebb írásmód működni látszik:

app.use(express.static("public"));       // ⚠️ csak néha jó

A gond: az express.static("public") az útvonalat nem a fájlhoz képest értelmezi, hanem ahhoz a mappához, ahonnan a szervert elindítottad (process.cwd()).

A megoldás mindig ugyanaz: abszolút útvonal.

import path from "node:path";

app.use(express.static(path.join(import.meta.dirname, "public")));    // ✅ mindig jó

Előtag, több mappa, mappa index nélkül

Hol a helye a láncban?

app.use(helmet());
app.use(express.json());

app.use(express.static(path.join(import.meta.dirname, "public")));   // ← ide

app.use("/api/products", termekRouter);

app.use(nemTalalhato);

A statikus kiszolgálás az API-útvonalak előtt áll. Így a fájlkérések azonnal kiszolgálódnak, és nem futnak végig feleslegesen az útvonal-kereséssel. Ha nincs egyező fájl, a middleware csendben továbbadja a kérést — ezért nem zavarja az API-t.

Egy fájl kiszolgálása: res.sendFile()

app.get("/dokumentacio", (req, res) => {
  res.sendFile(path.join(import.meta.dirname, "docs", "api.html"));
});

2Miért nem elég egyetlen fájl?

Nézzük meg, mi minden van egy „ömlesztett” végpontban:

app.get("/api/products/:id", (req, res) => {
  const id = Number(req.params.id);                                    // 1) bemenet ellenőrzése
  if (Number.isNaN(id)) return res.status(400).json({ /* … */ });      // 2) HTTP-válasz

  const termek = termekek.find(t => t.id === id);                      // 3) adathozzáférés
  if (!termek) return res.status(404).json({ /* … */ });               // 4) HTTP-válasz

  res.json(termek);                                                    // 5) HTTP-válasz
});

Öt sorban három különböző felelősség keveredik. Ez rövid példán nem gond, de:

3A három réteg

Ugyanaz a végpont ömlesztve és rétegekre bontva

app.get("/api/products/:id", (req, res) => {
  const id = Number(req.params.id);
  if (Number.isNaN(id))
    return res.status(400).json({…});

  const termek = termekek
    .find(t => t.id === id);
  if (!termek)
    return res.status(404).json({…});

  res.json(termek);
});

// routes/termek.routes.js
router.get("/:id", vezerlo.egy);

// controllers/termek.controller.js
export function egy(req, res) {
  const id = Number(req.params.id);
  // …ellenőrzés + válasz…
}

// services/termek.service.js
export function termekAzonositoval(id) {
  return termekek.find(t => t.id === id) ?? null;
}

Route — csak összekötés

// src/routes/termek.routes.js
import express from "express";
import * as vezerlo from "../controllers/termek.controller.js";

const router = express.Router();

router.get("/", vezerlo.listaz);
router.get("/:id", vezerlo.egy);
router.post("/", vezerlo.letrehoz);

export default router;

Ez a fájl egy pillantással áttekinthető: azonnal látod, milyen végpontjai vannak az erőforrásnak. Ez önmagában is nagy nyereség.

Controller — a HTTP nyelve

// src/controllers/termek.controller.js
import * as szolgaltatas from "../services/termek.service.js";

export function listaz(req, res) {
  const categoryId = req.query.categoryId ? Number(req.query.categoryId) : undefined;
  res.json(szolgaltatas.osszesTermek({ categoryId }));
}

export function egy(req, res) {
  const id = Number(req.params.id);

  if (Number.isNaN(id)) {
    return res.status(400).json({
      error: { message: "Az azonosító csak szám lehet.", code: "ERVENYTELEN_ID" }
    });
  }

  const termek = szolgaltatas.termekAzonositoval(id);

  if (!termek) {
    return res.status(404).json({
      error: { message: "Nincs ilyen termék.", code: "TERMEK_NEM_TALALHATO" }
    });
  }

  res.json(termek);
}

export function letrehoz(req, res) {
  const termek = szolgaltatas.ujTermek(req.body);
  res.location(`/api/products/${termek.id}`).status(201).json(termek);
}

A vezérlő feladata a fordítás: a HTTP-kérésből kiveszi az adatot, átadja a service-nek, majd az eredményt HTTP-válasszá alakítja — a helyes státuszkóddal.

Service — az üzleti logika

// src/services/termek.service.js
const termekek = [
  { id: 42, nev: "Billentyűzet", ar: 12990, categoryId: 3 },
  { id: 43, nev: "Egér",         ar: 4990,  categoryId: 3 }
];
let kovetkezoId = 44;

export function osszesTermek({ categoryId } = {}) {
  if (categoryId === undefined) return termekek;
  return termekek.filter(t => t.categoryId === categoryId);
}

export function termekAzonositoval(id) {
  return termekek.find(t => t.id === id) ?? null;
}

export function ujTermek(adat) {
  const termek = { ...adat, id: kovetkezoId++ };   // az id a spread UTÁN áll — lásd lentebb!
  termekek.push(termek);
  return termek;
}

Figyeld meg, mi nincs benne: se req, se res, se státuszkód. Ha nincs találat, null-t ad vissza — hogy abból 404 lesz-e vagy valami más, a vezérlő dolga.

4A webshop mappaszerkezete

webshop-api/
  package.json
  .env
  .gitignore
  index.js                        ← a szerver indítása
  public/                         ← statikus fájlok
    index.html
    stilus.css
  src/
    app.js                        ← az alkalmazás felépítése
    config.js                     ← beállítások egy helyen
    routes/
      termek.routes.js
      kategoria.routes.js
    controllers/
      termek.controller.js
      kategoria.controller.js
    services/
      termek.service.js
      kategoria.service.js
    middlewares/
      naplozo.js
      nem-talalhato.js
      hibakezelo.js
    utils/
      valaszok.js                 ← a hiba() segédfüggvény az 5. fejezetből

Az app.js

// src/app.js
import express from "express";
import path from "node:path";
import termekRouter from "./routes/termek.routes.js";

const app = express();

app.use(express.json());
app.use(express.static(path.join(import.meta.dirname, "..", "public")));

app.use("/api/products", termekRouter);

app.use((req, res) => {
  res.status(404).json({ error: { message: "Nincs ilyen végpont.", code: "NINCS_VEGPONT" } });
});

export default app;

A ".." azért kell, mert az app.js az src/ mappában van, a public/ pedig eggyel feljebb.

5Egy kérés útja végig a rétegeken

Kövessük a GET /api/products/42 kérést:

Az eredmény:

GET /api/products/42     →  200  {"id":42,"nev":"Billentyűzet","ar":12990,"categoryId":3}
GET /api/products/alma   →  400  {"error":{"message":"Az azonosító csak szám lehet.", …}}
GET /api/products/999    →  404  {"error":{"message":"Nincs ilyen termék.", …}}

6Elnevezési szokások

Nincs kőbe vésett szabály, de legyél következetes. Amit mi használunk:

Import: névvel vagy csillaggal?

import * as vezerlo from "../controllers/termek.controller.js";   // ✅ így írjuk
router.get("/:id", vezerlo.egy);

import { egy, listaz } from "../controllers/termek.controller.js"; // ugyanaz, másképp
router.get("/:id", egy);

Mindkettő helyes. Mi a csillagosat használjuk, mert a hívás helyén látszik, honnan jön a függvény (vezerlo.egy, szolgaltatas.osszesTermek) — ez hosszabb fájlokban sokat segít.

7Konfiguráció külön fájlba

A 3. fejezetben a portot már környezeti változóból vettük. Ha több ilyen beállítás lesz, érdemes egy helyre gyűjteni:

// src/config.js
export const config = {
  port:        Number(process.env.PORT) || 3000,
  kornyezet:   process.env.NODE_ENV || "development",
  oldalMeret:  Number(process.env.OLDAL_MERET) || 20,
  torzsMeret:  process.env.TORZS_MERET || "100kb"
};

// index.js
import app from "./src/app.js";
import { config } from "./src/config.js";

app.listen(config.port, () => {
  console.log(`A szerver fut (${config.kornyezet}): http://localhost:${config.port}`);
});

8Gyakori hibák

A statikus fájl 404-es, pedig ott van

app.use(express.static("public"));    // ❌ a CWD-hez képest keresi

Tünet: a saját gépeden működik, a szerveren vagy más indítási módnál nem.
Megoldás: path.join(import.meta.dirname, "public").

res.sendFile() hibát dob

Tünet: TypeError: path must be absolute or specify root to res.sendFile.
Megoldás: res.sendFile(path.join(import.meta.dirname, "docs", "api.html")).

A statikus mappa „elnyeli” az API-t

Ha véletlenül van egy public/api mappa, akkor a /api/… kérések oda futnak be. Ritka, de alattomos.
Megoldás: a statikus tartalmat tedd előtag alá (app.use("/eszkozok", …)), vagy ügyelj rá, hogy a public mappában ne legyen az API-útvonalakkal ütköző név.

Körkörös import

// termek.service.js   →  importálja a controllert
// termek.controller.js →  importálja a service-t

Tünet: valamelyik import undefined lesz, és hívásnál TypeError: … is not a function.
Megoldás: a rétegek csak lefelé hivatkoznak: route → controller → service. Visszafelé soha. Ha mégis kellene, az azt jelzi, hogy rossz rétegbe került egy függvény.

Cannot find module './routes/termek.routes'

Tünet: hiányzik a .js kiterjesztés az importból.
Megoldás: ESM-ben kötelező kiírni: from "./routes/termek.routes.js".

Az útvonalminta kétszer szerepel

app.use("/api/products", termekRouter);
router.get("/api/products/:id", …);      // ❌

A 4. fejezetből ismerős: a routerben relatív útvonal áll ("/:id").

9Feladatok

app.use(express.static("public"));

// termek.service.js
export function termekAzonositoval(req, res) {
  const termek = termekek.find(t => t.id === Number(req.params.id));
  if (!termek) return res.status(404).json({ error: { message: "Nincs ilyen." } });
  return termek;
}

10Önellenőrző kvíz

11Összegzés

12Fogalomtár