Expressjs Serving Static Files And Templating Ejs Pug Complete Guide

Top 10 Questions and Answers on Express.js Serving Static Files and Templating with EJS and Pug

1. How do I serve static files in Express.js?

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

Now, any files in the public directory can be accessed directly by the URL path. For example, http://localhost:3000/images/logo.png for an image named logo.png located in public/images.

2. What is EJS (Embedded JavaScript) in Express.js and how do I set it up?

Answer: EJS is a simple templating engine that lets you generate HTML markup using JavaScript. It supports server-side rendering and is very easy to integrate with Express.js. To set up EJS, install it first:

npm install ejs

Then, set EJS as the templating engine in your Express app configuration:

app.set('view engine', 'ejs');

Create an views folder and put your .ejs files there. To render an index.ejs file, use:

app.get('/', (req, res) => {
    res.render('index', { title: 'Home Page' });
});

Here, the title is a variable passed to the index.ejs template.

3. How can I use Pug templating engine with Express.js?

Answer: Pug (formerly Jade) is a robust, high-performance templating engine for Node.js. It makes writing HTML cleaner and more maintainable by allowing the use of clean syntax, partials, and inheritance. To use Pug in your Express.js application, first install it:

npm install pug

Next, set it as your templating engine:

app.set('view engine', 'pug');

Create a views directory and place your .pug files within it. Then render them in your route handlers:

app.get('/', (req, res) => {
    res.render('index', { title: 'Welcome' });
});

In the index.pug file, you can utilize Pug's syntax to dynamically generate HTML.

4. How do I include a partial in both EJS and Pug?

Answer: Including partials in both EJS and Pug helps manage code duplication and improves organization.

For EJS: Create a partial file, e.g., header.ejs in the views/partials folder. To include this partial in another file, use:

<%- include('partials/header') %>

For Pug: In Pug, you can include partials in a similar way. For example, create a file named header.pug and include it as follows:

include header

Make sure all partials are in the views folder or specify a different path if necessary.

5. How do I pass variables to templates in both EJS and Pug?

Answer: Passing variables to templates in EJS or Pug allows you to dynamically generate content based on server-side data.

For EJS: You can pass variables directly as the second argument to res.render:

app.get('/', (req, res) => {
    res.render('index', { title: 'Home', message: 'Welcome to my site!' });
});

In index.ejs, you can access these variables using <%= %>:

<title><%= title %></title>
<p><%= message %></p>

For Pug: The approach is similar. Pass variables in the render method:

app.get('/', (req, res) => {
    res.render('index', { title: 'Home', message: 'Welcome to my site!' });
});

Then access them using Pug syntax in index.pug:

title= title
p= message

6. How do I use conditional logic in EJS and Pug?

Answer: Conditional logic helps to manage the rendering of content based on certain conditions.

For EJS: In EJS, you can use traditional JavaScript if-else statements wrapped in <% %> blocks:

<% if (user) { %>
    <h1>Hello, <%= user.name %></h1>
<% } else { %>
    <h1>Please log in</h1>
<% } %>

For Pug: Pug also supports conditional logic with a more concise syntax:

if user
    h1 Hello,= user.name
else
    h1 Please log in

7. Can I use loops in EJS and Pug?

Answer: Yes, you can iterate over arrays using loops in both EJS and Pug to dynamically render content.

For EJS: Use a for loop or forEach method:

<ul>
    <% items.forEach((item) => { %>
        <li><%= item %></li>
    <% }) %>
</ul>

For Pug: Pug simplifies this with a each loop:

ul
    each item in items
        li= item

8. How can I include multiple static folders in Express?

Answer: You can serve files from multiple directories by calling express.static multiple times with different paths:

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

With this configuration, Express.js will look first in the public directory and then in the another directory for requested files.

9. What is the difference between EJS and Pug?

Answer: While both EJS and Pug are templating engines for Express.js, they have different philosophies.

• EJS (Embedded JavaScript): EJS is an embedded JavaScript templating engine which lets you generate HTML markup with plain JavaScript. Its syntax is HTML-centric and allows you to write HTML directly with embedded JavaScript inside <% %> tags.
• Pug (formerly Jade): Pug is a more compact templating engine with a clean and minimalistic syntax. It uses indentation and whitespace instead of tags and closing tags. The code looks more like CSS and is often simpler and more readable for templating purposes.

10. How do I handle errors in rendering templates with EJS or Pug in Express?

Answer: To handle errors during the rendering process, you can use a try-catch block around the res.render call or pass an error-handling middleware function.

Basic Error Handling with try-catch:

app.get('/', async (req, res) => {
    try {
        const data = await someAsyncDataFetch();
        res.render('index', data);
    } catch (err) {
        res.status(500).send('Server Error');
    }
});

Error Handling Middleware: You can create an error-handling middleware to catch all errors:

app.use((err, req, res, next) => {
    console.error(err.stack);
    res.status(500).send('Something broke!');
});

Make sure to place this middleware after all other route handlers and middleware.