Static fayllar — express.static, papka sozlash

~10 daq · Express · Kirish va Asoslar

Static fayl nima?

Static fayl — server tomonida o'zgarmaydigan fayl. Rasm, CSS, JavaScript, HTML, PDF — bular static fayllar. Har kim so'raganda bir xil fayl qaytariladi.

Dinamik javob esa — har so'rovda boshqacha. Masalan, /users — ma'lumotlar bazasidan olinadi, har safar boshqacha bo'lishi mumkin.

express.static — static fayllarni serve qilish

express.static — papkadagi fayllarni avtomatik serve qiluvchi built-in middleware.

const express = require('express');
const path    = require('path');
const app     = express();

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

app.listen(3000);

public papkasi:

public/
├── index.html
├── style.css
├── script.js
└── images/
    └── logo.png

Endi:

• http://localhost:3000/index.html → public/index.html
• http://localhost:3000/style.css → public/style.css
• http://localhost:3000/images/logo.png → public/images/logo.png
• http://localhost:3000/ → public/index.html (avtomatik)

Express papkani ko'rib, so'ralgan faylni topib, yuboradi. Siz hech narsa yozmasangiz ham.

Nima uchun path.join(__dirname, 'public')?

express.static('public') ham ishlaydi — lekin xavfli. public — nisbiy yo'l, node qayerdan ishga tushirilganiga bog'liq.

path.join(__dirname, 'public') — har doim app.js faylining yonidagi public papkasini ko'rsatadi. Qayerdan ishga tushirilishidan qat'i nazar.

Virtual prefix — URL prefiksi

Ba'zan static fayllar URL da alohida prefix bilan bo'lishi kerak:

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

Endi:

• http://localhost:3000/static/style.css → public/style.css
• http://localhost:3000/style.css → 404 (prefix yo'q)

Bu API va static fayllarni ajratish uchun foydali — /api/... API, /static/... fayllar.

Bir nechta static papka

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

Express birinchi papkadan qidiradi, topilmasa ikkinchisidan. Ikki papkada bir xil nom bo'lsa — birinchisi qaytariladi.

Cache sozlash

Static fayllar uchun brauzer cache — sayt tezligini oshiradi. maxAge opsiyasi:

app.use(express.static(path.join(__dirname, 'public'), {
  maxAge: '1d',    // 1 kun cache
  etag: true,      // ETag header (o'zgarganmi tekshirish)
}));

Development da cache o'chirish:

app.use(express.static(path.join(__dirname, 'public'), {
  maxAge: 0,
}));

SPA (Single Page Application) uchun

React, Vue, Angular ilovalarini serve qilishda — barcha URL lar index.html ga yo'naltirilishi kerak:

app.use(express.static(path.join(__dirname, 'client/build')));

// Barcha boshqa so'rovlar index.html ga:
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'client/build', 'index.html'));
});

Bu pattern — Express ham API, ham React ilovasini serve qilganda ishlatiladi.

Tez-tez uchraydigan xatolar

Nisbiy yo'l ishlatish:

// Xato — qayerdan ishga tushirilganiga bog'liq:
app.use(express.static('public'));

// To'g'ri:
app.use(express.static(path.join(__dirname, 'public')));

Static middleware ni route lardan keyin qo'yish:

// Xato — static avval tekshirilmaydi:
app.get('/style.css', ...); // bu route static dan oldin
app.use(express.static(...));

// To'g'ri — static avval:
app.use(express.static(path.join(__dirname, 'public')));
app.get('/api/users', ...);

Xulosa

express.static — papkadagi fayllarni avtomatik serve qiladi. Rasm, CSS, JS, HTML — bularni alohida route yozmasdan serve qilish mumkin.

path.join(__dirname, 'public') — har doim to'g'ri yo'l. Nisbiy yo'l ishlatilmaydi.

Keyingi dars

7-dars: Middleware nima, qanday ishlaydi, ketma-ketlik muhimligi