What is Templating

Templating allows us to define a preset pattern for a webpage, that we can modify dynamically.

For example, we could define a single search template that displays all of the results for a given search term. We won't know what the term is or how many results there are ahead of time, but we will create the webpage with the results, on the fly.

Embedded JavaScript

We are going to be utilizing an npm package called EJS to help build our templates. But what is EJS, and what does it do?

Well, EJS is basically, a package that converts some Js code into HTML code. According to their website, EJS is a simple templating language that lets you generate HTML markup with plain JavaScript. No religiousness about how to organize things. No reinvention of iteration and control-flow. It's just plain JavaScript.

So we can write our templating code in JavaScript, and EJS will convert what we need into useful HTML code.

Installing EJS

To get started, we need to set up our Express environment, so we need to:

1. Create our "parent" working directory.
2. Install Express at the root level.
3. (optional) - Install nodemon for server restarts.
4. Create our index.js in the root directory.

Now that we have our index.js file, we can write our server code to:

• - start the server
• - listen on the defined port
• - set up our basic get request on the root directory

• JavaScript
• index.js | Server Code
•  
• // Set the variables and requires
• const express = require( 'express' );
• const app = express();
• const port = 3000;
•  
• // get request for root dir
• app.get( '/', ( req, res ) => {
  • res.send('Responding on Root Directory.')
• })
•  
• // Start Server : Listening on {port}
• app.listen( port, () => {
  • console.log(`Server Online : Listening on port: ${port}`);
• })

So we now have express installed with our corresponding package.json, and index.js, which means that it's now time to get EJS set up and running. To to this we are going to use the express method set(). Information on this can be found here. And we are going to be utilizing the view engine property of the set() method. As described in the express documentation, view engine is the default engine extension to use when omitted.

So we're going to add the following line to our index.js:

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

• npm i ejs

One thing to note here, we do not need to require('ejs') in out index.js Server File. This is because when we defined

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

Now, because of the nature of the express "view engine", it is going to be looking for our templates, or "views" to reside within a views directory, so we are going to create that now. In the "Parent" directory, create a new sub-directory called "views".

*note: if we look at the documentation for the express method set(), under the view property, we see that we could use any folder we like for the view folder, but views is the default.

Now we have everything we need installed:

1. Our "Parent" directory set up.
2. Our package.json file is set.
3. Express is installed (node_modules directory)
4. Our index.js Server File is set
5. nodemon is installed (for build purposes)
6. EJS is installed.
7. and we have our views folder for our templates.

Final Code

so far ...

We have everything we need to start defining our views (templates). Here is our current directory structure:

•   Parent Directory
  •   node_modules
  •   views
  • index.js
  • package-lock.json
  • package.json

and here is what we have for our Server Code so far:

• JavaScript
• index.js | Server Code
•  
• // Set the variables and requires
• const express = require( 'express' );
• const app = express();
• const port = 3000;
•  
• // set our view engine to ejs
• app.set( 'view engine', 'ejs' );
•  
• // get request for root dir
• app.get( '/', ( req, res ) => {
  • res.send('Responding on Root Directory.')
• })
•  
• // Start Server : Listening on {port}
• app.listen( port, () => {
  • console.log(`Server Online : Listening on port: ${port}`);
• })

Next we will start defining our views and setting up our templates.