‫Dosen: Sekarang
‫mari kita pelajari cara menyajikan file statis dengan Express.
‫Sekarang apa yang sebenarnya saya maksud dengan file statis?
‫Nah, itu adalah file yang ada di sistem file kami yang
‫saat ini tidak dapat kami akses menggunakan semua rute.
‫Jadi, misalnya, kami memiliki ikhtisar ini. html di sini
‫di folder publik kami.
‫Tapi sekarang tidak mungkin kita bisa mengaksesnya
‫menggunakan browser, kan?
‫Dan hal yang sama untuk file gambar yang kita
‫miliki di sini, atau file CSS atau Javascript.
‫Jadi izinkan saya menunjukkannya kepada Anda,
‫dan izinkan saya benar-benar menggunakan browser kali ini.
‫Untuk saat ini saya menyalin URL ini di sini
‫hanya untuk menunjukkan kepada Anda
‫bahwa itu akan berhasil, jelas juga di browser.
‫Oke, jadi ini hasil kami yang belum diformat di sini,
‫dari rute yang sama.
‫Tetapi katakanlah kita sebenarnya ingin mengakses file HTML yang
‫baru saja saya bicarakan.
‫Jadi kita bisa, tentu saja,
‫tidak hanya menulis publik dan kemudian,
‫misalnya, ikhtisar. html, kan?
‫Tidak mungkin kita bisa mengakses ini sekarang.
‫Dan itu hanya karena kami tidak menentukan rute apa
‫pun untuk URL ini, bukan?
‫Kami tidak memiliki penangan yang terkait dengan rute ini.
‫Jadi, jika kita benar-benar ingin mengakses
‫sesuatu dari sistem file
‫kita, kita perlu menggunakan middleware Express bawaan.
‫Jadi, izinkan saya menunjukkan kepada Anda bagaimana kita bisa melakukannya.
‫Misalnya, setelah ini.
‫Sekarang di bagian ini kita sebenarnya hanya berbicara tentang API sehingga kita
‫sebenarnya tidak perlu menyajikan file statis seperti gambar
‫atau HTML, jadi apa yang baru saja saya tunjukkan kepada Anda.
‫Tetapi karena bagian ini merupakan
‫pengantar Express secara
‫umum, saya juga ingin segera menunjukkan konten ini kepada Anda.
‫Jadi, seperti yang saya katakan, yang harus kita
‫lakukan adalah menggunakan middleware bawaan sederhana yang
‫berjalan seperti ini.
‫Express dot static, karena kami ingin menyajikan file statis, jadi ini
‫adalah nama yang jelas untuk itu.
‫Jadi di sini kita melewati direktori dari
‫mana kita ingin menyajikan file statis.
‫Dan dalam hal ini, saya akan menggunakan direktori publik.
‫Jadi folder ini di sini di mana kita memiliki file HTML ini, oke?
‫Dan sebenarnya mari kita
‫gunakan string template di sini sehingga saya dapat melanjutkan dan
‫menggunakan variabel dirname, lalu slash dan public.
‫Simpan dan kembali ke browser.
‫Kemudian kita akan dapat membuka ikhtisar ini. html.
‫Sekarang itu tidak akan berfungsi di URL ini di sini.
‫Sebenarnya harus seperti ini.
‫Jadi tanpa publik, cukup /overview. html.
‫Jadi mari kita lihat, dan itu benar-benar berhasil.
‫Oke.
‫Sekarang, mengapa begitu?
‫Mengapa kita tidak memerlukan folder publik di sini di URL?
‫Yah, hanya karena ketika kita membuka URL yang tidak
‫dapat ditemukan di salah satu
‫rute kita, maka akan terlihat di folder publik yang kita tetapkan.
‫Dan itu mengatur folder itu ke root.
‫Oke, jadi mari kita berpura-pura bahwa root sekarang
‫adalah folder publik kita.
‫Jadi ini di sini, dan kemudian ikhtisarnya ada di sana.
‫Dan itulah mengapa kami telah melakukan akses ke sana.
‫Jadi di sana kita juga punya gambar, misalnya.
‫Katakanlah kita ingin membuka gambar dan kemudian pin ini di sini.
‫Dan kita bisa melakukan itu.
‫Jadi
‫gambar, pin png, dan ini dia.
‫Berikut adalah gambar.
‫Sekarang yang tidak bisa kami lakukan adalah ini, karena ini bukan file.
‫Ini terlihat seperti rute biasa, jadi
‫Express benar-benar mencoba menemukan penangan rute untuk rute ini, yang
‫tidak dapat dilakukan karena Anda
‫tidak mendefinisikan apa pun.
‫Baiklah?
‫Jadi sebenarnya ini hanya berfungsi untuk file statis.
‫Dalam hal ini, sekali lagi, tidak akan masuk ke rute baru,
‫tetapi hanya menyajikan file yang kami tentukan
‫dari folder publik,
‫atau di folder yang kami tentukan di sini di middleware ini.
‫Sekarang lihat konsol di sini dan lihat semua permintaan yang
‫sebenarnya dilakukan ketika kami membuka halaman itu.
‫Sekarang mari kita selesaikan ini di sini supaya kita melihat semua permintaan
‫yang sebenarnya baru saja datang dari halaman ikhtisar itu.
‫Jadi mari kita menulis lagi ikhtisar. html di sini.
‫Dan gambar-gambar ini di
‫sini rusak dan itu karena html ini tidak
‫seharusnya disajikan seperti ini, oke?
‫Saya hanya menggunakannya sekarang di
‫sini sehingga kami mendapatkan umpan balik visual.
‫Saya tidak tertarik sama sekali dengan konten di sini.
‫Sekarang lihat saja semua permintaan yang
‫dilakukan untuk semua aset.
‫Jadi seperti yang saya
‫katakan di awal, untuk setiap bagian yang merupakan bagian
‫dari situs web, server kami sebenarnya mendapat permintaan terpisah.
‫Dan Anda lihat di sini bahwa kebanyakan dari mereka mendapatkan 404 ini.
‫Jadi itulah mengapa tautan kemudian rusak di halaman web, karena
‫Express tidak dapat menemukannya di folder ini.
‫Tapi sekali lagi, bukan itu intinya di sini.
‫Apa yang ingin saya
‫tunjukkan kepada Anda adalah bagaimana kami
‫dapat menyajikan file statis dari folder dan bukan dari rute.
‫Baiklah.
‫Dan itu mengakhiri pengenalan dasar Express.
‫Dalam dua video berikutnya
‫kita akan berbicara tentang sesuatu yang disebut
‫variabel lingkungan dan kita juga akan mengatur ESlint dalam kode VS lisan.