Dokumen ini mungkin sudah ketinggalan zaman jika dibandingkan dengan dokumentasi dalam bahasa Inggris. Untuk informasi terkini, lihat dokumentasi dalam bahasa Inggris.

✖

Menampilkan file statis di Express

Untuk menamplikan file statis seperti gambar, file CSS, dan file JavaScript, dapat menggunakan fungsi middleware bawaan express.static di Express.

Signature fungsinya adalah:

express.static(root, [options])

Argumen root menentukan direktori root tempat aset statis akan ditampilkan. Untuk informasi selengkapnya tentang argumen options, lihat express.static.

Misalnya, gunakan kode berikut untuk menyajikan gambar, file CSS, dan file JavaScript dalam direktori bernama public:

app.use(express.static('public'))

Sekarang, Anda dapat melihat file yang ada di direktori public:

http://localhost:3000/images/kitten.jpg
http://localhost:3000/css/style.css
http://localhost:3000/js/app.js
http://localhost:3000/images/bg.png
http://localhost:3000/hello.html
Express mencari file yang berdasarkan lokasi dari direktori statisnya, sehingga nama direktori statis bukan bagian dari URL.

Untuk menggunakan beberapa direktori aset statis, panggil fungsi middleware express.static beberapa kali:

app.use(express.static('public'))
app.use(express.static('files'))

Express akan mencari file sesuai urutan Anda mengatur direktori statis melalui fungsi middleware express.static.

CATATAN: Untuk hasil terbaik, gunakan reverse proxy cache untuk meningkatkan kinerja penyajian aset statis.

Untuk membuat awalan jalur virtual (yang jalurnya sebenarnya tidak ada dalam sistem file) untuk file yang akan ditampilkan oleh fungsi express.static, tentukan jalur pemasangan untuk direktori statis, seperti yang ditunjukkan di bawah ini:

app.use('/static', express.static('public'))

Sekarang, Anda dapat melihat file yang ada di direktori public menggunakan awalan jalur /static.

http://localhost:3000/static/images/kitten.jpg
http://localhost:3000/static/css/style.css
http://localhost:3000/static/js/app.js
http://localhost:3000/static/images/bg.png
http://localhost:3000/static/hello.html

Namun, jalur yang Anda berikan ke fungsi express.static adalah relatif terhadap direktori tempat Anda meluncurkan proses node. Jika Anda menjalankan aplikasi ekspres dari direktori lain, lebih aman menggunakan jalur absolut dari direktori yang ingin Anda ditampilkan:

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

Untuk detail selengkapnya tentang fungsi serve-static dan opsinya, lihat serve-static.

Previous: Basic Routing     Next: More examples