Express statik fayllar bilan ishlash

Hozirgacha server faqat matn va JSON qaytardi. Lekin haqiqiy saytda HTML sahifa, CSS fayl va rasmlar ham kerak. Ularni har biri uchun alohida marshrut yozib berish mumkinmi? Mumkin, lekin shart emas — Express buning uchun bitta middleware beradi.

Muammo: har fayl uchun marshrut

Uchta fayl bo’lsa, kod shunday ko’rinadi:

// ❌ Bunday yozilmaydi
app.get("/index.html", (request, response) => {
  response.sendFile("/home/user/express-app/public/index.html");
});

app.get("/style.css", (request, response) => {
  response.sendFile("/home/user/express-app/public/style.css");
});

O’ntagacha rasm qo’shilsa, o’nta marshrut kerak bo’ladi. Har yangi fayl — yangi qator.

express.static()

Loyihada public papkasini yarating va ichiga uch fayl qo’ying.

public/index.html:

<!DOCTYPE html>
<html lang="uz">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vazifalar</title>
    <link rel="stylesheet" href="/style.css" />
  </head>
  <body>
    <h1>Vazifalar ro'yxati</h1>
    <p id="status">Yuklanmoqda...</p>
    <script src="/app.js"></script>
  </body>
</html>

public/style.css:

body {
  font-family: system-ui, sans-serif;
  max-width: 640px;
  margin: 40px auto;
  padding: 0 16px;
}

h1 {
  color: #1f2937;
}

public/app.js:

// Bu fayl brauzerda ishlaydi, serverda emas
const status = document.getElementById("status");
status.textContent = "Sahifa serverdan yuklandi";

Endi serverga bitta qator qo’shamiz:

const express = require("express");

const app = express();

// public papkasidagi fayllarni tashqariga ochamiz
app.use(express.static("public"));

app.listen(3000, () => {
  console.log("Server ishga tushdi: http://localhost:3000");
});

Brauzerda http://localhost:3000 ni oching. Sahifa stillar bilan ochiladi va matn Sahifa serverdan yuklandi ga o’zgaradi — uchala fayl ham berildi.

Manzil papka nomini o’z ichiga olmaydi

Diqqat qilinadigan nuqta: HTML ichida /style.css yozilgan, /public/style.css emas.

Fayl diskda Brauzerdagi manzil
public/index.html http://localhost:3000/
public/style.css http://localhost:3000/style.css
public/app.js http://localhost:3000/app.js
public/images/logo.png http://localhost:3000/images/logo.png

public — papkaning ildizi, uning nomi manzilga qo’shilmaydi. Bu xavfsizlik uchun ham foydali: papkadan tashqaridagi fayllar (app.js, package.json, node_modules) tashqariga ochilmaydi.

path.join va __dirname

express.static("public") ishladi, lekin unda yashirin muammo bor: bu yo’l joriy ishchi papkaga nisbatan hisoblanadi.

Serverni boshqa papkadan ishga tushirsangiz:

cd ..
node express-app/app.js

Statik fayllar topilmay qoladi — Express public ni noto’g’ri joydan qidiradi. To’g’ri yechim:

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

const app = express();

// Fayl joylashgan papkadan boshlab aniq yo'l quramiz
app.use(express.static(path.join(__dirname, "public")));

app.listen(3000, () => {
  console.log("Server ishga tushdi: http://localhost:3000");
});

Nega qo’lda birlashtirmaslik kerak:

// ❌ Windows'da muammo beradi
const publicPath = __dirname + "/public";

// ✅ Har tizimda ishlaydi
const publicPath = path.join(__dirname, "public");

path moduli haqida batafsil path va papkalar darsida yozilgan.

Frontend va backend bitta serverda

Endi qiziq qismi: statik fayllar va API bitta ilovada yashashi mumkin.

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

const app = express();

app.use(express.static(path.join(__dirname, "public")));

// API — dinamik javob
app.get("/api/tasks", (request, response) => {
  const tasks = [
    { id: 1, title: "Kitob o'qish", isDone: false },
    { id: 2, title: "Kod yozish", isDone: true },
  ];

  response.json(tasks);
});

app.listen(3000, () => {
  console.log("Server ishga tushdi: http://localhost:3000");
});

public/app.js ni yangilang — u endi serverdan ma’lumot so’raydi:

const status = document.getElementById("status");

// O'z serverimizdagi API ga murojaat
fetch("/api/tasks")
  .then((response) => response.json())
  .then((tasks) => {
    status.textContent = `Jami vazifalar: ${tasks.length}`;
  })
  .catch(() => {
    status.textContent = "Ma'lumot yuklanmadi";
  });

Brauzerda sahifani yangilang:

Vazifalar ro'yxati
Jami vazifalar: 2

Diqqat qiling: fetch("/api/tasks") da to’liq manzil yozilmadi. Sahifa ham, API ham bitta serverdan kelgani uchun nisbiy yo’l yetarli. fetch darsida ko’rilgan usul shu yerda ishlayapti, faqat endi server sizniki.

res.sendFile

Ba’zan aniq bitta faylni marshrut orqali berish kerak bo’ladi:

app.get("/about", (request, response) => {
  response.sendFile(path.join(__dirname, "public", "about.html"));
});

response.sendFile() to’liq yo’l talab qiladi — shuning uchun path.join va __dirname yana kerak. Nisbiy yo’l berilsa, Express xato qaytaradi.

Vosita Qachon
express.static() Papkadagi hamma faylni ochish
response.sendFile() Bitta faylni aniq marshrutda berish

Ko’p holatda birinchisi yetarli.

Kesh sarlavhalari

Statik fayl har so’rovda qayta yuklanishi shart emas — brauzer uni saqlab qo’yishi mumkin.

// Fayllarni bir kun davomida brauzerda saqlashga ruxsat
app.use(express.static(path.join(__dirname, "public"), {
  maxAge: "1d",
}));

Tekshirish:

curl -I http://localhost:3000/style.css
HTTP/1.1 200 OK
Content-Type: text/css; charset=UTF-8
Cache-Control: public, max-age=86400

Cache-Control sarlavhasi brauzerga faylni 86400 soniya (bir kun) saqlashni aytadi. Natijada takroriy tashriflar tezlashadi.

Amaliy mashq

express-app loyihasida davom eting:

  1. public papkasini yaratib, ichiga index.html, style.css va app.js fayllarini joylashtiring;
  2. app.use(express.static("public")) qo’shib, brauzerda sahifa stillar bilan ochilishini tekshiring;
  3. HTML ichidagi /style.css ni /public/style.css ga o’zgartirib ko’ring — stil yo’qolishini va nega shunday bo’lganini tushuntiring;
  4. Yo’lni path.join(__dirname, "public") ga almashtiring va serverni boshqa papkadan ishga tushirib sinang;
  5. /api/tasks marshrutini qo’shib, public/app.js da fetch bilan vazifalar sonini sahifaga chiqaring;
  6. maxAge: "1d" qo’shib, curl -I bilan Cache-Control sarlavhasini ko’ring.

3-qadam eng ko’p chalkashlik tug’diradigan nuqtani ochadi: public papkasining nomi manzilga tushmaydi.

Qisqacha xulosa

  • Statik fayl — server o’zgartirmasdan beradigan tayyor fayl: HTML, CSS, rasm.
  • express.static() butun papkani bitta qatorda ochadi, har fayl uchun marshrut kerak emas.
  • Papka nomi manzilga qo’shilmaydi: public/style.css fayli /style.css manzilida ochiladi.
  • public ichidagi hamma narsa internetga ochiq — maxfiy fayl u yerda turmaydi.
  • Yo’lni path.join(__dirname, "public") bilan quring — aks holda server boshqa papkadan ishga tushirilganda fayllar topilmaydi.
  • Statik fayl va API bitta serverda yashay oladi; fetch("/api/tasks") nisbiy yo’l bilan ishlaydi.
  • maxAge kesh sarlavhasini qo’yadi, lekin ishlab chiqish paytida chalkashtiradi.

Keyingi darsda xatolarni boshqarish — o’z 404 sahifangiz va xato middleware’i bilan tanishamiz.

Bu dars foydali bo'ldimi?

—
— marta ko'rildi