CSCI 3342 Web Development
Spring 2024

Server-Side HTML

HTTP Servers

The express train to awesome.
The HyperText Transfer Protocol (HTTP) is a specfication for transfering resources over the internet. Invented back in 1989 to support the "World Wide Web", it has done quite well for itself and hasn't changed all that much three decades. HTTP is simple, works easily with any underlying network and security setup, and doesn't require extra central organization - features that have led to its wide acceptance, longevity, and stability.

HTTP Overview (6:12)

What you need to know to get started.
Additional reference: HTTP @MDN
In this step, you will create an HTTP server running on your local machine (aka localhost) using node.js and express.js, the dominant JavaScript HTTP server. Clone the assignment repo, which has the .gitignore file and some HTML mockups that you'll use in later steps. Do your work there in the working directory so you can easily (and regularly!) commit and push as you go.
Follow the example in the video to get your server up and running.

Express Setup (12:13)

Video from a prior semester. Errors and updates:
  • The example static mockup files were different. In the current repo, the mockups are already in a directory called static.
  • The variables I'm using (e.g. express, static_dir) should all be const not let.
  • The npm install option --save is now default and doesn't need to be specified.
Additional reference: the express.js install page, with the npm project setup commands as used in the video above.
Follow the example in the video to create a GET route '/time' which returns the current time. Surround it with minimal but correct HTML. To display the time look at the built-in JavaScript Date class and the method toLocaleTimeString.

Express GET Routes (12:13)

Starting dynamic content.

Using nodemon (1:32)

A helpful tip for smoother development.

Assignment Checklist

Create a new website project in your assignment repo and install express.js
Configure your server (index.js) to serve up the static mockup files
Add a GET route to display the current time
(optional) Install and use nodemon