How have we done HTML so far?

How have we done HTML so far?

Just wrote a file with .html extension

How have we done HTML so far?

Created HTML in JavaScript and inserted it into the DOM with jQuery

There is a better way

We can generate the HTML dynamically whenever we need it

There is a better way

There are many template engines out there

Mustache

Dust

Nunjucks

Handlebars

Jade

EJS

There is a better way

There are many template engines out there

Mustache

Dust

Nunjucks

Handlebars

Jade

EJS

There is a better way

We chose Handlebars because it is a template engine that can be used on the backend and on the front end.

We do

Lets create a server that renders html

We do

1. Build out a basic express server
2. Add a route for / that sends the words hello root
3. Add a route for /page2 that sends the words hello from page 2
4. Install the hbs npm package and add to the server
5. Create the three handlebar files needed to render the two pages
6. Have each express route render the handlebar files and send the result back to the browser

We do

1. Build out a basic express server
2. Add a route for / that sends the words hello root
3. Add a route for /page2 that sends the words hello from page 2
4. Install the hbs npm package and add to the server
5. Create the three handlebar files needed to render the two pages
6. Have each express route render the handlebar files and send the result back to the browser

We do

1. Build out a basic express server
2. Add a route for / that sends the words hello root
3. Add a route for /page2 that sends the words hello from page 2
4. Install the hbs npm package and add to the server
5. Create the three handlebar files needed to render the two pages
6. Have each express route render the handlebar files and send the result back to the browser

We do

1. Build out a basic express server
2. Add a route for / that sends the words hello root
3. Add a route for /page2 that sends the words hello from page 2
4. Install the hbs npm package and add to the server
5. Create the three handlebar files needed to render the two pages
6. Have each express route render the handlebar files and send the result back to the browser

We do

1. Build out a basic express server
2. Add a route for / that sends the words hello root
3. Add a route for /page2 that sends the words hello from page 2
4. Install the hbs npm package and add to the server
5. Create the three handlebar files needed to render the two pages
6. Have each express route render the handlebar files and send the result back to the browser

We do

1. Build out a basic express server
2. Add a route for / that sends the words hello root
3. Add a route for /page2 that sends the words hello from page 2
4. Install the hbs npm package and add to the server
5. Create the three handlebar files needed to render the two pages
6. Have each express route render the handlebar files and send the result back to the browser

Adding logic

Now its time to add a little bit of logic to our basic server

Adding logic

What is available to us?

• variables
• if helper
• each helper

Adding logic

Lets use a variable

• variables
• if helper
• each helper

<h1>{{myVariableName}}</h1>

Adding logic

Lets use a variable

• variables
• if helper
• each helper

<section>
  {{#if name}}
    <h1>Hello {{name}}</h1>
  {{else}}
    <h1>I don't know who you are</h1>
  {{/if}}
</section>

Adding logic

Lets use a variable

• variables
• if helper
• each helper

<section class="my favorite foods">
  <ol>
    {{#each foods}}
      <li>{{this}}</li>
    {{/each}}
  </ol>
</section>

How to pass in that data?

We are ready for data in our handlebar template, but we still need to pass the data in

How to pass in that data?

We can pass an object as the second argument to the res.render method

app.get('/', (req, res) => {
  res.render('index', {
    name: 'Brooks',
    foods: [
      'green smoothie',
      'garden salad',
      'tacos'
    ]
  });
});

How to pass in that data?

We can also pass in global data to all template files

const hbs = require('hbs');

hbs.localsAsTemplateData(app);

app.locals.title = "bar";