Server-Side Templates
Objectives
- Set Up a View Engine in Express
- Render Templates with Data
- 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
- Set Up a View Engine in Express
- Render Templates with Data
- 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
- Set Up a View Engine in Express
- Render Templates with Data
- Choose a Templating Engine
Take Note:
Setup Templated Views
- Create Views Folder
- app.use("View Engine", view engine)
-
npm install View Engine
-
Create Index.ejs
-
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
- Set Up a View Engine in Express
- Render Templates with Data
- Choose a Templating Engine
Change Your Engine
- Pull up the code from the last exercise
- Install a different templating engine
- Change index.ejs to index.???
- 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?
Server-Side Templates
By LizTheDeveloper
Server-Side Templates
- 1,301