Coding

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