Template Engines: EJS and Pug
Render dynamic HTML with template engines. Learn EJS and Pug.
Template Engines
Generate dynamic HTML on the server. Good for SEO and initial page load.
EJS (Embedded JavaScript)
```bash npm install ejs ```
```javascript const express = require('express'); const app = express();
app.set('view engine', 'ejs'); app.set('views', './views');
app.get('/user/:name', (req, res) => { res.render('profile', { username: req.params.name, age: 25, hobbies: ['coding', 'reading', 'gaming'] }); });
app.listen(3000); ```
```html <!-- views/profile.ejs --> <!DOCTYPE html> <html> <head> <title><%= username %>'s Profile</title> </head> <body> <h1>Welcome, <%= username %>!</h1> <p>Age: <%= age %></p> <h2>Hobbies:</h2> <ul> <% hobbies.forEach(hobby => { %> <li><%= hobby %></li> <% }); %> </ul> <% if (age >= 18) { %> <p>You are an adult</p> <% } %> </body> </html> ```
Pug (formerly Jade)
```bash npm install pug ```
```javascript app.set('view engine', 'pug');
app.get('/products', (req, res) => { res.render('products', { title: 'Our Products', products: [ { name: 'Laptop', price: 999 }, { name: 'Phone', price: 699 } ] }); }); ```
```pug //- views/products.pug doctype html html head title= title body h1= title each product in products .product h2= product.name p Price: $#{product.price} if products.length === 0 p No products available ```
Partials (EJS)
```html <!-- views/partials/header.ejs --> <header> <nav> <a href="/">Home</a> <a href="/about">About</a> </nav> </header>
<!-- views/home.ejs --> <!DOCTYPE html> <html> <body> <%- include('partials/header') %> <main> <h1>Welcome Home</h1> </main> <%- include('partials/footer') %> </body> </html> ```
Real Example: Blog
```javascript app.get('/blog', async (req, res) => { const posts = await Post.find().sort({ date: -1 }); res.render('blog', { title: 'My Blog', posts }); }); ```
```html <!-- views/blog.ejs --> <!DOCTYPE html> <html> <head> <title><%= title %></title> </head> <body> <h1><%= title %></h1> <% posts.forEach(post => { %> <article> <h2><%= post.title %></h2> <p><%= post.excerpt %></p> <a href="/blog/<%= post.slug %>">Read more</a> </article> <% }); %> </body> </html> ```
Key Takeaway
EJS uses JavaScript syntax, Pug uses indentation. Use partials for reusable components. Good for blogs, dashboards, landing pages. For complex UIs, consider React/Vue.