CS 351 Fall 2019 Homework 7

Static Sites, URLs, Promises, HTTP, Express

Dr. Greg M. Bernstein

Due Wednesday, October 23rd, 2019 by 11:59PM, 50 points.

General Instructions

In this homework we will begin work on the server-side! We will need a directory to put our work in. We’ll call it: practice. Also you can leave your tourProject from the previous homeworks intact, as we will want some of those files for use in later homeworks.

Create and Use a new Branch hw7

We will create a new git branch called hw7 for use in this assignment. The branch you create must exactly match the one I’ve given you for you to receive any credit for this homework.

Prior to creating this new branch make sure your working directory is “clean”, i.e., consistent with the last commit you did when you turned in homework 5. Follow the procedures in GitHub for Classroom Use to create the new branch, i.e., git checkout -b hw7. Review the section on submission for using push with a new branch.

Use README.md for Answers

You will modify the README.md file to contain the answers to this homework.

Questions

Question 1. (10 pts) Static Sites and Metalsmith

(a) Why Static Sites

Give three reasons that you would prefer to use a static site over a web app or a on request server rendered site for a website whose content changes infrequently and that doesn’t take inputs from visitors.

(b) Metalsmith Processing Model/Files and Directories

What does Metalsmith do by default with the source and destination directories?

How does Metalsmith represent a the files in the source directory?

(c) Per file metadata

What kind of information might you want to attach to a source file as metadata?

How can you add per file metadata to a source file in Metalsmith?

What format is that written in?

(d) Metalsmith Processing Model/Plugins

What data is a Metalsmith plugin given to work with by Metalsmith when it is called?

By default which files are passed to a Metalsmith plugin?

Question 2. (10 pts) HTTP

Visit your Blackboard login page and use the developer tools network panel to answer the following questions about the HTTP request and response messages sent between your browser and the Blackboard server.

(a)

What HTTP Method is used in the request?

What is the response code and what does it mean?

What version of HTTP is being used?

(b)

List the request headers and their values here (copy and paste)

(c)

List the response headers and their values here (copy and paste)

(d)

What server is BlackBoard based on?

Are any cookies set? If so what are they.

(e) Object/String Chaining

The following code when run in the JavaScript console produces a string with the current time (based on UTC). Describe how the second line of code works from a programming perspective.

(f) URLs

For the following URLs identify the protocol, domain, port, path, query and fragment portions (if any):

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_Types#Comments

https://www.google.com/search?q=gaia+mission&rlz=1CYPO_enUS751

http://127.0.0.2:8282/static/index.html

Question 3. (10 pts) Requests and Promises

Put any code your write for this question in the practice directory of your repo. Note you make need to install some NPM packages for this problem.

(a) SetTimeout and The Event Queue

Show what this code will print out and more importantly explain why?.

(b) Promises

What does the following code do? And how can you find out the winner of the “promise race”?

(c) Three HTTP Requests “in order”

Choose three different websites in order to practice making HTTP requests in code via the request-promise-native library. Preferably at least one of your sites should be on a different continent. Visit each site one at a time in an order of your choosing and have your program print the time taken to receive from each site (Hint: modify the code in the Promise course slides or the example files. You cannot use the same sites as me). Take a screen shot. I get something like:

(d) Three HTTP Requests “in parallel”

Using the same three websites as above, run the three HTTP requests in parallel and output the time it takes. (Hint: modify the code in the Promise course slides or the example files. You cannot use the same sites as me). Take a screen shot. I get something like:

Question 4. (10 pts) Server Simple

Put all the server code your write here in the practice directory of your repo. The purpose of this question is to get you practice setting up and running a bunch of simple web server applications on different addresses and/or ports. Note that you may need to install some NPM packages for this problem.

Some operating systems may not permit using different loopback addresses without additional configuration. If that is the case describe your system and take a screen shot of the error message you get.

(a) Simple Date Server

Write a simple server based on Express to return your name and the current date and time when a GET request is made to the path /date. Use the built in JavaScript Date class. Run the server on a loopback address different from localhost (127.0.0.1) and a TCP port different from 80. No HTML generation is required. Use your browser to test and demonstrate the server is working. Take a screen shot showing both browser window and command line running the server. I get something like:

Screenshot
Screenshot

(b) Simple Name/NetID Server

Write a simple server based on Express to return your name and the netID when a GET request is made to the path /netID. Run the server on a loopback address different from localhost (127.0.0.1) and a TCP port different from 80, and from that used in part a. No HTML generation is required. Use your browser to test and demonstrate the server is working. Take a screen shot. I get something like:

Screen shot with two servers
Screen shot with two servers

(c) Combine services

Combine both services from above into a single server. Run the server on yet another loopback address and port. Take a screen shot of one request and show your server code here.

Three servers
Three servers

Question 5. (10 pts) Templates, Static Files, and Express

(a) Template Usage

Our server in problem 4 isn’t returning valid HTML. Let’s fix that by using a template. Rather than having two paths we will have a single path / and combine both date and netID information into a single page. Use a Nunjucks template along with date, time, name, and netID information from the server to return an HTML page that looks like:

Real HTML
Real HTML

(b) Static Files and CSS

Now we’d like to serve up static resources such as CSS files, logos, icons, etc. Create a subdirectory within practice called public. Create a practice.css file there. Put some styling in it. Configure the express.static middleware. Update your template from part (a) to link to the stylesheet. Get everything working and take a screenshot and show your template and server code. Note: the network panel in the browser developer tools is an important debugging tool!.

Styling with static CSS file
Styling with static CSS file