Server-Side Templates

Objectives

  1. Set Up a View Engine in Express
  2. Render Templates with Data
  3. Choose a Templating Engine

View Engine

var express = require('express');
var app = express();

var puppies = require("./controllers/puppies");

app.set('view engine', 'ejs');
app.set('views', "./views");

app.use("/puppies", puppies);

Objectives

  1. Set Up a View Engine in Express
  2. Render Templates with Data
  3. Choose a Templating Engine

Check Your Understanding

What does "view engine" do?

Where does it go in an express app?

How do I tell the server where to find views?

Rendering Templates

<body>
<h1><%= title %></h1>
<ul>
<% for(var i=0; i<supplies.length; i++) {%>
   <li><%= supplies[i] %></li>
<% } %>
</ul>
var express = require('express');
var router = express.Router();

router.get("/", function(req,res) {
    res.render("puppies", puppyData)
});

views/puppies.ejs

controllers/puppies.js

Objectives

  1. Set Up a View Engine in Express
  2. Render Templates with Data
  3. Choose a Templating Engine

Take Note:

Setup Templated Views

  1. Create Views Folder
  2. app.use("View Engine", view engine)

  3. npm install View Engine

  4. Create Index.ejs

  5. res.render("index", data)

In Pairs, 15 mins:

Add a View Engine (EJS) & Views Folder to your express server

Loop through each Puppy and show it's name and picture

Create an Express Server

Create a file called puppies.ejs

Use res.render() to send the HTML to your browser!

Choose Your Weapon

  • Jade / Pug
  • Nunjucks
  • Handlebars

Objectives

  1. Set Up a View Engine in Express
  2. Render Templates with Data
  3. Choose a Templating Engine

Change Your Engine

  1. Pull up the code from the last exercise
  2. Install a different templating engine
  3. Change index.ejs to index.???
  4. Update index.??? with the new syntax

20 Minuites

Discuss:

What did you like vs EJS?

What was more difficult?

How much work was it to translate?