When you’re diving into the world of building dynamic web applications with Node.js, one nifty tool you shouldn’t miss out on is a templating engine. These engines make crafting HTML content a breeze. Among the crowd, Embedded JavaScript (EJS) stands out as a popular and versatile choice. Let’s explore how EJS can streamline your web development, bringing simplicity and efficiency to your projects.
First things first, setting up your Node application is a must. You’ll need to install some core packages, specifically Express and EJS. Express is your go-to web framework for handling HTTP requests and responses, and EJS is what will power your HTML templates.
// Install Express and EJS
npm install express ejs --save
With these packages installed, setting up your Express application to use EJS as the templating engine is pretty straightforward.
// Filename - index.js
const express = require('express');
const app = express();
// Set EJS as the templating engine
app.set('view engine', 'ejs');
Next up, it’s all about creating those EJS templates. Think of EJS templates as HTML files sprinkled with JavaScript. By default, Express looks for these templates in a folder named views. So, make sure to create a views folder in your project directory and toss your EJS templates in there.
For instance, a really simple home.ejs template could look something like this:
<!-- views/home.ejs -->
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
<style>
body {
background-color: skyblue;
color: white;
font-size: 2em;
}
</style>
</head>
<body>
<center>This is our home page.</center>
</body>
</html>
To bring your home.ejs template to life, you’ll need to set up a route in your Express app that uses the res.render method.
// Define a route to render the home.ejs template
app.get('/home', (req, res) => {
res.render('home');
});
Run your application, head to the /home route, and voila! Express will render and send the home.ejs template as HTML to the client.
EJS shines when it comes to injecting dynamic data into your templates. Imagine having a user object that you want to display on your page:
// Define a user object
const user = {
name: 'John Doe',
age: 30
};
// Define a route to render the home.ejs template with dynamic data
app.get('/home', (req, res) => {
res.render('home', { user });
});
Using EJS tags, you can access this dynamic data right within your template:
<!-- views/home.ejs -->
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
<style>
body {
background-color: skyblue;
color: white;
font-size: 2em;
}
</style>
</head>
<body>
<center>Welcome, <%= user.name %></center>
<p>You are <%= user.age %> years old.</p>
</body>
</html>
EJS offers various tags that let you embed JavaScript logic directly within your HTML templates. Some common tags include:
-
Scriptlet Tag (
<% %>): Ideal for control flow and holding JavaScript code.<!-- views/home.ejs --> <body> <% if (user.age >= 18) { %> <p>You are an adult.</p> <% } else { %> <p>You are a minor.</p> <% } %> </body> -
Output Tags (
<%= %>and<%- %>): These tags evaluate a value and render the result in the browser.<!-- views/home.ejs --> <body> <p>Your name is <%= user.name %>.</p> </body>
Another cool feature of EJS is support for partial templates, allowing you to reuse common HTML fragments across different pages. Although EJS doesn’t natively support layouts, you can create your own by making partials for each section and including them in your main template.
Take the header and footer, for example:
<!-- views/partials/header.ejs -->
<header>
<h1>My Website</h1>
</header>
<!-- views/partials/footer.ejs -->
<footer>
<p>© 2024 My Website</p>
</footer>
You can then include these partials in your main template like this:
<!-- views/home.ejs -->
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
</head>
<body>
<%- include('./partials/header'); -%>
<center>Welcome, <%= user.name %></center>
<%- include('./partials/footer'); -%>
</body>
</html>
For a more practical example, say you want to create a form that calculates the square and cube of a number entered by the user. Start by making the form in your EJS template:
<!-- views/calculate.ejs -->
<!DOCTYPE html>
<html>
<head>
<title>Calculate</title>
</head>
<body>
<h1>Enter a number:</h1>
<form action="/calculate" method="post">
<input type="number" id="number" name="number" required>
<button type="submit">Calculate</button>
</form>
<% if (result) { %>
<p>Square: <%= result.square %></p>
<p>Cube: <%= result.cube %></p>
<% } %>
</body>
</html>
Next, handle the form submission and display the results using Express:
// Define a route to handle form submission and render results
app.post('/calculate', (req, res) => {
const number = parseInt(req.body.number);
const result = {
square: number * number,
cube: number * number * number
};
res.render('calculate', { result });
});
And that’s it! Now, you have a form that dynamically calculates and displays the square and cube of an input number.
Using EJS in your Node.js apps can greatly boost your efficiency and capability to generate dynamic HTML content. Its simple yet powerful features, such as partial templates and dynamic data injection, make building server-rendered web applications a walk in the park. Whether you’re crafting a simple web page or diving into a complex application, EJS equips you with the tools to create engaging, dynamic user interfaces effortlessly.
By sticking to these guidelines and examples, you can harness EJS to streamline your web development workflow, delivering rich, dynamic web pages to your users with ease. Get creative and see where EJS can take your projects!