Express Fundamentals

Homework

1. Review:
   • Create a local http server
   • request/response cycle
2. Model-View-Controller
   • Read: MVC definition on MDN
   • Read: Model-view-controller on Wikipedia
3. Postman
   • Watch: The Basics of Using Postman for API Testing by Steve Griffith
4. Express
   • Read: Express/Node introduction
   • Read: Setting up a Node development environment on MDN
   • Read: Serving static files in Express in Express Docs
   • Read: Using Express Middleware in Express Docs
   • Watch: The first 20 minutes of How to build a REST API with Node js & Express by Mosh Hamedani (we’ll eventually cover most of this video)

---

Morning reflection

Housekeeping

1. CPNT 201 Assignment 5 ZIPs
   • Feel free to not upload the entire winter-2021 repo.
   • Upload a README with links to your Issue and Pull Request.
2. Announced after lunch:
   • Assignment 4: JSON gallery endpoint with fetch
   • DRAFT: Final Project

---

1. Introduction to express

Learning Objectives

• Summarize the MVC (Model-View-Controller) design pattern.
  • Understand how the directory structure of an express app relates to the MVC pattern.
  • Understand how middleware and routes relate to the MCV pattern.
• Install the express package as a project dependency.
  • Create a “Hello World!” express app.
  • Start an express server with default port.
• Review the CRUD design pattern.
  • Define route handler.
  • Understand the relationship between route methods and CRUD operations.
  • Fulfill a GET request using the app.get() route handler.

Terminology

Route

An event handler that fires for server requests that match a route method (i.e. GET, POST, etc) paired with a route path (i.e. /login, /api/definitions). These often respond with web files and/or json data. Routes are part of the Controller layer of the MVC pattern.

Materials

• Gists:
  • Design patterns in Express apps
  • Hello World! app

Key Takeaways

• Server requests are fulfilled on a first-come-first-served basis, so the order of your route handlers and middleware matter.
• If a route sends a response, the connection is closed and downstream routes are not invoked.

---

2. Routes and Middleware

Learning Objectives

• Define middleware.
• Understand the relationship between middleware and the request/response cycle of an express server.
• Demonstrate how the order of route and middleware handlers affect the response sent from the server.
• Refactor a “Hello World” app to serve static files.
• Refactor a “Hello World” app to send 404 Not Found errors.

Terminology

Middleware

A generic event that fires for all server requests. These often prepare the request and/or response for downstream middlware or routes but can also send the response directly. Middlware handlers are part of the Controller layer of the MVC pattern.

Materials

• Gists:
  • Catch 404 Not Found errors
  • Serving static files

Key Takeaways

• Static file middleware is usually placed first in your app so that requests are filfilled before dynamic responses are needlessly called (static files rarely need these resources).
• 404 middleware is usually placed near the end of your app since successful calls would have already been fulfilled by then.

---

3. Heroku Deployment

Learning Objectives

• Push a valid express project to Github.
• Connect a GitHub repository to a Heroku app.
• Deploy an express app to Heroku.

Materials

• Gist: Deploying an Express app to Heroku

Key Takeaways

• In order to function properly, Heroku needs your app to have the following:

  • a start script defined in your package.json, such as

      "scripts": {
        "start": "node server.js"
      }
    

  • A port number defined with process.env.PORT so that Heroku can override it with the standard port.

• Sometimes (often?) Heroku will return an internal server error due to a misconfiguration. You can access the server logs from the admin panel menu in the top right:
  • “More” -> “View logs”
  • You can also install the Heroku CLI (command line interface) to pull the logs from your terminal.
    • See: Getting Started on Heroku with Node.js

---

Open lab-time

Activities

1. Using a custom middleware handler, create a data logger that writes the current date and time to a log file for every server request.
2. After today, you should have all you need to complete Assignment 3.

---

Dailies

• Submit today’s Codepen/repo/gist to the Dailies section (in Assessments) in Brightspace.