Express.js adalah kerangka kerja web yang minimal dan cepat untuk Node.js, pilihan populer untuk membuat Aplikasi Web dan API. Menyajikan file statis (HTML, CSS, JavaScript, gambar, dan aset lainnya) adalah salah satu fungsi intinya. Express API: Menyajikan file statis di Express API Menyajikan file statis - Menyajikan file statis adalah salah satu persyaratan paling dasar dalam pengembangan web.
Pada artikel ini, Anda akan mempelajari cara menyajikan file statis menggunakan file konfigurasi express.js, dengan konfigurasi dasar, penanganan beberapa direktori, dan opsi lanjutan.
Apa yang dimaksud dengan file statis?
File statis adalah file yang dikirim server web ke klien tanpa modifikasi atau pemrosesan. Berkas-berkas ini meliputi:
- HTML: memberikan struktur dan konten pada halaman web.
- CSS: Lembar gaya untuk tampilan sesuatu.
- JavaScript: Secara realistis, sekarang, untuk membuat Klien bekerja, untuk mengaktifkan interaktivitas dan logika, kita membutuhkan JavaScript.
- Gambar: Gambar dalam format JPEG, PNG, SVG, atau GIF.
- Aset: Jenis aset lainnya termasuk font, video, atau dokumen lain (seperti PDF).
File statis adalah aspek mendasar dari aplikasi web yang memungkinkan browser pengguna untuk merender antarmuka pengguna dan melibatkan pengguna.
 |
| sumber: stackabuse.com |
Menyiapkan Proyek Express.js
Mari kita mulai menyajikan berkas statis di express- pastikan Anda memiliki node. Anda telah menginstal node.js dan npm di sistem Anda. Berikut adalah langkah-langkah untuk menyiapkan aplikasi express sederhana:
1. Inisialisasi Proyek Baru
Sekarang kita dapat membuat direktori proyek dari terminal Buka terminal dan cd ke direktori tersebut dan jalankan:
mkdir express-static-files
cd express-static-files
npm init -y
Ini akan menghasilkan sebuah paket. Di mana pengaturan defaultnya adalah: settings.
2. Instal Express.js
Instal framework Express menggunakan npm:
npm install express
3. Membuat File Proyek
Struktur Proyek DasarBuat struktur proyek dasar:
mkdir public
touch server.js
File statis Anda akan masuk ke dalam folder publik dan server. Kode server akan masuk ke dalam app.js.
Menyajikan File Statis
Express. Di Express, file statis dilayani menggunakan middleware statis Berikut ini cara mengaturnya:
1. Konfigurasi Dasar
Buka server. Buat berkas app.js baru dan letakkan kode di bawah ini:
const express = require('express');
const path = require('path');
const app = express();
const PORT = 3000;
// Serve static files from the 'public' directory
app.use(express.static(path.join(__dirname, 'public')));
// Start the server
app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});
- express. Anda bisa menggunakan middleware static() untuk menyajikan berkas-berkas statis dari direktori publik.
- path. Penggunaan join(__dirname, 'public') membuatnya kompatibel di seluruh OS.
2. Menambahkan berkas-berkas statis
- public/index.html
- public/style.css
- public/script.js
Middleware Statis dalam Bentuk Khusus
1. Cara Menyajikan File dari Beberapa Direktori
app.use(express.static(path.join(__dirname, 'public')));app.use(express.static(path.join(__dirname, 'assets')));
2. Menggunakan Awalan Jalur Virtual
app.use('/static', express.static(path.join(__dirname, 'public')));
3. Opsi Khusus
- fallthrough: Menunjukkan apakah middleware harus melanjutkan permintaan yang tidak ditangani ke middleware berikutnya (default: true)
- maxAge: Mengatur usia maksimal Cache-Control dalam milidetik.
- ekstensi: Secara otomatis mencoba menyelesaikan permintaan dengan ekstensi file tertentu.
app.use(express.static(path.join(__dirname, 'public'), {maxAge: '1d', // Cache static files for one dayextensions: ['html', 'htm'], // Automatically resolve .html or .htm files}));