Dynamic HTML with Templating(Express) Flashcards
What is templating?
Kind of like madlibs. Templating allows us to define a preset pattern for a webpage that we can dynamically modify.
Rather than writing static html code that’s always the same, we could embed info and logic. So we can repeat parts of a template over and over with a loop for example, we can conditionally hide or show something like log in/sign up.
End goal is to combine some form of logic with creating html responses.
What is EJS?
Embedded JavaScript. JavaScript Template object.
How do we configure EJS in Express?
There’s a particular method called app.set which accepts 2 arguments, the key we want to set and the corresponding value or the property and its value. We need to use view engine. Don’t need to require it manually as Express will do that behind the scene.
app.set(‘view engine’, ‘ejs’)
By default when we create a new express app and we are using some view engine, Express is going to assume tat our templates/views exist in a directory called views. So he creates a directory called views.
How do we send back file/template in our regular js file?
Instead of sending a string inside of res.send(), we call res.render and it takes in the name of the file in our case is home.ejs. We don’t have to specify /views/home.ejs because the default place render looks is inside of a directory it assumes already exists called views.
What happens when it’s time to render the ejs template?
Takes our template, in our case home.ejs, and it’s going to evaluate it and in anyplace it sees javascript, it’s going to run them and then spit out html.
What should you do so you can run code from anywhere? Best practice
There's a module called path.
const path = require('path')
app.set('views', path.join(\_\_dirname, '/views'))
What this is we’re taking current directory name, where the index.js file is located, and we’re joining that path, the full path to get there with views. __dirname refers to the directory name from where index.js or whatever this file is located, doesn’t care where we’re executing it from.
What are tags in EJS?
Particular tags that indicate to EJS that what we’re about to see i not HTML.
For example:
<h1>The Home Page </h1>
So whatever goes between the
What is the second argument in res.render() and what does it do?
An object, key value pairs and whatever is passed in there will be available under the name rand, so when ejs template is executed and turned into output html, the object we created in index.js will be passed through to the .ejs template. In the .ejs we will now have access to a variable called rand.
So our index.js has this
app.get(‘/rand’, (req, res) => {const num = Math.floor(Math.random() * 10) + 1;
res.render(‘random’, { rand: num})
})
Now in random.ejs
<h1>Your random number is: { rand }
This is done to make simpler code
So whatever the name is that we used of the object as the second argument in res.render, we have access to variables of the same name in our template. </h1>
How do we make Javascript code that won’t be added to the template/rendered? As in embedding logic?
We use
<h2>That is an even number</h2>
Every line of javascript must be surrounded with
What’s the benefit of looping in Express?
Looking at /r/ as an example, every one is pretty much the same with a ton of posts with a like and dislike bar, a heading for the post, comments and links. So we can render some template over and over.
How do we loop in EJS?
First sets up a route called cats and in it will render a bunch of cats. Pretend the array is coming from a database.
app.get('/cats', (req, res) => {const cats = ['Blue', 'Rocket', 'Monty', 'Stephanie', 'Winston]
}
res.render('cats', { cats })
Now make template/file cats.ejs
<h1>All the cats</h1>
<ul>
<li> </li>
</ul>
He creates a more complex subreddit demo. Explain
First he has the data.json where he has all of the data for the different subreddits and requires it at the top of index.js and calls it redditData. He’s getting the subreddit name from the example before with
app.get('/r/:subreddit', (req, res) => {const { subreddit } = req.params;
const data = redditData[subreddit] //Just made this
res.render('subreddit', { subreddit})
}
Now we must pass the data we got to our template and use it.
Goes back to the app.get and uses spread operator
res.render(‘subreddit’, {…data})
This will allow us to access individual properties in subreddit.ejs
<h1> Browsing </h1>
<h2></h2>
<p></p>
Now we’d like to render each post using a loop and for each one post a certain template.
<p>
<b></b>
</p>
<img>
But what if there’s a subreddit not found in the json file? Such as r/dogs. He goes back to the app.get and under data he creates a conditional
if (data) {
res.render(‘subreddit’, {…data})
} else {
res.render(‘notfound’, { subreddit })
Now he creates notfound.ejs template/file.
What is serving static files?
Serving things like css and javascript files that we want to include in response back to client side. We’re currently only responding with html. We’re gonna usually have some javascript and css in response. We need to serve those assets.
Need to use express.static
app.use(express.static(‘public’)) public in this case is folder we want to serve our assets from.
Remember that app.use runs every single time we had any request. It’s not a route, doesn’t care about get or post, will execute every single request.
He does this in the index. js. He now makes the public directory and makes a stylesheet. Now when we link this stylesheet we don’t need to reference path.
Now we run into same problem with views that if we go one folder out so template_demo/index.js then the public will not be found. Solution to this is again path.join
app.use(express.static(path.join(__dirname, ‘public’)))
What is partials?
A way of including templates in other templates. If we have some code we’re duplicating this is helpful like the head tag with links and scripts. He creates a new template called head.ejs and pastes all the content in the head in there. The partials stands for the directory name.
Include it by using the
He has a bootstrip navbar and rather than having to put that in all files, just duplicate it instead. Makes new template called navbar.ejs and pastes all the content in there.
