Lessons 276 & 277 – Complete 2020 Web Development Bootcamp

Lesson 276 – Templates? Why do we need templates?

In order to send information to the browser in Express, you use the app.get () method. This is the basic code –

app.get("/", function(req, res) {
	
	var today = new Date();
	var currentDay = today.getDay();

	if(currentDay === 6 || currentDay === 0) {
		res.send("<h1>Yay, it's the weekend!</h1>");
	} else {
		res.send("<h1>Boo! I have to work!</h1>");
	}

});

In the above code, the if/else statement determines whether or not the current day is a weekday or a weekend day and sends a response to the browser based upon which day it is. The res.send() method is used to send the response and it can be used to send plain text or (as in the above example) html code and text.

The res.send() method can only send a single piece of date. If you need to send multiple pieces of data, you need to use the res.write() method. Once you have finished with all of your res.writes you have to call the res.send() method.

So using the res.write() method, the above code becomes –

app.get("/", function(req, res) {
	
	var today = new Date();
	var currentDay = today.getDay();

	if(currentDay === 6 || currentDay === 0) {
		res.write("<h1>Yay, it's the weekend!</h1>");
	} else {
		res.write("<h1>Boo! I have to work!</h1>");
		res.write("<p>It is not the weekend!</p>");
		res.send();
	}

});

Instead of having to res.write every single line of html code to create a web page, you can use res.sendFile() to send an entire html file. So using res.sendFile() the else statement from the above code becomes –

app.get("/", function(req, res) {
	
	var today = new Date();
	var currentDay = today.getDay();

	if(currentDay === 6 || currentDay === 0) {
		res.write("<h1>Yay, it's the weekend!</h1>");
	} else {
		
		res.sendFile(__dirname + "/index.html");
	}

});

To avoid having to write a separate html page for the weekend end response and the weekday response, you need to use templating which is the next lesson…

Lesson 277 – Creating your first EJS templates

EJS stands for Embedded JavaScript templating.

The documentation for getting started with EJS can be found at https://ejs.co/.

This github wiki page – https://github.com/mde/ejs/wiki/Using-EJS-with-Express – contains information on how to use EJS with Express.

To use EJS you need to first install into into your project directory (folder) using this code in the command line –

npm i ejs

In order to tell your app to use EJS, you need to put the following code in your app.js file –

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

It is very important that the above line of code be placed below this one –

const app = express();

So together the two lines of code will look like this –

const app = express();

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

If you place –

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

above –

const app = express();

it won’t work as app will not have been defined yet and you will get errors stating that app was used before it was declared.

In order to use EJS, you need to create a folder in your project directory called “views”. This is where the view engine will look for the files you are trying to render.

You then have to create a new ejs file in the views folder – for example, you can create a file called list.ejs.

Inside the list.ejs file, you will be writing html code.

An EJS marker looks like this –

<%= EJS %> 

The marker tells the ejs file where to place a particular variable.

In this code in the list.ejs file –

<!DOCTYPE html>
<html>
<head>
	<title>To Do List</title>
</head>
<body>

	<h1>It's a <%= kindOfDay %>!</h1>
	

</body>
</html>

The <%= kindOfDay %> marker tells the app.js file where to render the kindOfDay variable which was created as an object in the res.render() method inside of the app.get() method in the app.js file.

This is the code for the app.get() method in the app.js file. You can see the res.render() method which renders creates a kindOfDay object with a value of the variable “day” and renders it to the list.ejs file.

app.get("/", function(req, res) {
	
	var today = new Date();
	var currentDay = today.getDay();
	var day = "";

if(currentDay === 0) {
		day = "Sunday";
		
	} 

else if (currentDay === 1) {
		day = "Monday";
		
	}

else if (currentDay === 2) {
		day = "Tuesday";
		
	}

else if (currentDay === 3) {
		day = "Wednesday";
		
	}

else if (currentDay === 4) {
		day = "Thursday";
		
	}

else if (currentDay === 5) {
		day = "Friday";
		
	} else {
		day = "Saturday";
	}

	res.render("list", {kindOfDay: day});

});