Express.js

קבצים סטטיים ותבניות (EJS)

לא כל שרת הוא API שמחזיר JSON. הרבה פעמים צריך להגיש אתר: קובצי HTML, CSS, תמונות, ודפים שנבנים עם נתונים מהשרת. לשני הצרכים האלה יש ב-Express פתרון מובנה.

express.static: להגיש תיקייה שלמה

import express from 'express';
import path from 'node:path';

const app = express();

// כל קובץ בתיקייה public זמין בכתובת לפי שמו
app.use(express.static(path.join(import.meta.dirname, 'public')));

app.listen(3000);

public/
├── index.html        →  http://localhost:3000/
├── css/style.css     →  http://localhost:3000/css/style.css
└── img/logo.png      →  http://localhost:3000/img/logo.png

• index.html מוגש אוטומטית כשפונים לתיקייה.
• משתמשים ב-import.meta.dirname כדי שהנתיב יעבוד לא משנה מאיזו תיקייה מריצים את השרת.
• אפשר קידומת: app.use('/static', express.static('public')) מגיש את public/logo.png ב-/static/logo.png.

מטמון בפרודקשן

app.use(express.static('public', {
    maxAge: '1d',     // הדפדפן שומר את הקבצים יום אחד
    etag: true,
}));

מנוע תבניות: HTML עם נתונים

כשהדף תלוי בנתונים (רשימת מוצרים, פרופיל משתמש), בונים אותו בשרת מתבנית. EJS היא התבנית הפשוטה ביותר, כי היא בעצם HTML עם JavaScript קטן בתוכו:

npm install ejs

app.set('view engine', 'ejs');
app.set('views', path.join(import.meta.dirname, 'views'));

app.get('/products', async (req, res) => {
    const products = await getProducts();
    res.render('products', { title: 'המוצרים שלנו', products });
});

<!-- views/products.ejs -->
<!DOCTYPE html>
<html lang="he" dir="rtl">
<head><title><%= title %></title></head>
<body>
    <h1><%= title %></h1>
    <% if (products.length === 0) { %>
        <p>אין מוצרים כרגע.</p>
    <% } %>
    <ul>
        <% products.forEach((product) => { %>
            <li><%= product.name %> - ₪<%= product.price %></li>
        <% }) %>
    </ul>
</body>
</html>

מתי תבניות ומתי API

• תבניות בשרת - אתר תוכן, דפי ניהול, מקומות שבהם SEO ומהירות טעינה ראשונה חשובים.
• API + React בצד הלקוח - אפליקציה אינטראקטיבית. אז Express מחזיר JSON, ו-React בונה את הממשק.

אפשר גם לשלב: Express שמגיש את קובצי ה-build של React דרך express.static, ולצידו נתיבי /api.

דוגמאות מלאות להרצה

• static.js - הגשת תיקיית public עם HTML, CSS ו-JavaScript
• template.js - דפי EJS עם רשימת משתמשים ודף משתמש