Bootcamp
Search…
3.POCE.2: Express, EJS Noodle App

Introduction

  1. 1.
    Building on 3.POCE.1: Express Noodle App, we will re-create our noodle app from 2.POCE.5: Responsive Noodle Site with Express and EJS.
  2. 2.
    The main change from 3.POCE.1 is that we will pass response data to response.render instead of sending response data directly to the client. EJS will inject our data into the relevant HTML template and send the merged HTML to the client.

Setup

  1. 1.
    Save the non-HTML noodle app from 3.POCE.1 in a feature branch for reference
    1
    git checkout -b basic-non-html
    Copied!
  2. 2.
    Push the feature branch to GitHub. Follow Git instructions to set upstream for this branch if necessary.
    1
    git push origin basic-non-html
    Copied!
  3. 3.
    Checkout and work on the main branch for this exercise.
    1
    git checkout main
    Copied!
  4. 4.
    Once we've made some changes, we can compare oour 2 branches using a visual GitHub diff using a URL like the following. Here is an example of the diff interface.
    1
    github.com/<USERNAME>/<REPO_NAME>/compare/basic-non-html
    Copied!

Base

Create Pages with EJS

  1. 1.
    Copy the HTML and CSS you wrote in 2.POCE.5: Responsive Noodle Site and use them to create EJS templates.
    1. 1.
      For now we will have to copy the HTML boilerplate for each EJS file. We will see how to avoid this later.
  2. 2.
    In the EJS templates, render all URLs in recipe data objects. For example, image URLs should render as images, and other URLs should render as links.

Static/Public Folder

Our CSS may not load yet because we haven't told Express how to serve static files. To enable our server to respond with the styles.css file, we need to enable Express' built-in file server and configure it to serve files from the folder where our CSS is. The following expression enables Express to serve files from a local folder called public. Read more about static files here and express.static here.​
1
app.use(express.static('public'));
Copied!
  1. 1.
    Create a folder in the repo called public. Move all CSS files to this folder.
  2. 2.
    Add the above expression (app.use(express.static(...))) to our index.js file above our routes to enable the file server.
  3. 3.
    Verify the file server works by making an HTTP request for a CSS file inside the public folder. The URL path can be a relative path relative to the public folder.
    1
    http://localhost:3004/styles.css
    Copied!

Comfortable

Categories

  1. 1.
    Update the index page (/) to contain a list with 1 link per category.
  2. 2.
    Each link should link to a category page with a list of recipes on it. For example, the following URL would show a page with a list of vegan recipes.
    1
    http://localhost:3004/category/vegan
    Copied!
  3. 3.
    Each link on the category page should link to an individual recipe's page, for example the following URL.
    1
    http://localhost:3004/recipe/0
    Copied!

More Comfortable

Sort By

  1. 1.
    Add links on list pages for recipe attribute to sort by, e.g. yield, source, caution, category.
  2. 2.
    Add links on list pages for sort order, e.g. ascending or descending.

Reference solution

Click here to see the reference solution for this post class.