How to use EJS

To use ejs, there are a few considerations that have to be met:

1. the ejs package has to be installed with node.
2. ejs files are saved with the ejs extension.
3. ejs files are "served" from a views sub-directory, similar to the "public" directory we already learned about.
4. serving "static" files with express, we used the send or sendFile method. with ejs, we use "render" or "renderFile".

Installing ejs

To utilize ejs in a project we need to install the package with node. BTW, the npm website for ejs is @ https://www.npmjs.com/package/ejs. We are assuming here that the CWD for the app has been set up, and that you have initialized node (npm init).

To install ejs into our application, from your terminal of choice, run:

• npm install ejs

The next thing we need to do is to create a "views" directory in the "root" of our CWD. When we save html files as ejs files, they will be placed into this "views" directory, similar to when we placed our html files into our "public" directory with express.

With all of this completed, our file structure should look something like this:

• cwd
  •   node_modules  (with express and ejs installed)
  •   views
    •   index.ejs
  •   index.js
  •   package-lock.json
  •   package.json

So instead of serving html files from a "public" directory, you're going to be serving ejs files from the "views" directory. More info can be found here.

Integrating EJS

And lastly, we need to integrate the ejs code into our JavaScript and HTML coding.

For the JavaScript (our index.js server file), we used to have to define the view engine, which allowed express to use ejs for "rendering" it's views. We did this with the set method:

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

This is now built into express. It is mentioned here in case you ever see this code, you'll know what it means. But this is the old way of using ejs. We no longer have to define a "view engine".

and in the same Js file, we can "render" our actual ejs file:

• res.render('Hello', { name: 'badDoggy' });

What we have done here with the render is created an object with a key: = "name", and value: = "badDoggy". We can access this object within our ejs files. Also, just like any object, we can define multiple key/value pairs, separated by commas, like so:

• res.render('Hello', { name: 'badDoggy', profile: 'Very Handsome' });

Incorporating into our ejs (html) file

Remember that an ejs file is simply an html file that has been saved with the ejs extension, inside our views directory. This file is built on html coding, but because it is a ejs file, we can embed JavaScript coding and functionality. So we can use this object that we have just created from our separate JavaScript file.

To actually use this object inside our ejs file, we add the following line of code (inside the ejs file):

• <h4>Hello <%= name %> </h4>

The actual output for this ejs code would be:

• Hello badDoggy

The html <h4> element contains the string "Hello (space) followed by the value, "badDoggy", that was created in the JavaScript file when we "rendered" the object. Notice that "name" way the key assigned by the render, and the ejs code is outputting the value of that key.

The <%= %> designates this as "JavaScript" code that is running inside an html environment. And in this code, we are passing in the "value" of our object that we created inside our separate Js file.

This is the fundamental of how ejs works. We can create usable objects in a JavaScript file and "render" them out where they can be accessed within an ejs file.

<%= %> has a very specific meaning and there are other ejs elements which can be found here and also on the ejs documentation website.