WebFund 2016W: Tutorial 2: Difference between revisions

From Soma-notes
Created page with "'''This tutorial is not yet finalized.''' In this tutorial you'll be playing with [http://homeostasis.scs.carleton.ca/~soma/webfund-2016w/code/tinywebserver.js tinywebserver...."
 
Zero (talk | contribs)
Quite a few people in the tutorial are getting into trouble with this.
 
(5 intermediate revisions by one other user not shown)
Line 1: Line 1:
'''This tutorial is not yet finalized.'''
In this tutorial you'll be playing with [http://homeostasis.scs.carleton.ca/~soma/webfund-2016w/code/tinywebserver.js 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 [https://github.com/rodw/tiny-node.js-webserver tiny node.js web server] written by [http://heyrod.com/ Rod Waldhoff].  (Note that the original is written in [http://coffeescript.org/ CoffeeScript].)
In this tutorial you'll be playing with [http://homeostasis.scs.carleton.ca/~soma/webfund-2016w/code/tinywebserver.js 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 [https://github.com/rodw/tiny-node.js-webserver tiny node.js web server] written by [http://heyrod.com/ Rod Waldhoff].  (Note that the original is written in [http://coffeescript.org/ 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 [http://homeostasis.scs.carleton.ca/~soma/webfund-2016w/code/hello.html 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.)
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 [http://homeostasis.scs.carleton.ca/~soma/webfund-2016w/code/hello.html 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 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===
===Questions===
Line 16: Line 14:
# Change the port the server listens on to be 3000.
# Change the port the server listens on to be 3000.
# 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.)
# 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.)
# Change tinywebserver.js so it returns a simple HTML error page in response to 404 errors (page not found).
# 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!)''
 
# Make the options object be stored in a file options.json and read on server startup.  This load may be synchronous!  Use [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse JSON.parse()] to convert the file data into an object.


==Node debugger==
==Node debugger==


Node has a [http://nodejs.org/api/debugger.html built-in debugger].  Start it by running <tt>node debug bin/www</tt>.  This will stop on the first line of the file.  Type <tt>n</tt> to step to the next line of the file. Type <tt>c</tt> to continue to the next breakpoint.  Breakpoints are set by adding a <tt>debugger;</tt> statement to the javascript source.   
Node has a [http://nodejs.org/api/debugger.html built-in debugger].  Start it by running <tt>node debug tinywebserver.js</tt>.  This will stop on the first line of the file.  Type <tt>n</tt> to step to the next line of the file. Type <tt>c</tt> to continue to the next breakpoint.  Breakpoints are set by adding a <tt>debugger;</tt> statement to the javascript source.   


At any time you can type <tt>repl</tt> 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.
At any time you can type <tt>repl</tt> 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.
Line 36: Line 34:
It which will stop on the first line of the file (<tt>var x = 5;</tt>). If you enter <tt>c</tt> node will continue executing until the <tt>debugger;</tt> statement where it will stop. From here if you enter <tt>repl</tt> you can execute Javascript in the current context. In the <tt>repl</tt> prompt if you enter <tt>x;</tt> it will return 5. If you enter <tt>x + y;</tt> it will return 15, etc.
It which will stop on the first line of the file (<tt>var x = 5;</tt>). If you enter <tt>c</tt> node will continue executing until the <tt>debugger;</tt> statement where it will stop. From here if you enter <tt>repl</tt> you can execute Javascript in the current context. In the <tt>repl</tt> prompt if you enter <tt>x;</tt> it will return 5. If you enter <tt>x + y;</tt> it will return 15, etc.


==Browser-based debugging==
==Browser developer tools==


* [https://developer.mozilla.org/en-US/docs/Tools Firefox developer tools]: Tools->Web Developer->Toggle Tools
* [https://developer.mozilla.org/en-US/docs/Tools Firefox developer tools]: Tools->Web Developer->Toggle Tools

Latest revision as of 22:05, 20 January 2016

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

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).