Quiz

1. I'm a bit confused on static files and their use

   EJS is all about dynamic files: files that are created using static templates and dynamic data.

   But there are lots of files in a website that are completely static:

   • The CSS file(s) for the site.
   • front-end JS files
   • Images like logos, background images, and other decorative stuff
   • Even some HTML files, like the "mission statement"

   Those don't require any of the Express and EJS machinery. So we can just put them in the public folder and serve them with a url like /logo.jpg.

   If we have the logo in a subfolder of public called images, we would serve them with a URL like /images/logo.jpg.

   These URLs would go in our HTML files, in an IMG tag. Equivalently, they would also go in our EJS files, again in an IMG tag.

2. how EJS relates to Express

   Great question. Express is the boss, but it needs some assistance with templating: filling data into a template to create an HTML page.

   There are actually several choices, but Olivia and I decided to choose EJS when we designed CS 304 Node, because we think it's easiest to learn. There are other templating engines/languages, but we liked this best.

   That's actually a theme: there are similar choices in other web frameworks.

3. more about where the different files go for EJS and how to connect them

   Sure. The EJS files go in a folder called views.

   (This is based on the Model-View-Controller design, where the database is the model and the app provides different views of the model.)

   EJS loads and parses all of the views (template files in the views folder) when the app starts. This saves time later.

   In your code, you refer to them by their filename (in the views folder), as if it was being read right then.

4. For partials, would it be stored in a different file like CSS, HTML, or in completely separate folder. I'm a bit confused on how we connect it all. But I mostly understand!

   Partials are also stored in files in the views folder. I usually store them in a subfolder, but students have successfully put them in the same folder. It's all a matter of referring to their filename using a relative pathname.

5. How can we pass and access nested objects in an EJS template?

   The res.render() call allows you to pass in values. The code in your EJS file can then access deeper levels, just by using JS notation:

   
   app.get('/', (req, res) => {
       return res.render('file.ejs', 
                         {user: some_dictionary});
   });
   
   

   and then in the EJS file:

   
   This user lives in <%= user.address.state %> .
   
   
   

6. Demo using partials?

   We'll see some in class today.

7. This reading was clear.

   Great!