Como crear una página web con node.js, express, jade y stylus

Stay hungry, stay foolish

Steve Jobs

En este pequeño tutorial vamos a ver como crear una pequeña pagina web en node.js utilizando el framework express, jade como motor de plantillas y stylus para compilar el css.

Express

Es un framework para crear aplicaciones utilizando node.js, el cual esta inspirado en sinatra, y provee una serie de características robustas para desarrollar aplicaciones con un performance increíblemente rápido, sencillo y simple de utilizar.

Jade

Es un motor de plantillas, con el cual podemos crear de forma rápida y sencilla un template que al compilarse genera el código HTML

Stylus

Es un preprocesador CSS que facilita la creación de código CSS

Ahora si, comencemos con el tutorial

Vamos a requerir que ya se encuentre instalado node.js, si no sabes como puedes revisar este post en el cual se describe el proceso de instalación. Una vez que este instalado node vamos a proceder a instalar express, jade y stylus para lo cual tenemos que abrir la terminal(linux) o simbolo de sistema(Windows) y escribir los siguiente


npm install -g express
npm install -g jade
npm install -g stylus

Una vez que ya tengamos instaladas las herramientas necesarias para este ejercicio vamos a proceder  a crear una carpeta con el nombre de nuestro proyecto en la ubicación que se desee. Posteriormente accedemos a dicha carpeta


mkdir ejemplonode
cd ejemplonode

Una vez que estamos dentro de la carpeta vamos a crear nuestra aplicación la cual se puede hacer de forma manual creando cada archivo o de forma automática, para este ejercicio vamos a hacerlo de forma automática por lo tanto escribimos el siguiente comando


express --css stylus

Una vez que hayamos ejecutado el comando anterior se deben de haber creado en la carpeta del proyecto la estructura de archivos de la aplicación

esapnode

Vamos a proceder a modificar algunos de los archivos creados para personalizar nuestra aplicación.
Abrimos el archivo package.json y vamos a modificar el nombre de la aplicación, vamos a ver que también nos indica las dependencias que estamos utilizando express, jade y stylus

{
  "name": "ejemplo nodejs",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node app.js"
  },
  "dependencies": {
    "express": "3.4.7",
    "jade": "*",
    "stylus": "*"
  }
}

El segundo archivo que vamos a abrir es app.js, dentro de este archivo se esta creando la aplicación utilizando express() y tambien se están incluyendo las dependencias necesarias, vemos que se esta especificando el puerto en el que va a trabajar que en este caso es el 3000, también indica que las vistas se van a guardar en una carpeta llamada views que se encuentra dentro del directorio raiz de nuestra aplicación, el motor de plantillas es jade, se indica también la referencia a stylus,  los archivos estáticos se almacenaran en una carpeta public, en dicha carpeta estarán los archivos css, javascript y las imágenes. Al final se crea el servidor que va a estar escuchando en el puerto 3000

/**
 * FILE: app.js
 * Module dependencies.
 */

var express = require('express');
var routes = require('./routes');
var user = require('./routes/user');
var http = require('http');
var path = require('path');

var app = express();

// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.json());
app.use(express.urlencoded());
app.use(express.methodOverride());
app.use(app.router);
app.use(require('stylus').middleware(path.join(__dirname, 'public')));
app.use(express.static(path.join(__dirname, 'public')));

// development only
if ('development' == app.get('env')) {
  app.use(express.errorHandler());
}

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

http.createServer(app).listen(app.get('port'), function(){
  console.log('Express server listening on port ' + app.get('port'));
});

Pasemos al archivo  index.js  ubicado dentro de la carpeta routes, el cual se encarga de obtener la página de inicio llamando a la vista index, en este archivo solo vamos a modificar el valor de title


/*
 * FILE: index.js
 * GET home page.
 */

exports.index = function(req, res){
  res.render('index', { title: 'Mi primer página con Node.js' });
};

Ahora vamos a modificar la plantilla HTML y para esto abrimos el archivo index.jade ubicado dentro de la carpeta views, Al momento de estar trabajando con jade es importante mencionar que el código debe estar indentado y dicha indentación se puede hacer con espacios o tabuladores pero no ambos, así que decide como vas a indentar.

extends layout

block content
	div.contenedorprincipal
		header
			h1 #{title}
		section
			div.contenedorinfo
				div.info
					h1 Aquí va la informacion importante
					p
						| Información aquí
					p
						| Información aquí
			div.contenedorsidebar
				div#sidebar
					h1 Titulo sidebar
					p
						| Información aquí
		footer
			div.contenedorpie
				p
					| Todos los derechos reservados

Otro archivo que vamos a modificar layout.jade ubicado dentro de la carpeta views y vamos a agregar las 2 etiquetas link para las fuentes de google fonts: Fjalla One y Open sans

html
  head
    title= title
    link(href='http://fonts.googleapis.com/css?family=Fjalla+One', rel='stylesheet', type='text/css')
    link(href='http://fonts.googleapis.com/css?family=Open+Sans', rel='stylesheet', type='text/css')
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    block content

Por ultimo vamos a modificar el archivo style.styl ubicado en la carpeta public/stylesheets/ y vamos a colocar el siguiente código

body
	background #f1eee5

.contenedorprincipal
	width 900px
	margin 0 auto

h1
	font-family 'Fjalla One', sans-serif

p
	font-family 'Open Sans', sans-serif
	font-size 14px
	font-weight 300

header h1
	width 100%
	margin 10px 0 15px 0
	text-transform uppercase

.contenedorinfo
	float left
	width 70%

.contenedorsidebar
	float left
	width 30%

.info
	background #1d3859
	border-radius 10px
	margin 0px 10px
	padding 5px 15px
	color white

#sidebar
	background #7da336
	border-radius 10px
	margin 0px 10px
	padding 5px 15px
	color white

footer
	position relative

.contenedorpie
	float left
	width 100%
	margin 5px 0
	border-radius 10px
	background #0d81d5
	color white

.contenedorpie p
	padding 5px 15px
	color #dfdfdf

Ahora para iniciar nuestra aplicación escribimos en la terminal el siguiente comando

node app.js

Posteriormente abrimos nuestro navegador y accedemos a la dirección http://127.0.0.1:3000 y si no tenemos ningún error nos debe mostrar una pagina como esta

pwcn

Eso es todo en este pequeño ejercicio, les dejo el link con los archivos del proyecto por si desean descargarlo.

Descargar: ejemplo aplicacion nodejs con express, jade y stylus