express.static: Express ile Statik Dosya Sunma

express.static, bir klasördeki dosyaları sunan yerleşik middleware'dir. app.use(express.static(path.join(__dirname, 'public'))), public içindeki her dosyayı URL'de aynı path'te erişilebilir yapar: public/style.css /style.css adresine, public/index.html ise / adresine cevap verir. Express Content-Type değerini dosya uzantısından belirler ve hiçbir dosya eşleşmediğinde 404 ile cevap vermek yerine isteği route'larına iletir.

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

// Setup: create a public folder with two files.
fs.mkdirSync(path.join(__dirname, 'public'), { recursive: true });
fs.writeFileSync(path.join(__dirname, 'public', 'index.html'), '<h1>Home</h1>');
fs.writeFileSync(path.join(__dirname, 'public', 'style.css'), 'h1 { color: teal; }');

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

app.get('/api/time', (req, res) => {
    res.json({ now: 'from a route, not a file' });
});

// GET /style.css
app.listen(3000);

GET /style.css isteğinin cevabı dosyanın metnidir ve Headers sekmesinde Content-Type: text/css; charset=utf-8 görünür. index.html almak için GET / gönder, sonra GET /api/time gönder: böyle bir dosya yok, bu yüzden route cevap verir.

Klasör path'i neden __dirname ister

express.static('public'), 'public' değerini server.js dosyasının bulunduğu klasöre göre değil, Node'u başlattığın klasöre göre çözer. Projenin içinde node server.js çalıştırdığında çalışır, bir process manager ya da bir script uygulamayı başka bir yerden başlattığında bozulur:

// project/server.js uses express.static('public')
// cd project && node server.js      -> serves project/public
// node project/server.js            -> looks for ./public, every file is 404

path.join(__dirname, 'public'), Node nereden başlatılmış olursa olsun, bu satırı içeren dosyanın yanındaki klasördür. Bir ES modülünde path.join(import.meta.dirname, 'public') kullan (Node 20.11 ve sonrası). __dirname ve path.join konusunu ayrıntılı olarak path modülü sayfası anlatıyor.

Dosyaları bir önek altında sun

Klasörü bir URL öneki altında sunmak için önce bir bağlama path'i ver. Önek, dosyanın diskteki path'inin bir parçası değildir:

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

// Setup: create the files.
fs.mkdirSync(path.join(__dirname, 'static', 'img'), { recursive: true });
fs.writeFileSync(path.join(__dirname, 'static', 'app.js'), 'console.log("hi");');
fs.writeFileSync(path.join(__dirname, 'static', 'img', 'dot.svg'), '<svg></svg>');

const app = express();
app.use('/assets', express.static(path.join(__dirname, 'static')));

// GET /assets/app.js
app.listen(3000);

GET /assets/app.js, console.log("hi"); değerini text/javascript olarak döndürür, GET /assets/img/dot.svg ise alt klasöre ulaşır. Öneksiz GET /app.js gönder: 404 olur, çünkü dosyalar yalnızca /assets altında var. Dosya URL'lerinin API route'larınla çakışmaması için bir önek kullan.

maxAge ile cache header'ları

Varsayılan olarak Express Cache-Control: public, max-age=0 gönderir, yani tarayıcılar her kullanımda sunucuya sorar (ETag header'ı sayesinde dosya değişmediyse hızlı bir 304 Not Modified alır). app.3f9a1c.js gibi ismi her build'de değişen dosyalar için tarayıcılara onları saklamalarını söyle:

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

// Setup: one file.
fs.mkdirSync(path.join(__dirname, 'public'), { recursive: true });
fs.writeFileSync(path.join(__dirname, 'public', 'logo.svg'), '<svg></svg>');

const app = express();
app.use(
    express.static(path.join(__dirname, 'public'), {
        maxAge: '7d',
        index: false,
    })
);

// GET /logo.svg
app.listen(3000);

Headers sekmesini aç: Cache-Control artık public, max-age=604800, yani saniye cinsinden yedi gün. index: false, klasör URL'leri için index.html sunmayı kapatır. Diğer faydalı seçenekler, /about adresinin about.html dosyasını bulmasını sağlayan extensions: ['html'] ve varsayılanı 'ignore' olan, böylece .env gibi dosyaların asla sunulmamasını sağlayan dotfiles seçeneğidir.

Single page app'ler: index.html'e geri dön

İstemci tarafı routing için build edilmiş bir React ya da Vue uygulaması, /settings üzerinde sayfa yenilendiğinde 404 olmasın diye bilinmeyen her path'in index.html döndürmesine ihtiyaç duyar. Bu yedek route'u express.static ve API route'larından sonra koy:

app.use(express.static(path.join(__dirname, 'dist')));
app.use('/api', apiRouter);

// Express 5 wildcard syntax
app.get('/*splat', (req, res) => {
    res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});

Sık yapılan hatalar

Klasör adını URL'ye eklemek. app.use(express.static('public')) ile URL /public/style.css değil, /style.css olur. URL'de /public istiyorsan onu bağla: app.use('/public', express.static(...)).

HTML'de dosyalara göreli path'lerle link vermek. /blog/post sayfasındaki <link href="style.css">, /blog/style.css dosyasını ister. Path'i bir slash ile başlat: /style.css.

Gizli bilgileri statik klasöre koymak. İçindeki her şey herkese açıktır. Config dosyalarını, anahtarları ve kaynak kodunu onun dışında tut.