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:
  1. Create a directory into which you will put things (lab6?)
  2. 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
  3. 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.
  4. 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.)
  5. 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.
  6. 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.
  7. Kill your server (ctrl-C). Try to reload the pages. They should fail.
  8. 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.
  9. Adjust your lab6.js file to reflect this change by changing
                    app.use("/", express.static(__dirname))
                
    to
                    app.use("/", express.static(__dirname+"/public"))
                
  10. Also, for grins, change "/" to "/static"
  11. 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.
  1. If it running, kill your Node.js server
  2. 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.
  3. Test your work. Load the page
                    http://165.106.10.170:NUMBER/time
                
  4. 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:

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.