#olin.js #2 — express & mongo

We'll be covering the basics of Express and MongoDB (through Mongoose). Install MongoDB with the following commands on Ubuntu:

sudo apt-key adv --keyserver keyserver.ubuntu.com --recv 7F0CEB10;
echo "deb http://downloads-distro.mongodb.org/repo/ubuntu-upstart dist 10gen" | sudo tee /etc/apt/sources.list.d/10gen.list;
sudo apt-get update;
sudo apt-get install mongodb-10gen;

If you're on OSX, run:

brew install mongodb

Express

Now that we've explored Node.js a little, we will abstract the details away with the express development framework. Before, in the Node Beginner's Book, our code looked a lot like this:

var http = require("http");

http.createServer(function(request, response) {
  response.writeHead(200, {"Content-Type": "text/plain"});
  response.write("Hello World");
  response.end();
}).listen(8888);

Let's write the equivalent code in Express. First, fork the repository to your account as we did in the last room. Then git clone https://github.com/<YOUR GITHUB USERNAME>/olinjs-2.git as in the last lesson to clone this repository. Next, in the olinjs-2/ folder, run the command npm install. (If this triggers lots of lines with errors, run sudo npm install instead, or send us an email).

Next, create a file named app.js in that folder and paste in the following:

var express = require('express');
var app = express();

app.get('/', function(req, res){
  res.send('hello world');
});

app.listen(3000);

Inside the olinjs-2/ folder, run the command node app. While that's running, go to http://localhost:3000 in your web browser and you should see the following:

hello world

Great! You're so cool.

Express makes writing web servers in Node much easier. Here are some of the important differences between the examples you did in the book and Express:

• Routing. Instead of trying to parse the URL the user is at ourselves, we can just tell Express to match an individual path with a function.
• Sending a response. Express takes care of setting many obvious response headers for you. Express will also handle sending files like images, music, audio, or .html files from a folder easily.
• Handling templates (kinda). We haven't gotten here yet, but we'll touch on this later.

Let's go back to our app.js. We want more than just hello world. Let's make Express show the string hello olin when we go to http://localhost:3000/olin.

Delete what was in app.js and replace it with the following:

var express = require('express');
var app = express();

app.get('/', function(req, res){
  res.send('hello world');
});

app.get('/olin', function(req, res){
  res.send('hello olin');
});

app.listen(3000);

So what does app.get do? It tells express that every time we have a GET request from a client (the browser). We'll learn more about this in Routing.

###Routing

Before we talk about routing, let's talk a bit about clients vs servers. For our purposes, we can think of clients as the things that view webpages, such as our browsers. On the other hand, servers are the things that give our browsers the things to render.

Routing is the process of serving up different pages for different urls. When you go to www.mycoolsite.com/ your computer goes out on the internet and asks mycoolsite's server for a page. Mycoolsite's server then sees that request and sends back information to your computer in the form of html. This html is then rendered on your browser.

If you go to www.mycoolsite.com/ mycoolsite's servers obviously can't send you the same data it sent www.mycoolsite.com/olin. So mycoolsite's servers needs to differentiate / from /olin. This process is known as routing.

In the Node beginner book, we did routing through something like

var pathname = url.parse(request.url).pathname;
route(handle, pathname, response, request);

Instead of writing code ourselves to handle the route, Express can do this for us:

app.get('/', function (req, res){
  res.send('hello world');
});

app.get('/olin', function (req, res){
  res.send('hello olin');
});

These two routes we created are for the index page (/) and the olin page (/olin).

So what does app.get do? It tells express that every time that particular route (the first string argument) receives a HTTP GET request, we want to execute the anonymous function (the second argument). HTTP lets you perform different types of requests for a particular route, and these types are called methods. GET is just one of the methods you can perform, and is the most common (every time request an image or a script for example). You can view the other types of HTTP methods on wikipedia. But for now, let's only consider these two:

• GET returns a resource (such as an image or an html page). This is used for when your browser wants to read information from a server.
• POST is used for when your browser wants to send information over to the server. For example, when you fill out an online form, that data is sent over to the server as POST data.

###Automatically Generate an Express app

Express also comes with a set of nifty tools to get you started. You can make a new Express app by going into a directory and running

$ express

   create : .
   create : ./package.json
   create : ./app.js
   create : ./public
   create : ./public/javascripts
   create : ./public/images
   create : ./public/stylesheets
   create : ./public/stylesheets/style.css
   create : ./routes
   create : ./routes/index.js
   create : ./routes/user.js
   create : ./views
   create : ./views/layout.jade
   create : ./views/index.jade

   install dependencies:
     $ cd . && npm install

   run the app:
     $ node app

This creates a series of directories public, routes, and views. The public directory is used for client side assets such as images and client side javascript. Views are used to store the .jade template files which we will cover later. Right now our focus will be on the routes directory.

The routes directory holds all of the logic behind our routes. The actual routing is done in app.js with the following lines

app.get('/', routes.index);
app.get('/users', user.list);

If you go to the routes/index file, you'll see

exports.index = function(req, res){
  res.render('index', { title: 'Express' });
};

###App configuration

There are some initial configurations we want our app to do, such as running on a specific port, using routes, and setting up the public directory. This is all done in the app.configure function.

app.configure(function(){
  app.set('port', process.env.PORT || 3000); // sets up the port
  app.set('views', __dirname + '/views'); // sets the path for views
  app.set('view engine', 'jade'); // sets the engine that the views are rendered with
  app.use(express.favicon()); // default favicon
  app.use(express.logger('dev')); // error logging
  app.use(express.bodyParser()); // 
  app.use(express.methodOverride());
  app.use(app.router); // 
  app.use(express.static(path.join(__dirname, 'public'))); // sets the path for public files (css & js)
});

Mongo

MongoDB is a database (system for storing data every time you run an application) that stores data in a form like JSON. We'll be using it as our primary method of storage.

In order to use Mongo locally, we need to start up the Mongo [daemon](http://en.wikipedia.org/wiki/Daemon_(computing). Open up your terminal and type this in

$ mongod
all output going to: /usr/local/var/log/mongodb/mongo.log

As long as mongod is running, you'll be able to access your MongoDB locally through the default 27017 Mongo port and through your console. Access it through the console by opening up a new tab in your terminal and typing

$ mongo
MongoDB shell version: 2.2.0
connecting to: test
>

We can see all the dbs we have on our box by typing

> show dbs
local (empty)

Let's create a new database and a new entry in that database.

> use test
switched to db test
> db.users.insert({'name':'alice'})
> db.users.find()
{ "_id" : ObjectId("51007865e481634f390b162f"), "name" : "alice" }
> db.users.insert({'name': 'bob', 'grade': 'A', 'assignments':[{1: 'A', 2: 'B'}]})
> db.users.find()
{ "_id" : ObjectId("51007865e481634f390b162f"), "name" : "alice" }
{ "_id" : ObjectId("510078bee481634f390b1630"), "name" : "bob", "grade" : "A", 
  "assignments" : [ { "1" : "A", "2" : "B" } ] }
> show dbs
local (empty)
test  0.203125GB

Mongo creates a database for us as soon as we start inserting items into it. It stores data in what's known as a collection. So in our case, users would be a collection. Items within a collection don't have to be consistant with each other (alice only has a name while bob has a name and a grade).

We can also delete items

> db.users.remove({'name': 'alice'})
> db.users.find()
{ "_id" : ObjectId("510078bee481634f390b1630"), "name" : "bob", "grade" : "A", 
  "assignments" : [ { "grade" : "A", "grade" : "B" } ] }

modify items

> db.users.update({'name': 'bob'}, {$set: {'class': 2013}})
> db.users.find()
{ "_id" : ObjectId("510078bee481634f390b1630"), "assignments" : [ { "grade" : "A", "grade" : "B" } ], 
  "class" : 2013, "grade" : "A", "name" : "bob" }

and search for items

> db.users.find({'grade': 'A'})
{ "_id" : ObjectId("510078bee481634f390b1630"), "assignments" : [ { "grade" : "A", "grade" : "B" } ], 
  "class" : 2013, "grade" : "A", "name" : "bob" }

There are loads more Mongo commands that can be found through their documentation.

Mongoose

Mongoose is a javascript wrapper for MongoDB that allows us to save javascript objects into our db without having to deal with the underlying Mongo commands. Install it by opening up a console and typing

npm install mongoose

You configure Mongoose to save objects using a schema. In a schema we define what kind of data we expect an object to have.

var userSchema = mongoose.Schema({
    name: String,
    grade: String,
    class: Number
})

We can now use this schema to create and save users

var User = mongoose.model('User', userSchema);
var bob = new User({name: 'bob', grade: 'A', class: '2013'});
bob.save(function (err) {
  if (err)
    console.log("Problem saving bob", err);
});

Deploying

If we want Heroku to use a MongoDB, we have to use a 3rd party extension, Mongolab. Mongolab gives you a small amount of space on their cloud database servers. You get a special URI that you can use to connect to your Mongolab database. Fork this repo and type in

$ heroku create
Creating arcane-dusk-9739... done, stack is cedar
$ heroku addons:add mongolab:starter
Adding mongolab:starter on arcane-dusk-9739... done, v6 (free)

Now you can check the Heroku configuration variables to check the URI of your mongo instance

=== arcane-dusk-9739 Config Vars
MONGOLAB_URI: mongodb://heroku_app<app number>:<magic secret stuff>.mongolab.com:<port>/heroku_app<app number>
PATH:         bin:node_modules/.bin:/usr/local/bin:/usr/bin:/bin

The MONGOLAB_URI is the URI that you need to use to connect to your database.

#olin.js #2 — homework

Due Monday Jan 29 before class

After the second lesson, we should be able to create and deploy an Express app that saves data to a Mongo database.

##Reading

The olinjs-2 repo should be updated with new code that shows a few examples of things we didn't get to in class

• Breakout out our database models into it's own folder
• Showing data in HTML through jade

Go to your olinjs-2 repo folder and run git pull. You should see a message like

remote: Counting objects: 40, done.
remote: Compressing objects: 100% (28/28), done.
remote: Total 37 (delta 13), reused 29 (delta 6)
Unpacking objects: 100% (37/37), done.
From github.com:olinjs/olinjs-2
   e2b77b6..6caddd9  master     -> origin/master
Auto-merging routes/user.js
CONFLICT (add/add): Merge conflict in routes/user.js
Auto-merging routes/index.js
CONFLICT (add/add): Merge conflict in routes/index.js
Auto-merging package.json
CONFLICT (content): Merge conflict in package.json
Auto-merging app.js
CONFLICT (add/add): Merge conflict in app.js
Automatic merge failed; fix conflicts and then commit the result.

This is because we edited a lot of files during class and they were edited again by me later on. If you guys have used Subversion before, you've probably seen these errors. This just means that Git tried to combine our two changes together, but since we changed the same things, Git doesn't know which change should be kept and which one should be thrown away. So open up one of the files Git says it has a merge conflict for (such as app.js) and you should see something like this

<<<<<<< HEAD
  , user = require('./routes/user')
  , http = require('http')
  , path = require('path');

var mongoose = require('mongoose');
mongoose.connect(process.env.MONGOLAB_URI || 'localhost');

var schema = mongoose.Schema(
  { name: 'string' }
);

var Cat = mongoose.model('cat', schema);

  , User = require('./models/user')
  , user = require('./routes/user')
  , http = require('http')
  , path = require('path')
  , mongoose = require('mongoose');

The first part is the stuff you had in your file. The second part is the stuff I modified. The long string of numbers is the commit id of the change that conflicted with your local copy of files. You get to choose which part you want to keep. Just delete the lines you don't want.

Now if you `git add app.js` and then `git commit -m "fixing merge"` and `git push` you can now push the updated code without conflicts back to your own repository.

###Path parameters
Before starting on the assignment we need to learn about *path parameters*. Path parameters are routes that have variables in them. So let's say that we have a `/users` route. What if we want to show Bob's homepage every time we went to `/users/bob`? How would we tell our server to route that to Bob's homepage? We could do something like 

```js
app.get('/users/bob', function (req, res) {
  // render bob's homepage here
});

No. Don't do that. What happens when our app has a million users? We'd be too busy writing all the routes to do more fun things such as

• sleeping in our piles of money
• hookers & blow
• beating up David
• going to Vegas and betting all your money on blackjack because blackjack is an easy game to play the odds but having bad luck and losing lots of money anyway

So instead, we can tell Express to make the argument after /users a variable, like so

app.get('/users/:user', function (req, res) {
  // render bob's homepage here
});

Now when our server gets hit with /users/bob we can get the :user parameter

app.get('/users/:user', function (req, res) {
  console.log(req.params.user); // this logs bob if we go to /users/bob 
});

Every route request we do in both Express and Node have two arguments, usually designated by req and res.

• req is the request object. It is what our servers get as input when a route is hit. In this case,
• res is the response object. It is what our servers send back to the clients.

A bit about jade

So by now you've probably noticed the .jade files in your /views directory. These .jade files are eventually what's going to get rendered into the HTML that your browser sees.

Your app turns the .jade files into HTML through the jade templating engine. We specified that we're going to use jade in our app.js file through

app.configure(function(){
  app.set('port', process.env.PORT || 5000);
  ...
  app.set('view engine', 'jade');
  ...
});

Why use jade over regular html? There are lots of reasons, but the ones I can think of right now are

Less typing

because typing is a skill that we are all terrible at. We don't notice only because we are also terrible at reading.

Reuse HTML

Check out facebook.com. Notice that the site has the same header and right ticker bar no matter what page you're on? Wouldn't it suck if you had to copy and paste the same HTML for that every time a developer wanted to create a new facebook page? Even if you did, what happens when you want to make the header bar have an extra button? You're going to have go to through every single file and add in that button.

With jade, we can tell our app that we have a template that we want the site to look like and only write that HTML once.

To see how this works, open up views/index.jade in an Express app that you created. There should be this

extends layout

block content
  h1= title
  p Welcome to #{title}

Now run the express app with node app.js and go to your localhost site. Inspect the page with your browser and you should find html like

<!DOCTYPE html>
<html>
  <head>
    <title>Express</title>
    <link rel="stylesheet" href="/stylesheets/style.css">
  </head>
  <body>
    <h1>Express</h1>
    <p>Welcome to Express</p>
  </body>
</html>

If you notice in index.jade we didn't specify the html tags, doctype, or the title and yet it's there. It's rendering that html through the layout.jade file which has the following

doctype 5
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    block content

We're extending layout.jade through the extends layout line in our index.jade file. This means that everything that appears in layout.jade will appear in index.jade.

After the extends layout line in index.jade we have a line that says block content. This line tells jade that anything inside of that block should go in the block content area in layout.jade.

So the combination of index.jade and layout.jade gives us something like

doctype 5
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    h1= title
    p Welcome to #{title}

Which is the same thing that we see on the HTML page when we go to our localhost.

Embedded variables

Another nice thing that jade gives us is the ability to embed variables inside of our HTML files. Let's go back to facebook.com. It would suck if we had to manually write in every user's name on their own page. Jade handles this for us. We can do something like

  p Welcome to #{title}

When we go to our localhost, we see

Welcome to Express

We passed the title variable into jade through the following line in index.js

exports.index = function(req, res){
  res.render('index', { title: 'Express' });
};

The first argument that we passed to res.render is index which refers to the index.jade file. Our second argument is a Javascript Object (javascript objects are just key-value stores. They look like Python dictionaries).

Jade gives us multiple ways we can embed these variables into our page. We've already seen

  #{title}

Another valid form of syntax is

  h1= title

This sets the value of the <h1> tag equal to whatever the title variable is.

Programming functionality

You can also have things like if statements, for loops, etc in your templates. Want to display an arbitrarly long list of users in a page? Use a for loop that renders html.

Let's suppose we have a list of users in our user.js file

  res.render('users', {users: [
      {name: 'bob', class: 2013},
      {name: 'joe', class: 2011},
      {name: 'alice', class: 2011}
    ], 
    title: 'My First app'});

We can show an entire list of users with the following user.jade file

  div
    each user, i in users
      div(value=user) 
        #{user.name} graduates in #{user.class}

Some parting words

In order to complete this assignment, you're also going to have to use arrays & sorting in Mongoose. We didn't cover this in class, but it's not that much of a stretch to Google.

We encourage you to look at documentation and search for code/answers to problems that you run into. Attribute from where you copy, not just for honesty but because you'll probably run into the same issue again someday. This way, it'll be way easier to go back to where you found that answer.

Are you running into errors that the first page of Google results doesn't solve? Email out to the mailing list. Chances are, we've already had this error before.

##Assignment

• Fork this repo to your own account
• Run express in the folder that you just forked to create a new express app
• Edit your package.json file to look like this

{
  "name": "olinjs-2-hw",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node app"
  },
  "dependencies": {
    "express": "3.x",
    "jade": "*",
    "mongoose": "3.x"
  },
    "engines": {
    "node": "0.8.14 ",
    "npm": "1.1.65"
  }
}

• Run npm install
• Create an app that has the following routes
  • GET /cats/new => creates a new cat. Cats have a random age, a list of colors, and a name. Don't hardcode these values.
  • GET /cats => shows a sorted list of cats by age. This should display their names, colors, and age
  • GET /cats/color/:color => shows a sorted list of cats by age that have that specific color
  • GET /cats/delete/old => deletes the oldest cat :c The cat should no longer appear on any lists
• deploy this to Heroku and add your app to the homework 2 sheet

##References

• MongooseJS
• MongoDB
• Jade

01ddae7c452e8bbef95583b2be96f926b8bae4c2