EJS Installation

Overview

In this section, we will guide beginners through the installation process of EJS. We will provide step-by-step instructions on how to install the necessary software and modules to get started with EJS. We will also explain the prerequisites for using EJS and provide helpful tips to ensure a smooth installation process.

👍By the end of this section, beginners will have a solid understanding of the software requirements for using EJS and will be able to successfully install EJS and its dependencies. Whether you are a web development novice or an experienced developer new to EJS, this section will provide a comprehensive guide to get you up and running with EJS quickly and easily.

Prerequisites

Note

Please click on the name of the software to go to the official download website!

Download Node.js.
Download VS Code.

Installation Steps for EJS

Follow these steps to install EJS. At this point, you should have Node.js and VS Code installed on your local computer.

Create a new project directory.

a. Open your terminal or command prompt.

b. Move to your desktop by typing the following command:
```
cd Desktop
```
c. Create a new directory for your project by entering the following command:
```
mkdir my-ejs-project
```
In your same terminal, navigate to the project directory by entering the following command in the terminal.
```
cd my-ejs-project
```
In the terminal, run the following command to open your project directory in "Visual Studio Code".
```
code .
```
Once the "Visual Studio Code" is opened, open the console by pressing ctrl+J (Windows) or command+J (Mac) to open the console.
Use the following command to install EJS using npm (Node Package Manager) in the console. This will create a "package.json" file in the project directory.
```
npm init -y
```
Install Express module.

a. Enter the following command in the terminal.

b. This will install Express as a dependency for your project.
```
npm install express
```
Install EJS module.

a. Enter the following command in the terminal.

b. This will install EJS as a dependency for your project.
```
npm install ejs
```
If you have successfully installed both npm and EJS, your "package.json" should show npm and EJS in "dependencies".
Create a new file in you project directory named "app.js".

a. This will serve as the main entry point for your application.
Require the "express" module by adding the following line to the top of your "app.js".
```
const express = require(`express`);
```
Create an instance of the Express application by adding the following line in your "app.js".
```
const app = express();
```
Set the view engine to EJS by adding the following line in your "app.js".
```
app.set(`view engine`,  `ejs`);
```
Create a route for your application by adding the following lines. This route will render a file named "index.ejs" located in the "views" directory. Now let's create this file!
```
app.get('/', (req, res) => {
      res.render('index');
});
```
Create a "views" directory in your project directory.
Creae a new file in the "views" directory named "index.ejs".

Add this line to bottom of your "app.js" file.

app.listen(8080, ()=>{
      console.log("Server is listening on port 8080");
})

Suceess

Now you are ready to explore the dynamics of EJS!

Outcome

npm i

EJS Tags

Tag	Description
`<%`	Scriptlet' tag, for control-flow, no output
`<%_`	Whitespace Slurping' Scriptlet tag, strips all whitespace before it
`<%=`	Outputs the value into the template (escaped)
`<%-`	Outputs the unescaped value into the template
`<%#`	Comment tag, no execution, no output
`<%%`	Outputs a literal '<%'
`%%>`	Outputs a literal '%>'
`%>`	Plain ending tag
`-%>`	Trim-mode ('newline slurp') tag, trims following newline
`_%>`	Whitespace Slurping' ending tag, removes all whitespace after it

Info

It is recommended that you familiarize yourself with these tags before starting to use EJS.