WebFund 2016W: Tutorial 2

In this tutorial you'll be playing with tinywebserver.js, a static file webserver in node.js that has no dependencies outside of the core node.js modules. It is based on a tiny node.js web server written by Rod Waldhoff. (Note that the original is written in CoffeeScript.)

To run it, just type "node tinywebserver.js". It will begin serving on the web the pages in the same directory as the script. You'll want to have some files files to serve; to start off, try having it serve hello.html from class. Then, move on to saving pages from the web and serving those. (Note: they probably will be broken in some way by tinywebserver.)

You can run tinywebserver under the debugger by typing "node debug tinywebserver.js". See below for instructions on how to use the node debugger. You may also want to use the browser developer tools to see how the web browser is interacting with the server.

Questions

1. What port is the web server listening on?
2. What file is returned when you access a directory? Why?
3. What sort of URL do you give to get the insecure URL warning (403 Forbidden response code)?
4. What URL do you need to get a 500 error?

Tasks

1. Change the port the server listens on to be 3000.
2. Change the server to serve files from /home/student/public_html rather than the current directory. Be sure to put some files in it! (Hint: you can grab HTML files from any webserver using wget or curl.)
3. Change tinywebserver.js so it returns a simple HTML error page in response to 404 errors (page not found). (Hint: Make sure you keep all your JavaScript and HTML files in the same folder!)
4. Make the options object be stored in a file options.json and read on server startup. This load may be synchronous! Use JSON.parse() to convert the file data into an object.

Node debugger

Node has a built-in debugger. Start it by running node debug tinywebserver.js. This will stop on the first line of the file. Type n to step to the next line of the file. Type c to continue to the next breakpoint. Breakpoints are set by adding a debugger; statement to the javascript source.

At any time you can type repl into the debugger to drop into a read-eval-print loop where you can evaluate JavaScript statements in the current context. Ctrl-C will get you out of the REPL.

For example, consider this source for test.js.

var x = 5;
var y = 10;

debugger;

You can run node debug test.js to start the debugger.

It which will stop on the first line of the file (var x = 5;). If you enter c node will continue executing until the debugger; statement where it will stop. From here if you enter repl you can execute Javascript in the current context. In the repl prompt if you enter x; it will return 5. If you enter x + y; it will return 15, etc.

Browser developer tools

• Firefox developer tools: Tools->Web Developer->Toggle Tools
• Chrome/Chromium developer tools: Tools->Developer Tools

The above links have full documentation on the respective developer tools.

Select the Network tab to see HTTP traffic. Select Inspector (Firefox) or Elements (Chrome/Chromium) to see the HTML document (DOM).