WebFund 2016W: Tutorial 2 - Revision history

Zero: Quite a few people in the tutorial are getting into trouble with this.

2016-01-20T22:05:01Z

Quite a few people in the tutorial are getting into trouble with this.

← Older revision		Revision as of 22:05, 20 January 2016
Line 14:		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.		# 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.

Soma at 21:13, 20 January 2016

2016-01-20T21:13:01Z

← Older revision		Revision as of 21:13, 20 January 2016
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].)

Soma at 21:06, 20 January 2016

2016-01-20T21:06:33Z

← Older revision		Revision as of 21:06, 20 January 2016
Line 21:		Line 21:
	==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.

Soma: /* Tasks */

2016-01-20T20:31:36Z

Tasks

← Older revision		Revision as of 20:31, 20 January 2016
Line 17:		Line 17:
	# 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).
	# Make the options object be stored in a file options.json and read on server startup. This load may be synchronous!		# 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==

Soma: /* Tasks */

2016-01-20T20:29:08Z

Tasks

← Older revision		Revision as of 20:29, 20 January 2016
Line 17:		Line 17:
	# 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).
			# Make the options object be stored in a file options.json and read on server startup. This load may be synchronous!

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

Soma at 01:09, 19 January 2016

2016-01-19T01:09:52Z

← Older revision		Revision as of 01:09, 19 January 2016
Line 5:		Line 5:
	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 36:		Line 36:
	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

Soma: 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...."

2016-01-19T01:04:10Z

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

New page

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

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.

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

===Tasks===
# 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 tinywebserver.js so it returns a simple HTML error page in response to 404 errors (page not found).

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

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.

For example, consider this source for <tt>test.js</tt>.
<source line lang="javascript">
var x = 5;
var y = 10;

debugger;
</source>
You can run <tt>node debug test.js</tt> to start the debugger.

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==

* [https://developer.mozilla.org/en-US/docs/Tools Firefox developer tools]: Tools->Web Developer->Toggle Tools
* [https://developer.chrome.com/devtools/index 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).