Aplicación básica con NodeJS, Express, Jade y Stylus

Este tutorial trata de enseñar sobre la creación de un sitio básico utilizando NodeJS y Express, el tutorial va dirigido a todos que quieran explorar lo que nos ofrece NodeJS.

Bueno sin más que decir empezamos.

1. Instalación

Cuando quise empezar con NodeJS y Express me topé con muchos tutoriales en la red, que me decian cómo instalarlos en windows pero lamentablemente ninguno me funcionó y a la mayoria de mis amigos les ocurría lo mismo. Cansado de eso desarrollé mi propio paquete que contiene NodeJS, Express, Stylus, Jade todo en uno así que para este tutorial vamos a utilizar ese paquete, les prometo que no se van a arrepentir.

Click para descargar : Descargar

Ya descargado el archivo lo extraemos donde queramos. Ahora agregamos al PATH la ruta de los archivos.

Por ejemplo yo lo tengo en: C:\NodeJS-Jade-Stylus -> está ruta agregamos al PATH

Los archivos que contiene son:

Código :

- node_modules -> contiene Express, Jade y Stylus
- node.exe
- jade.bat
- stylus.bat
- express.bat
- consola.bat

Eso es todo, ya tenemos instalado todo lo necesario.

2. Creando la Aplicación

Bueno ahora si empezamos con lo bueno. Primero nos dirijimos a la carpeta donde extrajimos los archivos. Y abrimos el archivo "consola.bat" y escribimos los siguiente.

Código :

express -t jade -c stylus nombre_aplicacion

Donde "nombre_aplicacion" es el nombre de la aplicacion que vamos a crear, podemos poner lo que sea.
Esto nos generará los archivos de la aplicación:

Código :

←[36mcreate←[0m : nombre_aplicacion
←[36mcreate←[0m : nombre_aplicacion/package.json
←[36mcreate←[0m : nombre_aplicacion/app.js
←[36mcreate←[0m : nombre_aplicacion/public
←[36mcreate←[0m : nombre_aplicacion/views
←[36mcreate←[0m : nombre_aplicacion/views/layout.jade
←[36mcreate←[0m : nombre_aplicacion/views/index.jade
←[36mcreate←[0m : nombre_aplicacion/public/javascripts
←[36mcreate←[0m : nombre_aplicacion/public/images
←[36mcreate←[0m : nombre_aplicacion/public/stylesheets
←[36mcreate←[0m : nombre_aplicacion/public/stylesheets/style.styl

Ahora para probar si funciona escribimos:

Código :

node nombre_aplicacion/app.js

Y el servidor deberia empezar a correr, por defecto se configura en el puerto 3000

Código :

The "sys" module is now called "util". It should have a s
Express server listening on port 3000 in development mode

Ahora abrimos en nuestro navegador: http://localhost:3000
y veremos los resultados.

Como podemos ver, es muy fácil crear una aplicación con Express para que funcione con NodeJS.

3. Explicación

Ahora les voy a explicar qué es lo que hace cada archivo de nuestra aplicación.

package.json
Básicamente contiene la información de nuestra aplicación: nombre, versiones, etc.

app.js
Este archivo es el que hace "correr" nuestra aplicación, además de ser el archivo de configuración principal de la aplicación, donde podemos configurar las rutas, el directorio de vistas, etc.

Carpeta /views
Aquí colocamos todas las vistas que contendrá nuestra aplicación.
index.jade -> Está es la vista que está configurada por defecto en app.js
layout.jade -> Como Express usa el patron MVC también utiliza layouts

Carpeta /public
Aqui es donde colocamos, por decirlo de una forma "la interfaz de la aplicación" ya sean, imágenes, archivos css, y archivos js

public/stylesheets/style.styl -> Aquí es donde escribimos css, que después generará un archivo style.css, en el caso de que tengamos otro archivo, por ejemplo:
estilo.styl esto genera un archivo estilo.css con el código ya compilado.

4. Conclusiones

Bueno eso es todo, lo que pretendía con el tutorial no era crear una super aplicación, si no ayudarles a cómo introducirse en el mundo de NodeJS y demás de una manera rápida y sencilla.

Si desean referencias pueden ver a Joan Piedra en la conferencia de Mejorando.la en donde nos muestra como trabajar con Jade y Stylus.

Espero que les haya servido de algo.

 

Tweet