CS383: Lab 6 -- Feb 23 -- Your own Web Server

In this lab you will create your own web server and use that web server to serve both static and dynamic pages.

Node.js and static pages

Start by creating a Node.js instance to serve static pages. (A static pages is one that is premade -- for instance this lab description is a static page.) This is easy, but fairly boring as you can easily serve static pages using the department's Apache server (as you have done for the past 2 weeks).

Although you can do everything in Node.js with basic javascript, these instructions all assume you are using a middleware package called express. (Almost everyone uses express.)

To do this:

Create a directory into which you will put things (lab6?)
Copy into that directory your two web pages from labs 4 and 5. Below I assume that you have renamed these two files lab4.html and lab5.html

Create a Node.js instruction file. You can name this anything, but it is usual to name it with a ".js" extension. Below I will assume you named the file "lab6.js". Here is your initial instruction file:

                const express = require('express');
                const app = express();
                let port = NUMBER;
                app.use("/", express.static(__dirname))
                app.listen(port, function (error) {
                    if (error) throw error
                    console.log("Server created Successfully")
                });

In the above replace NUMBER with a random number in the range 40000-49999.

With that file created, you should have 3 files in your lab6 directory, "lab6.js", "lab5.html" and "lab4.html". (Your names may differ, it does not matter; I will use those names below.)
Start your webserver. On the class database server (165.106.10.170) in the lab6 directory
```
                node lab6.js
            
```
if you get a message about the port already in in use, pick a different number.

Check your server. In a browser try to load the URLs

                http://165.106.10.170:NUMBER/lab5.html
                http://165.106.10.170:NUMBER/lab6.html

Both should work fine.

Kill your server (ctrl-C). Try to reload the pages. They should fail.
Make a subdirectory in your lab6 directory named "public" and move both html files to that subdirectory. It is very common to put for static pages into a "public" directory.

Adjust your lab6.js file to reflect this change by changing

                app.use("/", express.static(__dirname))

                app.use("/", express.static(__dirname+"/public"))

Also, for grins, change "/" to "/static"
Start your node.js server. What is the URL to load your static pages now??

Dynamic pages

As suggested above, using Node.js for static pages is pretty uninteresting. So lets get dynamic.

If it running, kill your Node.js server

Add the following to lab6.js

                let counter=0
                app.use("/time", function (req, res) {
                    timeOfDay(res);
                });
                
                function timeOfDay(res) {
                    counter++;
                    let date = new Date();
                    res.write(`<html><body>Counter ${counter}`);
                    res.write(`<br>Date ${date.toLocaleString()}`);
                    res.end("</body></html>");
                }

This will create a page that contains the current date and time (as the server knows it) and a hit counter.

Test your work. Load the page

                http://165.106.10.170:NUMBER/time

Briefly the "app.use(...." statement sets up a name in Node. Node asociates that name with an action where the action is, in this case given by a the function. In true Javascript style, you wrap the action in an anonymous function which is then executed whenever gets a request for the name. Large parts (all?) of Node programming is setting up the names and creating the associated functions.

Extend!!

Add an extension to what you have done. Here are some sugestions:

Put a button on your dynamic web page that uses javascript to put a second time on to the page (this one would be the time as the client sees it when the button is hit). This would be a good place to create a separate static javascript file that your dynamically created html file loads!! (This is one of the reasons that javascript is usually brought in from a file. The javascript is static, the html is dynamic.)
Add a new "app.use" called slowtime that does exacly what time does, but waits 15 seconds to respond.Do this using setTimeout.
Read about how to get the headers sent by your web browser, then echo those header back to the user in a web page. (If I showed this in class, rather than sending the headers back in a fully formed table, send them back in JSON and render the table on the client side)

Clean up

Kill your node.js server at the end of the lab.

What to hand in

Send email to gtowell@brynmawr.edu with the final form of your node.js instruction file.