WebFund 2013F: Tutorial 1

For this class you will be using a Lubuntu virtual machine appliance. We will be using VirtualBox as our preferred virtualization platform; however, VMware Workstation/Fusion and other virtualization platforms should be able to run the appliance as well. In this first tutorial you will be becoming familiar with node.js-based development environment provided by this appliance.

To get credit for this lab, show a TA or the instructor that you have completed all of the following steps.

If you finish early (which you are likely to do), try exploring node and the Lubuntu environment. You will be using them a lot this semester!

Running the VM

In the SCS labs you should be able to run the VM by starting Virtualbox (listed in the Applications menu) and selecting the COMP 2406 or Lubuntu virtual machines. After the VM has fully booted up you can login to the student account using the password "tneduts!". This account has administrative privileges; in addition, there is the admin account in case your student account gets corrupted for any reason. The password for it is "nimda!".

We highly recommend running your VM in full-screen mode. Do all of your work inside of the VM; it should be fast enough and you won't have any issues with sharing files or with firewalls.

If you want to run the appliance on your own system (running essentially any desktop operating system you want), just download the Lubuntu.ova (alternate source) virtual appliance file and import. If the application is not VirtualBox, you'll need to:

• Have the VM platform ignore any errors in the structure of the appliance;
• Uninstall the VirtualBox guest additions by typing starting a terminal application and running

  sudo /opt/VBoxGuestAdditions-4.2.16/uninstall.sh

• Install your platform's own Linux guest additions, if available.

Note as we will explain, you will have the ability to easily save the work you do from any VM to your SCS account and restore it to any other copy of the class VM. Thus feel free to play around with VMs; if you break anything, you can always revert. Remember though that in the labs you must save and restore your work; the any changes you make to them during your session are otherwise deleted upon logout!

Hello, World!

To create your first node application, start the geany code editor under the Programming LXDE start menu (the icon in the bottom right of the screen). In it, create a file hello.js in your Documents folder with the following contents:

  console.log("Hello World!");

You can now run this file by opening an LXTerminal (under Accessories) and typing:

  cd Documents
  node hello.js

And you should see Hello, World! output to your terminal.

You can also run node interactively by simply running node with no arguments. You'll then get a prompt where you can enter any code that you like and see what it does. To exit this environment, type Control-D.

Note that when run interactively, we say that node is running a read-eval-print loop (REPL). It reads input, evaluates it, and then prints the results. This structure is very old in computer science, going back to the first LISP interpreters from the early 1960's.

Your First Web App

Web applications, even simple ones, are a bit more complex than our "Hello, world!" example. Fortunately in node we have the express web application framework to make getting up and running quite easy.

In a terminal window, run the following commands:

 express first
 cd first
 npm install
 node app.js

You should get a message at the end saying that your app is listening on port 3000. To see what your app is doing, start up a web browser in your VM and visit the following URL:

 http://localhost:3000

You should see a message from your first web application!

Simple Changes

Now that you have an app up and running, use geany to edit to make the following simple changes:

• Change the default port to 2000 (app.js)
• Change the title to "My First Web App" (routes/index.js)
• Get rid of the default stylesheet (views/layout.jade)

Saving your work

You can save your work to your SCS account by running

 save2406 <SCS username>

This will rsync /home/student to the COMP2406 directory in your SCS account by connecting to access.scs.carleton.ca.

When you wish to restore your student account, run

 restore2406 <SCS username>

Note that both of these commands are destructive - they will wipe out all the files in the COMP2406 folder on SCS or /home/student in your VM. If you want to see what the differences are between the two versions, run

 compare2406 <SCS username>