Node.js + Express – Tutorial – Handlebars Templating Engine

00:00:01 hello everyone welcome back in the last
00:00:04 video we had a look at Jade the
00:00:07 templating engine Jade and we kind of
00:00:10 played around a little bit with express
00:00:12 so far and I thought well it might be
00:00:15 the best idea to just show you an
00:00:17 alternative to shade right now as Jade
00:00:20 is well you have to kind of like it I'm
00:00:23 not the biggest fan of completing
00:00:26 engines like Jade with white spaces
00:00:29 controlling the flow in the structure of
00:00:31 the document I'm more a fan of classic
00:00:34 HTML and then you just insert some
00:00:37 template expressions to manipulate that
00:00:41 but that's just my preference you may
00:00:43 choose whatever you like therefore
00:00:45 however in this video I will show you
00:00:48 how we can replace Jade with another
00:00:51 templating engine handlebars and I will
00:00:54 show you how to well use handlebars
00:00:57 let's start don't just start by copying
00:01:01 my old folder here and we name it to
00:01:06 handle ours that's just as I said in
00:01:09 earlier video I have this file structure
00:01:13 for my repository where you can find all
00:01:15 the code now that I copied it I will
00:01:19 just appoint by terminal and the first
00:01:21 thing is I will uninstall Jade I don't
00:01:23 have to do that I could let let live
00:01:26 there but I'm not going to use it so on
00:01:28 well I will just get rid of it I will
00:01:31 type NPM uninstall shade and I will
00:01:34 provide the – – save tag to also remove
00:01:39 it from the dependencies in my package
00:01:41 to chasten
00:01:47 and yeah it always helps to be in the
00:01:52 right folder so let me just repeat it
00:01:54 there so now if we open the package of
00:01:57 chase' file you see there is no more
00:01:59 shade in the dependencies area next
00:02:02 things I will install handlebars and I
00:02:05 will install Express handlebars which
00:02:08 again with the save tag to add the
00:02:10 dependencies which is well handlebars
00:02:13 optimized or porridge it to Butte work
00:02:18 really great in a node where it's
00:02:20 specially above Express like the name
00:02:22 implies so now you can see we get this
00:02:25 Express handlebars dependency here and
00:02:28 it's also installed here in our node
00:02:31 modules if we have a look at here
00:02:34 Express handlebars okay so now with that
00:02:38 set up I have to adjust my few engine
00:02:42 here because I'm no longer using Jade to
00:02:46 do this I'll add a new step here first
00:02:50 thing is I will require Express
00:02:53 handlebars which we'll just name is HBS
00:02:56 require Express handlebars there it is
00:03:01 and after doing this I will add a new
00:03:06 entry here where I kind of create a new
00:03:09 engine for our Express app let it know
00:03:11 that I have a new engine available and I
00:03:15 will give this engine an internal name
00:03:18 of HBS and I will use this well this
00:03:26 package just required queue while create
00:03:29 this engine basically and here I want to
00:03:32 give to some options some configuration
00:03:34 the first is the Xtreme property here
00:03:39 where a chest will basically specify the
00:03:42 extension of the files so that Express
00:03:46 is able to recognize which files are
00:03:48 kind of written in handlebars or should
00:03:51 be run through the template and I want
00:03:53 to have dot HBS's extent ads as an
00:03:56 extension and therefore I add HBS here
00:03:59 next thing is
00:04:00 I will set my default layout folder my
00:04:06 default layout name your – layout so I
00:04:11 will show this in a second handlebars
00:04:14 also offers us the possibility to define
00:04:16 layouts where we have a specific block
00:04:19 where then the content of the individual
00:04:21 page will be kind of injected and I'm
00:04:24 telling handlebars here that default
00:04:26 layer to be used is the layout layout
00:04:29 file so like we have layout shade we
00:04:33 will have a layout HPS and this layout
00:04:36 file should be the default they are used
00:04:38 if I don't overwrite this that is
00:04:40 basically what I'm saying here now with
00:04:43 that out of the way what I do here is I
00:04:47 will set my view engine to HBS because
00:04:52 well I set it up here as an engine I
00:04:54 registered it as an engine here in my
00:04:57 Express app and I want to add one more
00:05:01 parameter here this is the layout
00:05:04 directory where layouts will be found
00:05:07 and this should be your name which
00:05:09 always points to the well root directory

00:05:13 of our know chairs up here and then
00:05:17 we'll find it in views folder slash
00:05:22 views and then I will create a subfolder
00:05:25 layouts where all my layout should
00:05:27 should be now with that setup I will
00:05:31 create a folder in my few folder here so
00:05:33 layouts is of course purely optional you
00:05:38 could also just point to the fuse for
00:05:41 itself and not to the layouts subfolder
00:05:44 next thing is I will move my lamps to
00:05:50 shade file into there and I will well
00:05:53 change the the name or the extension of
00:05:56 this file to HPS and of course I also
00:06:00 can't use this so what I will do here is
00:06:03 I will set up a new well html5 skeleton
00:06:08 which I want to use in here I will
00:06:12 output the title
00:06:14 in a second and between the body tags I
00:06:17 want to have the part where the
00:06:18 individual pages can well inject or put
00:06:22 their content into like ones with Jade
00:06:26 we did with this block content statement
00:06:29 here I also will add well the style
00:06:33 sheet which is still in the style sheets
00:06:37 folder style sheet style CSS so how do
00:06:43 we do this how do I insert a title here
00:06:45 and set up the section for the
00:06:48 individual page parts in my body here
00:06:51 let's begin with the title I can just
00:06:54 output variables or data pass to the
00:06:59 template by using double curly braces
00:07:03 that's by the way where the name comes
00:07:05 from these handlebars here and then I
00:07:08 just specify the name of the variable I
00:07:11 want to output here title because
00:07:13 remember in my routes file here I'm
00:07:16 setting this title variable here and
00:07:19 well this is just what it will output
00:07:21 here next thing is the part worthy
00:07:25 detail part where the block content
00:07:27 where the individual pages can inject
00:07:31 their content is set up by using free
00:07:35 Kali braces to escape HTML or to not
00:07:40 escape HTML to be precise because using
00:07:43 double curly braces make sure that only
00:07:46 text is output and if I would have HTML
00:07:50 tags in this variable it would just
00:07:52 render them as text but using free kolja
00:07:56 braces says no no render the HTML and we
00:07:59 definitely want that to be the case in
00:08:01 our content here which comes from our
00:08:03 individual pages which will of course
00:08:05 not only contain plain text but HTML
00:08:07 themselves so I have free quality braces
00:08:10 here and then we name this body because
00:08:14 body is the reserved name so to say the
00:08:18 reserved hook handlebars will look for
00:08:22 and which will be a kind of overwritten
00:08:25 or replaced with the
00:08:27 of the pages so this name is not
00:08:29 optional or not freely chosen it has to
00:08:33 be body here because we set this file up
00:08:36 as our main layout if you remember the
00:08:39 app touch as file and therefore
00:08:42 handlebars will then look for this body
00:08:45 part here to insert the actual content
00:08:49 of the individual pages so I hope this
00:08:52 is clear how this works
00:08:54 so this is how we set up our layout now
00:08:58 let's change our index dot change change
00:09:01 file to index HPS here again we can't
00:09:05 use this but we of course want user
00:09:09 layout we don't have to extend it
00:09:11 because if you remember in the appliques
00:09:13 file we set a default layout of this
00:09:16 layout file now we could overwrite us
00:09:18 when rendering our page and we will see
00:09:20 this in future lectures but as we have
00:09:23 this default layout I don't need to
00:09:26 extend anything I also need don't need
00:09:29 this blog content because as I said
00:09:31 handlebars will always take the content
00:09:33 in this file and just insert it where it
00:09:36 finds this body part this body hook in
00:09:41 the layout so all I have here is an h1
00:09:43 title which again should be the title
00:09:47 and then let's say you to create the
00:09:52 same view as the last lecture I will
00:09:55 have a paragraph which says welcome and
00:09:59 welcome to you and then again Thailand
00:10:03 you can already see good thing is
00:10:06 compared to Jade well it's normal HTML
00:10:09 again and we always have this double
00:10:12 curly braces syntax it doesn't matter if
00:10:14 it's the only content between two HTML
00:10:17 tags or if it's nested in normal text so
00:10:21 I save this and now let's let's run the
00:10:26 app shall we so I run my server here and
00:10:29 I reload my page and as you can see this
00:10:31 works and this is now rendered through

00:10:34 handlebars not Jade so last thing is I
00:10:38 will
00:10:39 also rewrite my error file here again
00:10:43 replace the file ending get rid of this
00:10:46 and let's justwell output the error
00:10:49 message here like that and I will get
00:10:52 rid of the other stuff I had here
00:10:54 because yeah it's only that we have a
00:10:57 valid file which can be used so this is
00:11:00 general how we set up how or so how we
00:11:02 use it overuse layouts now let's dive a
00:11:05 little bit deeper into that templating
00:11:07 engine and the MX file here we currently
00:11:15 have well days now I want in my routes
00:11:20 file I'll get rid of these routes
00:11:22 because currently they don't lead
00:11:23 anywhere I want extra of my conditional
00:11:27 I will use this and I will pass an array
00:11:31 your queue which should just hold well
00:11:34 free numbers now in my index file again
00:11:38 let's first say I want to check if a
00:11:41 certain condition is met and as you saw
00:11:44 I'm passing this condition variable
00:11:46 which to us just as false how can I do
00:11:49 this handlebar handlebars has this
00:11:53 concept called helpers we can write our
00:11:55 own helper functions which basically
00:12:00 transform code or which well add a
00:12:03 certain functionality to the templating
00:12:05 engine we can use it also has some
00:12:07 built-in helpers like well things you
00:12:10 often use like if statements or each
00:12:13 loops so what we need here let's start
00:12:17 with the if statement this helper will
00:12:21 be a block expression because it will
00:12:23 have multiple lines and normal or non
00:12:27 block expression is well something
00:12:29 likely like the style thing here it's
00:12:31 only one line here we can't have
00:12:34 multiple lines of codes this would throw
00:12:37 an error now in contrast to that when
00:12:41 you see if we certainly need certain
00:12:44 well or multiple numbers because we
00:12:46 would have something like if condition
00:12:50 and then we want to have something here
00:12:53 if this condition is met then we might
00:12:55 have else and then we will probably have
00:12:59 something like and if so this would be
00:13:04 kind of the syntax we would expect right
00:13:06 let's see how this actually looks in
00:13:08 handlebars and why this is the case as I
00:13:11 said we no longer have this single line
00:13:15 expression but it's kind of a block
00:13:17 because we're wrapping some content with
00:13:20 this overall template expression here
00:13:23 which is not independent or these
00:13:25 individual lines are not independent of
00:13:27 each other but they kind of work
00:13:30 together sit roulette handlebars know
00:13:33 that I have to specify that we're now
00:13:36 writing some code over multiple lines or
00:13:38 that we have this
00:13:39 yeah block here I do this by adding a
00:13:42 hash sign right after these double curly
00:13:45 braces and that is just half my my if
00:13:48 condition here but now I get my ID or it
00:13:53 tells you if block not closed
00:13:55 well because it's not and if but instead
00:13:58 we use a slash like a close and normal
00:14:02 HTML tag and my ID automatically
00:14:05 autocomplete at that it now recognizes
00:14:08 this is a valid block in handlebars we
00:14:12 close it with double curly braces slash
00:14:14 again like an HTML tag just with double
00:14:18 curly braces and we open it with this
00:14:21 hash signs and now handlebars knows this
00:14:23 here is one block working together now
00:14:28 the outside one in the middle is fine
00:14:29 this is actually written like this
00:14:31 because again it's now in the middle of
00:14:33 this block and therefore this works so
00:14:38 now I can say if condition is met I can
00:14:40 write like condition is matte or
00:14:44 condition not matte something like this
00:14:47 let me reload and you can see condition
00:14:49 not met because yeah we were passing
00:14:51 false here if I change this to true this
00:14:55 condition we should see that the
00:14:58 condition is matte
00:15:00 oops I need to of course restart my
00:15:03 server now conditioners Matt so now
00:15:07 let's output this area with a each loop
00:15:11 again in my index file ie Shoop is a
00:15:14 block – right because again we would
00:15:17 have like opening of the each loop that
00:15:20 some code or some HTML well content
00:15:24 between the opening and ending statement
00:15:27 and then well the ending statement so to
00:15:30 do this I will again open up my block
00:15:32 statement with double curly braces and

00:15:34 hash and then I will have my each
00:15:38 keyword here and like F and s and so on
00:15:43 this is of course a reserved keyword
00:15:45 here see how each and I want to well
00:15:48 loop through any array and then I will
00:15:53 just oops
00:15:54 I will just close this here close the
00:16:00 each block so now this is working again
00:16:05 but it's one have one curly brace too
00:16:08 much so now this should work and now how
00:16:11 do I put the value and currently looping
00:16:13 over I can use or I should use this
00:16:17 which again as a reserved word here by
00:16:20 handlebars – in this block statement
00:16:23 output in this H statement output
00:16:26 current value of well of the current
00:16:29 iteration so let me save it and reload
00:16:32 and I can see one two three here if I
00:16:36 want to rename this or maybe I'll also
00:16:37 want to output the current key I can you
00:16:41 as and then I'm from a pipe sign two
00:16:45 pipe signs and between these pipe signs
00:16:48 I would have value and the key so now I
00:16:52 can say value and if we load this you
00:16:58 see nothing changes this still works and
00:17:01 I could also say well key and unlike
00:17:06 let's say coolant and the value and now
00:17:09 you will see okay the first element
00:17:12 index zero is one second element is two
00:17:14 and third element is free so this is how
00:17:18 you can use the each expression here ah
00:17:22 well these are the very basics about
00:17:24 handlebars as I said you can write your
00:17:26 own helpers we can include partials and
00:17:30 so on and these are all things you can
00:17:33 very easily look up if you want to know
00:17:35 them right now otherwise we'll use
00:17:39 handlebars in the future widgets and you
00:17:41 will never see how to do things like
00:17:44 this very looking forward to seeing in
00:17:47 the next videos bye

You may also like