Aset Statis
Berbeda dengan HTML yang kita buat dengan menggunakan template, CSS dan Javascript akan tetap sama untuk setiap halaman. Dan relatif tidak akan berubah, siapapun yang membuka halaman di web kita, di bagian halaman apapun. Oleh karena itu, CSS dan kode Javascript ini termasuk aset statis
Kode Javascript pada Express, berbeda dengan kode Express kita. Express tidak akan mengenali kode Javascript yang di dedikasikan untuk browser
Sebelum kita berpindah lebih jauh, perhatikan handler ketika user tidak menuliskan side-query. Kita tidak bisa melakukan redirect
dan render
bersamaan. Oleh karena itu, pada blok kode redirect
, kita akan menambahkan return
agar kode dibagian bawahnya tidak di eksekusi.
Kembali ke aset statis, kita bisa menambahkan CSS dengan mudah dengan cara menggunakan express.static
yang ada di dokumentasi. Biasanya, file static akan disimpan di dalam folder public
app.use(express.static('public'))
Untuk mencoba apakah berfungsi, kita bisa dapat melihat di localhost:port/namaKontenDiDalamPublic
dan data akan dimunculkan ke browser.
Untuk mencegah kesamaan route dengan nama folder, kita bisa menambahkan rute khusus
app.use('/static', express.static(...))
Kemudian kita tinggal menambahkan CSS tersebut ke layout.pug
link(rel='stylesheet', href='/static/stylesheets/style.css')