Previous Lecture Complete and continue  

  Jade

Hello, welcome back to Express.js Works. Now we're selecting Jade, which is the third problem. Jade is a templating language. It allows us to use templates and data to create HTML dynamically, instead of hard-coding all the HTML pages. So the problem is to create a route, /home, which will render the new date. And we need to use Jade. We need to install the Jade as well, because it's an NPM module. OK, so let's go to the editor. I'm in my favorite editor, which is Atom, as of now. Maybe later we'll have something new. So I'm creating 3-jade.js. And start typing. Express equals require express. That's how we import the express.js library. But then we need to instantiate it which you already know how to do. Just invoke express. And then we use this construction, app.set. To set the parameter, view engine. Another parameter is views. So view engine is the name of our library, which is Jade. And views is the name of the folder which will be passed to us. And then we write our route, get home, which is similar to the first exercise. But then, instead of res.end or res.send, we use res.render. The first argument is index, and the second is this object with a date property.

Then app.listen will start the server. We use argv[2], which is the first argument, and argv[3] is the second argument. So in real life, you're probably not gonna use argv for your views. Because that's the name of the folder, you would just know it and relative to your route, you will just create it. For example, like I did create public folder you would create folder and name template. But because we don't want you to create this Jade template by yourself, we just want to provide you with the Jade template and the folder location will be given to you where that file is located. So just to make things simpler, so you don't have to write Jade itself. But, of course, you can replace it and pour into your local template folder. It could be anything. Usually it's called views. By default, it's also called views.

OK, so let's save this file and go to the terminal. In the terminal, I want to run my example. My solution. And it wonderfully crashes, because I have no Jade module installed. So if you see "Cannot find module 'jade'" it's totally fine because if we do LS on the node modulates, there is no Jade. So let's install it, with npm. Install Jade. And I will be using --save because I want to create an entry in package.json. OK. So this shows me that the folder where npm installed, and if I double check, OK, in fact that folder exists, which is wonderful. And I'm using version 1.11 here but please compare with docs. You might need to use a little bit older version for this exercise if you're running into some conflicts. And then let's run it again. So now it should be passing.

OK, wonderful. So it got the template. It rendered the HTML. Everything is fine. So let's actually try to verify it. OK, it passes. Both outputs are identical. Now this is the official solution, which looks exactly as our solution. Now there are many modifications to this example that will also allow you to pass. As I said, you can create your own Jade file. So for example, if I execute expressworks print, it actually shows me the file, the Jade file. So this is the Jade file. You so can just create index.jade and put it in the folder and use that folder name. For example, if you put it in templates, you can use this statement to set your views. But, that's just more work for this exercise. As long as you have the rendering you should be OK. And let's actually bring up the menu, and it shows completed. That's what we wanted.

Discussion
0 comments