File Statis

Termasuk bagian Dasar-Dasar Express dalam perjalanan Node.js di Coddy. Pelajaran 11 dari 23.

Lembar gaya atau gambar tidak pernah berubah, dan membuat rute untuk setiap file hanya akan menambah pekerjaan yang tidak perlu.

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

express.static('assets') menyajikan file dalam folder assets dengan nama masing-masing: assets/logo.png merespons GET /logo.png. Nama folder bukan bagian dari URL. Express menentukan tipe konten dari ekstensinya: text/css untuk .css, image/png untuk .png. Path yang tidak memiliki file akan diteruskan ke rute-rutemu.

app.use menambahkan fungsi yang berjalan untuk setiap permintaan. Bab berikutnya membahas fungsi tersebut. Sekarang proyekmu memiliki folder public yang berisi lembar gaya.

Tantangan

Mudah

Recipe Box kini memiliki stylesheet. File-nya sudah tersedia di folder public; server-mu hanya perlu menyediakannya.

Di server.js, tepat setelah const app = express();, sajikan semua file di folder public dengan express.static. Setelah itu, public/style.css disajikan di /style.css.
Buat halaman beranda memuatnya: letakkan <link rel="stylesheet" href="/style.css"> di awal HTML yang dikirim oleh rute /.

Coba: Tekan Jalankan dan kirim permintaan ke /. Halaman kini menggunakan stylesheet. Kirim permintaan ke /style.css: status 200, teks CSS, dan Content-Type bernilai text/css di tab Headers. Kirim permintaan ke /missing.css: file tersebut tidak ada, jadi permintaan diteruskan ke rute-rutemu. Tidak ada yang cocok, dan Express merespons dengan 404.

Coba sendiri

import {escapeHtml} from './html.js';
import express from 'express';
import { recipes } from './data.js';

const app = express();



app.get('/', (req, res) => {
    const items = recipes.map((r) => `<li><a href="/recipes/${r.id}">${escapeHtml(r.title)}</a></li>`);
    res.send(`<h1>Recipe Box</h1><ul>${items.join('')}</ul>`);
});

// type('text') mengirim teks biasa, sehingga setiap judul tampil di barisnya sendiri.
app.get('/recipes', (req, res) => {
    const { tag } = req.query;
    const list = tag ? recipes.filter((recipe) => recipe.tags.includes(tag)) : recipes;
    res.type('text').send(list.map((recipe) => recipe.title).join('\n'));
});

app.get('/recipes/:id', (req, res) => {
    const recipe = recipes.find((r) => r.id === Number(req.params.id));
    if (!recipe) {
        res.status(404).send('No such recipe');
        return;
    }
    res.send(recipe.title);
});

app.get('/api/recipes', (req, res) => {
    res.json(recipes);
});

app.get('/api/recipes/:id', (req, res) => {
    const recipe = recipes.find((r) => r.id === Number(req.params.id));
    if (!recipe) {
        res.status(404).json({ error: 'No such recipe' });
        return;
    }
    res.json(recipe);
});

app.get('/about', (req, res) => {
    res.send('Recipe Box collects family recipes.');
});

app.listen(3000, () => {
    console.log('Recipe Box is running on port 3000');
});