nomination part 1-2

This post is part of the series about creating an app with node.js, express for Facebook

Part 1-2

Part 3

Part 4

Part 5

Part 6

Part 7

Part 8

Part 9

Part 10

Nomination will be an app to nominate your friends about something specific, like "who is the most ugly" and then you can add your Facebook friends to this nomination and start voting them

version en español

First of course you will need to install node and npm, see nodejs.org if you need help, let me know in the comments.

Lets think about the tools we are going to need:

• Express as our framework for route handling
• Jade for templates
• Facebook-js to connect to the social network
• mongoose as our orm
• Mongodb, we are going to use mongolab

Lets start installing express globally in our machine and generate the app

npm install express -g
express nomi-nation
cd nomi-nation
ls
app.js
package.json
public
views

In the folder, we can see that we have app.js that is the template to start programming, now lets install our dependencies, this dependencies can be described in "package.json", lets update this file with something like this:

{
    "name": "application-name"
  , "version": "0.0.1"
  , "private": true
  , "dependencies": {
      "express": "2.4.6"
    , "jade": ">= 0.0.1"
  }
}

Wen we have our package.json ready then we do:

npm install -d

This will install all the dependencies included in the package.json

Now lets see our app running:

node app.js

Open up the browser and point it to "localhost:3000" and we will see our initial page

Lets review the script "app.js";

/**
 * Module dependencies.
 */

var express = require('express');

var app = module.exports = express.createServer();

// Configuration

app.configure(function(){
  app.set('views', __dirname + '/views');
  app.set('view engine', 'jade');
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(app.router);
  app.use(express.static(__dirname + '/public'));
});

app.configure('development', function(){
  app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));
});

app.configure('production', function(){
  app.use(express.errorHandler());
});

// Routes

app.get('/', function(req, res){
  res.render('index', {
    title: 'Express'
  });
});

app.listen(3000);
console.log("Express server listening on port %d in %s mode", app.address().port, app.settings.env);

Line 6, load express framework with require, this is the format to load the modules

8, creating the server

12-19, specifying configurations, where are our views or templates, the engine to use (can be haml or another sported by express), use router and the static address for our resources (images, js, css, etc)

21-27, ambient specific configurations

31-35, our main route, we have "app" var which is where we created the server, then ".get" which is the http verb, this will respond only to get request, if its post this won't catch it, we should create "post" for that, then the route "/" and the function to handle that route, res is the response we will send to the client and render is to render the template, this time the "index" and a default template, lastly we send the variable title that holds the title of the page

37, we tall app to listen in the port "3000" and we are set the app begins

38, log out the port and the ambient we are working on

For the moment in the public folder we only have a basic stylesheet and everything else is empty

In views folder we have 2 templates, "index.jade" which is our main page and "layout.jade" that is the default layout, layout looks something like this:

!!!
html
 head
   title= title
   link(rel='stylesheet', href='/stylesheets/style.css')
 body!= body

!!! its to specify the html version

"title=" to create the tag title with whatever we send in the variable title and in the end the body will be whatever we put in "index.jade", index looks like this:

h1= title
p Welcome to #{title}

We are creating a header with the title name and a some welcome message with the same title variable, look the difference, the first one will create the tag if the var have something, the second will create the tag and put as a text whatever the title var have, see more examples in the jade github

Next post will start writing some code :)