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.

Repo invite: https://classroom.github.com/a/MuTkI4oU

prompt> git clone <repo URL>
prompt> cd <repo name>
prompt> git config commit.template .gitmessage

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.

The nodemon package provides a command line wrapper around node that watches all the files in the directory and automatically restarts the server if any of them change. This is much more convenient for development.

Most of the time, we install nodemon globally (i.e. wherever node is installed) so that it is available in all projects with:

npm install --global nodemon

This can sometimes run into issues with permissions and paths. Alternatively, you can install it locally in a project and use the scripts directive in your package.json to run nodemon within the local project environment.

npm install --dev nodemon

{
  "name": "my-node-app",
  "version": "1.0.0",
  "description": "Example package.json",
  "main": "index.js",
  "scripts": {
    "start": "nodemon index.js", # change this to run nodemon on whatever file you are using
  },
  "devDependencies": {
    "nodemon": "^3.0.0" 
  }
}

npm run start   # runs the script, in place of just "nodemon" or "node"

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