Setting up a servi.js project without the servi editor

If you've hosted a web site with a company like Dreamhost, Bluehost, or GoDaddy, you may be familiar with uploading files via FTP and having them immediately appear on your web site. That's because in [shared hosting services] (https://en.wikipedia.org/wiki/Shared_web_hosting_service) like these, the server set-up has been done for you behind the scenes.

We're going to do things differently in order to explore how a server works. Instead of using a pre-installed web server software, we're going to program our own simple server using Node.js and a tool to simplify the process of building a web server in Node, called Servi.js.

What is Node?

Javascript has been around since the early days of the web. Until recently, it was something used exclusively in a web browser -- on the "client side" or "front end", as you'll hear it called. With Node.js, Javascript runs on the server side, or "back end". Node is a new player in server-side programming languages; some of the more established ones you may have heard of are PHP, Ruby, and Python.

One nice thing about node is that, since it's Javascript, the programming language is the same on both the front end and back end. That makes it a great choice for this class, where we're learning a lot of things quickly about both the client side and the server side.

What is Servi?

ITP student Sam Lavigne and faculty member Shawn Van Every developed Servi.js to wrap some of the common tasks for building web servers in Node.js. Anything you can do in Servi, you can do in regular Node; Servi just saves you some steps.

#Terminal To work with Servi, you are first going to want to become familiar with using the "command line". The terminal provides "shell" access to your computer. You can browse directories and execute applications via text-based commands. In Mac OS X or Linux, you can access the command line using a program called Terminal. In Windows, you will need to install your own command line program like Cywin, then install ssh on it.

When you open Terminal, you will see something like:

The blinking cursor is the "prompt", where you can execute a command. Here is a list of some common commands you'll need.

• cd - change directory. The following, for example, will set the current path to your desktop. You'll want to replace "shiffman" with your username. cd /Users/shiffman/Desktop.
• pwd - print working directory. This will print out the current directory.
• ls - list the contents of the current directory.

This is barely scratching the surface of what you can do with unix commands. We will come back to this tool in a moment when we need to install and run servi projects.

Hello World

0. Install node.js. Visit nodejs.org, click "INSTALL", and follow the steps.

1. Create a new folder for your project. Use Terminal to navigate to the folder.

$ cd /path/to/your/folder

2. Install the servi.js module. Open Terminal, and type the following line. (Start after the $ symbol. Command line instructions are normally shown with the $ symbol at the beginning of each new line, it just represents the stuff you see at the beginning of the line when you open Terminal, so you don't type it in.)

$ npm install servi

3. Create a new JavaScript file, let's call it server.js. Place this code inside:

var servi = require('servi');
var app = new servi(true);

port(8080);

route('/', requestHandler);

function requestHandler(request) {
    request.respond("Hello World");
}

start();

4. To run your program, type:

$ node server.js

5. You should see the Terminal print Server has started on port 8080. If you visit http://localhost:8080 in your browser, you should see the page says "Hello World". To stop your program running, hold down CTRL while you press X, followed by C.

#Hello Serve Files

The above program prints "Hello World", but if we want to serve static files (HTML, CSS, JS pages) we will have to change the program a little bit.

1. First, make a new folder within your current project folder. This folder will hold all the static files you want servi to serve. You can name it anything you like, but the name "public" is common, representing the fact that the files in this folder will be publicly viewable when you run your server (as opposed to the server.js code which runs but isn't displayed directly).

2. Servi is set up to recognize a page called index.html as the home page in a directory. Create an HTML page called "index.html" and save it in your "public" (or whatever you named it) directory. Here's a simple HTML page you can copy-paste: https://github.com/robynitp/networkedmedia/blob/master/1-html/basic.html.

3. Replace the code in your server.js file above with:

var servi = require('servi');
var app = new servi(true);

port(8080);

serveFiles("public"); // name of new folder

start();

4. The serveFiles("public"); line should have the name of the new folder you just created in quotes. In this case, that name is "public".

5. Run your program. If you visit http://localhost:8080, you should see the contents of the index page.

$ node server.js

6. If you have other html pages with titles other than "index" in your public folder, you can change the address on the browser navigation bar, adding the name of the file you want to view at the end. For example, if you had a file called "other.html", you would view it like this:

7. To stop running your program type ctrl+x, then ctrl+c. If you refresh the page in your browser, you should see it doesn't load. You do not need to stop and restart your app if you just change the files in you public folder. However, if you changes the code in server.js, you will need to stop and restart in order to see it take effect.