CS383: Lab 6 -- 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.) Serving static pages is easy using Node.js, 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). Note that static in this definition does not imply that the page cannot do things with javascript.

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

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();
                const 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 an unused port number. (See http://loin.cs.brynmawr.edu:30006/index6.html for a listing of port numbers that are in use. You do not need to register your use of this port as it is only for this lab.)
With that file created, you should have 3 files in your lab6 directory, "lab6.js", "lab5.html" and "lab4.html". If your lab5.html loads a separate javascript file, put that here as well. (Your names may differ, it does not matter; I will use those names below.)
Start your webserver. On the class database server, 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://loin.cs.brynmawr.edu:NUMBER/lab5.html
                http://loin.cs.brynmawr.edu: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 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"))

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) {
                    timeOfDayPage(res);
                });
                
                function timeOfDayPage(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://loin.cs.brynmawr.edu:NUMBER/time

Briefly the "app.use(...." statement sets up a name in Node. Node associates 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 extensions to what you have done. Here are some suggestions:

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. Also writing javascript code for node.js to run that will create javascript functions to run on the client is really confusing. It is confusing to just read about doing it.)
Add a new "app.use" called slowtime that does exactly 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.

Clean up

Kill your node.js server at the end of the lab.
If you leave you node server running and do not register your port usage I will get testy.

What to hand in

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