Skip to content
This repository has been archived by the owner on Feb 3, 2023. It is now read-only.

Latest commit

 

History

History
139 lines (94 loc) · 6.76 KB

week-2.md

File metadata and controls

139 lines (94 loc) · 6.76 KB
Raw

Week 2

what kind of train does node take on its commute

express

— @netlify

HTTP cat by @girlie_mac.

Table of Contents

Slides

Theory

Before you start you'll probably want to read a bit about express, routing, and templating. We'll cover this in the lecture but make sure you fully understand these concept, the resources below can help.

🎦 Watch a video about routing and express.
🎦 Watch a video about request and response.

Playground

You can do these exercises before you start working on the assignments to get comfortable with the topics covered in class. The below are interactive self guided lesson modules from freeCodeCamp. If you feel a bit more adventurous you can try the NodeSchool workshoppers.

Assignments

Serve

Hello World Server banner

In this assignment you’ll build a static file server with a little help from Express.

Synopsis

  • Time: 4:00h
  • Goals: subgoal 3, subgoal 4
  • Due: before week 3

Description

We'll add more features to our server. It should handle routes and serve static files. Make sure it does (atleast) the following three things:

  1. Basic routing: Have a couple of different routes (e.g. /about /login) that are useful for your matching-application.
  2. Error handling: Respond with a 404 Not Found if you go to a route that doesn't exist.
  3. Serve static files: such CSS but also media files such as images, video's or audio files.

Ask yourself upon completion:

  • How does the app instance work? What makes it possible you can do things like app.get or app.listen?
  • What are the req and res parameters?

Additional resources

Templating

Templating Banner

Learn how to use a templating engine to dynamically render data and create components for your matching application.

Synopsis

  • Time: 6:00h
  • Goals: subgoal 4
  • Due: before week 3

Description

We are slowly going to build the interface and components for your matching application. You already have a server up an running, now it's time to actually send dynamic HTML to the client using a templating engine.

  1. Research different templating engines and read there documentation such as pug, ejs. Document your research in your wiki. Pick one, explain why you chose it, and install it in your project.

💡 Some templating engines can be a little bit hard to set-up (looking at you 👀 handlebars). So carefully read their documentation and try out a couple of different ones. If you can't get yours working, look for students who are working with the same templating engine.

  1. Then, create views and try to render a page using the templating engine. Start with 'simple' HTML pages and make sure you get different .html for each route.

  2. Then, render dynamic data using your templating engine. So instead of you writing the .html insert some dynamic data. For example; you can store and array or object on the server and inject data into the view. Later we'll look at how to insert data from a database.

  3. Use the features of your templating engine. Try out atleast the following:

    • Useincludes; to insert contents of files into another.
    • Use conditionals; if statements to render html conditionally
    • Use mixins; create small reusable blocks of html

  4. Start building out your components for your matching application feature. You can create different partials and lay-outs (includes) for components of your page e.g. header, footer or a form.

💡 It's very common to create a consistent naming convention and folder structure for your components. Most people base it on the Atomic Design method by Brad Frost. Here's an example with different partials and lay-out components.

Ask yourself upon completion:

  • How does express combine the data from the server with the templating engine?
  • How do partials work? Can you create a folder structure for all the components?

Additional resources

Hand-in

  1. Push your changes:
    Commit your progess in your repository on GitHub under your username in your own matching-app repository.

  2. Create an issue:
    Mark this assignment as complete by opening an issue on our GitHub issue tracker. Fill in the issue template of week-2.md with the correct information. Include what progress you made in the description of the issue.

  3. Feedback:
    Let us know what you thought of the homework, what part you spend a lot of time on and give us any feedback. Your assignment will be reviewed by teachers and student assistants, so expect people to read it and be ready for tips and tops!