DEV Community: Mgbemena Chinedu Victor

Introduction to EJS: A Guide to Building Dynamic Web Applications

Mgbemena Chinedu Victor — Tue, 14 Feb 2023 23:57:09 +0000

Introduction

Embedded JavaScript, or EJS, is a simple and direct templating language that enables JavaScript to generate HTML. It's frequently used in Express.js, a Node.js framework for creating web applications, but it can also be used in other JavaScript environments.

This article will cover the fundamentals of EJS and how to utilize EJS to build dynamic web applications.

Installation

To use EJS, you'll need to have Node.js and npm (Node Package Manager) installed on your computer. Once that's done, you can create a new Node.js project by running the following command in your terminal:

npm init -y

This will also create a new package.json file in the root directory of your project, which you can use to manage your dependencies.

To continue, you will have to install the Express and EJS packages by entering the following npm commands also in your terminal:

npm install express # install express
# and
npm install ejs # install ejs

This will add Express and EJS as dependencies to your project’s package.json.

How Do EJS Templates Look?

EJS templates have additional unique tags that let you include dynamic content, but they still look similar to regular HTML files. This makes EJS templates a fantastic option because anyone familiar with HTML can easily understand and work with them.

Examples of these extra tags are:

<% and %>: These tags allow JavaScript code to run without outputting anything to the template. For example, you can use these tags to define variables or call functions.
<%= and %>: These tags are used to output the result of a JavaScript expression to the template. For example, you can use these tags to insert data into the template.
<%- and %>: These tags are used to output the result of a JavaScript expression to the template. However, unlike <%= and %> tags, they do not escape the output.
<%# and %>: These tags add template comments.

Here's an example of what an EJS template looks like:

<!DOCTYPE html>
<html>
<head>
  <title>My List</title>
</head>
<body>
  <% var message = "Hello, World!"; %>
  <h1><%= message %></h1>
  <%# This is a comment; it will not be included in the final output %>
  <% if (items.length === 0) { %>
    <p>No items to display.</p>
  <% } %>
</body>
</html>

As you progress through the article, you will learn how to utilize these tags in your code.

Setting Up EJS in Express.js

To set up EJS in Express.js, first, require the express module to initialize an Express.js app. Then, set ejs as the view engine using the app.set() method:

const express = require('express');
const app = express();

// Setting EJS as the view engine
app.set('view engine', 'ejs');

//Server is listening on port 5000
app.listen(5000, () => {
    console.log(`App listening at port 5000`);
  })

After setting the view engine to ejs, you can now create a new folder in the root directory of your project called views and add your EJS templates there.

💡 It's important to remember that EJS always looks for templates in the views directory. As a result, it is critical that you always keep your templates in this directory so that the EJS engine can find and process them.

For example, An index.ejs in your views folder will be rendered using the following code in a route:

const express = require('express');
const app = express();

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

//Rendering index.ejs 
app.get('/', (req, res) => {
    res.render('index');
});

app.listen(5000, () => {
    console.log(`App listening at port 5000`);
  })

The render function, provided by Express, will look for a template with the same name as the first argument you pass to it in the views folder that is index and renders it when the root route is accessed using the view engine you set up earlier.

Passing Data to EJS Templates

EJS can pass data to templates and use that data to generate dynamic HTML. You can pass data to a template by providing an object as the second argument to the render function. For instance, let's say you want to pass a variable called name to your index.ejs template:

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

You can use the variable in your index.ejs template in this way:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>EJS FOR BEGINNERS</title>
</head>
<body>
    <h1>Hello <%= name %>!</h1>   
</body>
</html>

When the template is rendered, that is, when the script is executed, the name variable will be replaced with the value(Alice) passed to the render function.

Using EJS to Include Reusable Template Components

EJS also allows you to combine different templates for different sections of your code, like your head, header, and footer sections.

You can add .ejs files to a current template using the <%- include (’file.ejs’) %> statement.

For example, if you have a template called header.ejs that you want to include in your index.ejs template, you can use the following code

in your index.ejs template:

// header.ejs
<header>
    <nav>
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/about">About</a></li>
            <li><a href="/contact">Contact</a></li>
        </ul>
    </nav>
    <h1>My Website</h1>
</header>

// index.ejs
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>EJS FOR BEGINNERS</title>
</head>
<body>
        <header>
                    <%- include ('header.ejs') %>
        </header>
    <h1>Hello <%= name %>!</h1>   
</body>
</html>

This will include the contents of the header.ejs template to that point in the index.ejs template.

It is common practice to save templates that you will want to reuse across multiple pages in a partials subdirectory in the views directory.

To include the header in your code after doing this, attach the file path to the former syntax:

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

The **<%- include %>** tag makes it simple to reuse common HTML elements across multiple pages or views, simplifies code maintenance, and preserves a consistent look across your application.

Iterating Over Data in EJS

EJS also allows you to use JavaScript's looping statements to generate dynamic HTML. To understand this better, update your express app to hold some array containing data. For example:

const express = require('express');
const app = express();

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

//Rendering index.ejs 
app.get('/', (req, res) => {
    res.render('index');
});

app.listen(5000, () => {
    console.log(`App listening at port 5000`);
  })

Then, update your **index.ejs** file to display the array:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>EJS FOR BEGINNERS</title>
</head>
<body>
        <header>
                    <%- include ('header.ejs') %>
        </header>
    <h1>Hello <%= name %>!</h1>   
    <ul>
    <% for (let i = 0; i < data.length; i++) { %>
        <li><%= data[i] %></li>
    <% } %>
    </ul>
</body>
</html>

In this code block, the <%…%> EJS tag is used to incorporate pure JavaScript into the template; this JavaScript takes the form of a for loop that iterates over the elements in the data array. Each element of the array is displayed using the <li> tag, with the EJS expression <%= data[i] %> used to output the value of the data[i] variable.

Conditional Statements in EJS

You can also use JavaScript conditional statements to make your express app more dynamic. With conditional statements like if..else statements, You can choose to display some part of your app or not. That's the power of being dynamic given to you by EJS!

To understand how to use the if-else JavaScript statement to conditionally render certain parts of the template, set up your express app to contain a variable numberOfNames. For example:

const express = require('express');
const app = express();

//Adding test data 
const data = ["ada", "abba", "goodness", "david", "patrick"]

//Setting the view engine to ejs
app.set('view engine', 'ejs');

let numberOfNames = data.length;

//Rendering index.ejs 
app.get('/', (req, res) => {
    res.render('index', {name:"Alice", data : data, numberOfNames: numberOfNames});
});

app.listen(5000, () => {
    console.log(`App listening at port 5000`);
  })

The variable numberOfNames created below the for loop saves the number of elements in the data array. Then, update your index.ejs file to perform an action based on some condition about the numberOfNames variable.

Like so:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>EJS FOR BEGINNERS</title>
</head>
<body>
        <header>
                    <%- include ('header.ejs') %>
        </header>
    <h1>Hello <%= name %>!</h1>   
    <ul>
    <% for (let i = 0; i < data.length; i++) { %>
        <li><%= data[i] %></li>
    <% } %>
    </ul>
    <% if (numberOfNames >= 5) {%>
        <p> There are at least 5 people on the list </p>
    <% } else { %>
        <p> There are less than 5 people on the list</p>
    <% } %>
</body>
</html>

The if statement in this code block displays information about the number of names conditionally. The EJS tags surrounding the if statement control the JavaScript flow and allow the code to make decisions based on specified conditions.

You can also see how the displayed information changes when you reduce the number of elements in the data array to less than 5. This demonstrates how EJS can dynamically adjust the output based on the input data.

Conclusion

EJS is a simple and powerful templating language that allows you to generate dynamic HTML using JavaScript. It is easy to set up and use and is an excellent choice for building web applications with Node.js and Express.js. By understanding the basics of EJS, including how to pass data to templates, include other templates, and use looping and conditional statements, you can build more dynamic and interactive web applications.

How To Get the MIME Type of a File in Node.js

Mgbemena Chinedu Victor — Wed, 08 Feb 2023 13:58:18 +0000

Introduction

The ability to manage various file types is essential for many applications in this modern world. The MIME type, which specifies a file's format and enables computing systems decide how to handle the file, is one of the most crucial pieces of information when working with files. This article will cover obtaining a file's MIME type using different packages in Node.js.

What Is a MIME Type?

The file MIME (Multipurpose Internet Mail Extensions) type is a string identifier that specifies the format of a file. Web browsers and servers use it to determine how to handle a file when requesting or uploading a file.

The IETF's RFC 6838 defines and standardizes MIME types. The Internet Assigned Numbers Authority (IANA) manages all official MIME types, and their Media Types page comprises the most recent and comprehensive list.

Components of a MIME Type

'type/subtype'

//EXAMPLES OF MIME TYPES 
'text/plain'
'image/jpeg'

A MIME type only has two parts: a type and a subtype, separated by a slash (/), and does not contain any whitespace.
The type designates the broad category the data type belongs to, such as text or image.
The subtype identifies the precise data that the MIME type represents.

It provides more specific information about the file format.

For example, the MIME type 'text/plain' specifies that the file is plain text, while 'image/jpeg' determines that the file is a JPEG image.

The mime package

The package mime is a lightweight npm package that offers a straightforward method for determining a file's MIME type based on its extension and contents. You run the following npm command in your terminal to install this package:

npm install mime

After installation, you can use the package in your code by requiring it as follows:

const mime = require('mime');

The mime package includes a method called getType() available to determine the MIME type of a file. This method takes a file path or extension as an argument.

For example:

const mime = require('mime');
const file_path = 'files\file.txt'
const mime_type = mime.getType(file_path)
console.log(mime_type);
// Output: 'text/plain'

The mime-types Package

You can use the popular npm module, mime-types, to determine the MIME type of a file. To use this package, you need to first install it by running the following npm command in your terminal:

npm install mime-types

Once installed, you can use the available method lookup() to get the file MIME type after requiring it in your code. For example:

const mime = require('mime-types');
const filePath = 'files\e6222886fdc2dc2b847284232e03ba74.jpg';
const mimeType = mime.lookup(filePath);
console.log(mimeType); 
// Output: 'image/jpeg'

The code block above imports the mime-types package and uses it to determine the MIME type of a file located at the specified file path. The lookup() method determines the MIME type based on the file extension. The determined MIME type is then logged to the console. In this case, the file extension is .jpeg, and the mime type is 'image/jpeg'. Note that the lookup() method returns false if the file argument passed is either invalid or not found.

mime-types package is a heavier module than the mime package

The file-type Package

The file-type package is another popular npm module accessible to get the MIME type of a file. To use this package, install it first by running the following npm command in your terminal:

npm install file-type

This package is a pure ESM (ECMAScript Module) package, meaning that it is written using the ECMAScript modules syntax and can only be used using the import keyword.

The file-type package detects the MIME type of binary-based file formats such as buffers and arraybuffers. It is not suitable for text-based file formats like .csv and .svg.

It does this by checking the magic number of the buffer, the first few bytes of the file that are unique to each file format. This allows the package to identify the file type without relying on the file extension or other metadata.

For example:

import { fileTypeFromFile } from 'file-type';

(async () => {
  const type = await fileTypeFromFile('pexels-photo-265129.jpeg');
  console.log(type);

})();
//Output: { ext: 'jpg', mime: 'image/jpeg' }

This script uses the file-type package to determine the file type of a given file by passing the file path as an argument to the fileTypeFromFile function. The returned value is an object containing the file's extension and MIME type and is logged to the console.

The use of an immediately invoked async arrow function in this script enables the await keyword to be used within the function's body to wait for the fileTypeFromFile function to finish before moving on to the following line of code.

Importance of MIME Types

Identifying MIME types is essential for internet communication, as it allows you to determine the type of data sent and received. You can handle data correctly and avoid security issues such as content-sniffing attacks by comprehending and correctly identifying MIME types.

Sending Mails in Node.js Using Nodemailer.

Mgbemena Chinedu Victor — Wed, 08 Feb 2023 13:31:37 +0000

Introduction

Sending emails is a crucial feature for many applications, as it enables applications to communicate important information to users, such as transaction notifications, password reset emails, automated emails, and more.

Setting up your Node.js application to send emails for various purposes like password reset or notifications can be tedious and time-consuming. This is where Nodemailer comes in as a solution.

What is Nodemailer

Nodemailer is a popular Node.js library that simplifies sending emails in your application. It provides a simple, user-friendly API that removes the inner workings of sending emails.

Additionally, Nodemailer offers a variety of transport methods such as SMTP, sendmail and AWS SES, giving developers more flexibility in how they send emails from their application.

With the introduction of Nodemailer, let's move on to getting started with this package and learn how to set it up and use it in your Node.js application to send emails with the Gmail service.

Prerequisites

This guide assumes that you have a basic understanding of Node.js.

You must have Node.js and npm (the Node.js package manager) installed on your machine to follow along. If you don't have them already, you can install them by following this guide: How to Install Node.js and npm on Windows

You can check if you have Node.js and npm installed by running the following commands in your terminal:

node -v
npm -v

You will also need a Gmail account to use the gmail service. If you don't have one, you can create one at www.gmail.com.

To use the Gmail service, you must generate an App Password by Google. To create an App Password, follow this link.

💡 App Passwords are only valid for a limited time, so you will need to generate a new one after a few months.

Getting Started With Nodemailer

The first step to getting started with Nodemailer is to install it in your project. You can do this by entering the following command in your terminal:

npm install nodemailer

This command will install the latest version of Nodemailer in your project and utilize it in your Node.js scripts.

Once Nodemailer is installed, you can require it in your script by using the following code:

const nodemailer = require('nodemailer');

This line of code loads the Nodemailer module and makes it available in your script.

The Transporter Object in Nodemailer

The transporter object in Nodemailer is an object that enables you to send email messages. This object is created using the nodemailer.createTransport() function, which takes an object as an input with the configuration options for the transport method you want to use.

When you create a new transporter object, you need to provide the options required by your chosen transport method.

For example:

To create a new transporter object using the Gmail service:

const transporter = nodemailer.createTransport({
    service: 'gmail',
    auth: {
        user: 'email@gmail.com',
        pass: 'App Password'
    }
});

A new transporter object is created in the above code block by calling the nodemailer.createTransport() function and passing an options object as an argument. The options object passed is used to configure the transport method that the transporter object will use to send emails.
The service property is set to 'gmail', which simply tells Nodemailer to use the Gmail service to send emails.

The auth property contains the authentication details for the Gmail account.

The user and pass properties nested in the auth property are used to specify the email address and App Password created that will be used to send the email.

Once you have created the transporter object, you can use it to send email messages by calling its sendMail() method. This method takes two arguments: an object that contains the email message options and a callback function that is called when the email is sent or if an error occurs.

Here is an example of how to use the sendMail() method to send an email:

const mailOptions = {
    from: 'youremail@example.com',
    to: 'recipientemail@example.com',
    subject: 'Nodemailer',
    text: 'Learn about Nodemailer!'
};

transporter.sendMail(mailOptions, function(error, info){
    if (error) {
        console.log(error);
    } else {
        console.log('Email sent: ' + info.response);
    }
});

The transporter.sendMail() function is called in this code block with two arguments: the mailOptions object and a callback function.

The mailOptions object contains the options for the email message that will be sent. It has four properties:

from: The email address that the email will be sent from.
to: The email address that the email will be sent to.
subject: The title of the email.
text: The body of the email.

The callback function is called after the email has been sent or if an error occurs. The function takes two arguments: error and info. If there is an error in sending the email, the particular error message will be logged to the console.

It's important to mention the info object passed as the second argument to the callback function. The info object contains valuable information about the sent email, such as the message id, the response from the email server, and the accepted recipients.

If the mail was successfully sent to the recipients, you will get a message in your console that looks like this:

Email sent: 250 2.0.0 OK  1674960048 o2-20020a05600c510200b003db16770bc5sm18825wms.6 - gsmtp

Customizations for the mailOptions Object

You can customize the email message by adding attachments and cc/bcc recipients to the mailOptions object.

Adding Attachments to the Mail

To add attachments to an email, you can use the attachments property of the mailOptions object. This property is an array of attachment objects, each containing the following properties:

filename: the name of the attachment file
path: the path to the attachment file

Here is an example of how to add an attachment to an email:

const mailOptions = {
    from: 'youremail@example.com',
    to: 'recipientemail@example.com',
    subject: 'Nodemailer',
    text: 'Learn about Nodemailer!',
    attachments: [
       {   // text file as an attachment
            filename: 'file',
            path: "file.txt"
        },
        {   // binary buffer as an attachment
            filename: 'image',
            path: 'pexels-photo-265129.jpeg'
        }
    ]
};

Adding CC/BCC Recipients to the Mail

To add cc and bcc recipients to an email, you can use the cc and bcc properties of the mailOptions object, respectively. These properties can take a single email address or an array.

For example:

const mailOptions = {
    from: 'youremail@example.com',
    to: 'recipientemail@example.com',
    subject: 'Nodemailer',
    text: 'Learn about Nodemailer!',
        attachments: [
       {   // text file as an attachment
            filename: 'file',
            path: 'file.txt'
        },
        {   // binary buffer as an attachment
            filename: 'image',
            path: 'pexels-photo-265129.jpeg'
        }
    ]

    cc: 'ccrecipient@example.com',
    bcc: ['bccrecipient1@example.com', 'bccrecipient2@example.com']
};

In this example, you added a cc recipient, ccrecipient@example.com, and two bcc recipients, bccrecipient1@example.com and bccrecipient2@example.com.

Importance of Nodemailer

Nodemailer is an essential tool for any Node.js developer looking to add email functionality to their application. It saves a lot of time needed to add this functionality from scratch and is an easy-to-use library.