Tutorial ExpressJS 8 : Melayani file statis di ExpressJS

Tutorial ExpressJS 8 : Melayani file statis di ExpressJS. File statis adalah file yang diunduh oleh klien dari server. Buat direktori baru, publik.

Tutorial ExpressJS 8 : Melayani file statis di ExpressJS

Tutorial ExpressJS 8 : Melayani file statis di ExpressJS. File statis adalah file yang diunduh oleh klien dari server. Buat direktori baru, publik. 

Express, secara default tidak memungkinkan Anda untuk menyajikan file statis. Anda perlu mengaktifkannya menggunakan middleware built-in berikut.

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

Catatan - ExpressJS mendongak file relatif terhadap direktori statis, jadi nama direktori statis bukan bagian dari URL.

Perhatikan bahwa rute root sekarang diset ke dir publik Anda, jadi semua file statis yang Anda muat akan mempertimbangkan publik sebagai root. Untuk menguji apakah ini bekerja dengan baik, tambahkan file gambar apa pun ke dir publik baru Anda dan ubah namanya menjadi "testimage.jpg". Dalam pandangan Anda, buat tampilan baru dan sertakan file ini seperti :

html
   head
   body
      h3 Testing static file serving:
      img(src = "/testimage.jpg", alt = "Testing Image

Anda harus mendapatkan output berikut -

Beberapa Direktori Statis

Kami juga dapat mengatur beberapa direktori aset statis menggunakan program berikut :

var express = require('express');
var app = express();

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

app.listen(3000);

Prefix Virtual Path

Kami juga dapat menyediakan awalan jalur untuk menyajikan file statis. Misalnya, jika Anda ingin memberi awalan path seperti '/ static', Anda perlu menyertakan kode berikut di file index.js Anda :

var express = require('express');
var app = express();

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

app.listen(3000);

Sekarang kapan pun Anda perlu menyertakan file, misalnya, file skrip yang disebut main.js berada di direktori publik Anda, gunakan tag skrip berikut :

<script src = "/static/main.js" />

Teknik ini bisa berguna saat menyediakan beberapa direktori sebagai file statis. Awalan ini dapat membantu membedakan beberapa direktori.

Sumber : Tutorialspoint.com