Desarrollo Web con ExpressJS y MongoDB

31/10/2016 Desarrollo Web con ExpressJS

Introducción

Buenas! En esta serie veremos cómo realizar un desarrollo web usando ExpressJS, el framework más popular de NodeJS. Para la Base de Datos, emplearemos MongoDB junto con Mongoose. Combinaremos estas tecnologías mediante Javascript por lo que disfrutaremos de un excelente proyecto FullStack con el mejor lenguaje del momento .

También aprenderemos a montar un scafolding adecuado que mantenga organizado todo el proyecto, para que sea mantenible, escalable y sobretodo entendible por otros posibles desarrolladores que se puedan sumar al proyecto. En este apartado también aportaré algo de mi opinión y experiencia personal sobre cómo debe estructurarse una aplicación como esta.

Como siempre, emplearemos el uso de librerías de terceros y seguiremos con la mayor restricción posible todos los convenios, estándares y directrices de cada tecnología, para conseguir un código actualizado y homogéneo.

Setup

Lo primero será descargar e instalar NodeJS de su página oficial. Este proceso también nos instalará NPM. Con NPM podremos empezar a desarrollar nuestra aplicación gracias al paquete Express Generator. Lo instalaremos globalmente con el comando:


                npm install express-generator -g

Ahora nos ubicaremos en algún directorio de nuestro sistema donde deseemos tener todos los archivos de nuestra aplicación. Por ejemplo, en la carpeta de nuestro Usuario, abrimos una consola (CMD ó GitBash) y ejecutamos el comando:


                express ExpressDev

Esto nos descargará archivos creando el siguiente scaffolding:

Esta primera estructura precisa de algunos ajustes, sobretodo en los archivos .jade, que ahora han pasado a llamarse .pug. Estos archivos tienen que ver con el motor de plantillas por defecto de Express del cual hablaremos más adelante. Por el momento:

Renombramos los .jade por .pug.
También renombraremos los directorios públicos javascript js. Lo mismo con stylesheets css
Crearemos un directorio database en la raíz del proyecto.
Crearemos otro directorio resources que contendrá el desarrollo front-end.
Y otro más de nombre server para el back-end.
Moveremos todo el directorio routes dentro de server.
Finalmente, en la raíz del proyecto, crearemos cuatro archivos más: .env, .env.example, gulpfile.js y .gitignore.

Tras las modificaciones dispondremos de los ficheros y directorios mínimos necesarios para un desarrollo FullStack.

El archivo .gitignore será necesario si empleamos Git* para evitar que ciertos archivos se compartan entre los distintos desarrolladores.
En el archivo .env es uno de los archivos que no debe ser compartido, ya que contendrá información sensible específica de nuestro entorno (claves de BBDD, url de nuestro host, etc). Por esta razón hemos creado un .env.example, para compartir este último con los demás desarrolladores y lo puedan usar como plantilla a la hora de crearse su propio .env.
El gulpfile.js es de obligatoria inclusión, ya que con él construiremos el front-end de nuestra app a partir de los archivos de desarrollo de resources mediante (Gulp).

*Git es el SCV por excelencia que nos ayudará a tener el código bajo control y nos permitirá trabajar en grupo más fácilmente. Es opcional, pero la mencionamos porque que lo considero imprescindible en cualquier desarrollo de hoy.

Ahora, desde la raíz del proyecto, abriremos una Consola y ejecutaremos el comando:

npm install

Se descargarán todas las dependencias iniciales definidas en el package.json por Express Generator, creando el directorio node_modules (este directorio también deberá ignorarse del repositorio).

Al haber renombrado los .jade por .pug deberemos instalar Pug (que es el nuevo nombre del motor de plantillas por defecto de Express). Lo haremos con:

npm install -S pug

Ahora modificaremos en el archivo app.js el motor de plantillas que vamos a usar.

Buscamos la línea app.set('view engine', 'jade'); y la modificamos por app.set('view engine', 'pug');

También deberemos buscar las líneas:

                
                    var index = require('./routes/index');
                    var users = require('./routes/users');

Y modificarlas por:

                
                    var index = require('./server/routes/index');
                    var users = require('./server/routes/users');

Además modificaremos el archivo bin/www, buscamos la línea con server.listen(port)

Y la editamos con:

                
                    server.listen(port, function(){
                        console.log('Express Server listening on port ' + server.address().port);
                    });

Finalmente, ejecutamos la aplicación con npm start. Esto leerá el archivo package.json, buscará en la sección de scriptsy ejecutará el comando ahí descrito ("node ./bin/www").

Si vemos ese mensaje quiere decir que podremos abrir nuestro navegador en la dirección localhost:3000 donde veremos

Y voilá! Ya tendremos nuestra aplicación corriendo. Ahora explicaremos un poco algunos de los archivos clave.

app.js

Este archivo es nuestra Aplicación Express. Aquí se define y configura todo lo necesario para que Express escuche peticiones de clientes y envíe respuestas. La forma correcta de desarrollar es modularizando el código, separándo distintas funcionalidades en distintos ficheros y luego los requerimos con require desde app.js. El Express Generator nos otorga un app.js muy básico donde básicamente sólo:

Se inicializa el módulo Express con var app = express();
Se registran unos módulos básicos y fundamentales (como BodyParser y CockieParser).
Se le indica a Express qué directorio contendrá los archivos estáticos (css, js, imágenes, fuentes, etc) con app.use(express.static(path.join(__dirname, 'public')));
También se configuran un par de rutas (url's que podrá visitar un cliente) mediante app.use('/', index); y app.use('/users', users);
Más abajo una pequeña configuración para el tratamiento de errores (cuando se solicite una url inexistente)
Y finalmente se exporta la variable app (Aplicación Express configurada) con module.exports = app;

Al haberse exportado la variable app podremos requerirla desde cualquier otro archivo.

www

Ubicado dentro del directorio bin, este archivo require a nuestra Aplicación Express con var app = require('../app.js'); y le aplica una configuración final. Lo único que se hace aquí es decirle a Express sobre qué puerto escuchar (por defecto el puerto 3000) con app.set('port', port); y también se le solicita que arranque la aplicación con var server = http.createServer(app);. Tras esta línea es cuando nuestra máquina comienza a atender peticiones.

package.json

Este fichero describe nuestra Aplicación. Posee información importante como las Dependencias del Proyecto, el nombre y la versión. Además posee una entrada scripts donde podemos poner comandos que queramos ejecutar con npm.

Podemos ver que en scripts está definido un comando, llamado start. Este comando lo que hace es llamar al comando node ./bin/www. Es decir, al arrancar anteriormente la aplicación con npm start lo que estábamos haciendo por debajo era simplemente llamar a node ./bin/www.

Más Dependencias

Existen algunos paquetes que se usan como Dependecias del 90% de los proyectos de desarrollo web, y estos son JQuery y Bootstrap. En este proyecto usaremos Bootstrap-Sass, además agregaremos también FontAwesome, una excelente librería de Iconos Web .

Descargamos todo con npm install -S bootstrap-sass jquery font-awesome

En node_modules tendremos todos los archivos descargados.

Integrar GIT

GIT es el SVC de los que saben. Integrar Git es muy sencillo, simplemente deberemos instalarlo. Una vez instalado, desde la raíz del proyecto, escribimos el comando git init y ya habremos convertido todo el directorio en un repositorio Git. De este modo podremos compartir el código con más desarrolladores y además, dispondremos de la habilidad de trackear cualquier modificación que sufra cualquier archivo. Esto nos ayudará a matener el código.

.gitignore

En este fichero le indicaremos al sistema Git qué archivos queremos ignorar, es decir, archivos que no deseemos subir al repo y por tanto no serán compartidos entre desarrolladores. Escribimos en él lo siguiente:

                .env
                .idea
                node_modules
                public/*

Hostings Git

Si queremos compartir el repositorio, la forma más cómoda es usando alguno de los Hostings gratuitos existentes como GitHub ó BitBucket. Deberemos crearnos una cuenta y seguidamente crear un Repositorio.

SourceTree es una muy buena aplicación gráfica para trabajar con Git. Recomiendo su uso, nos ayudará a usar este sistema de una forma más sencilla a base de clicks.

Haciendo Push

Una vez tengamos el Repositorio creado en nuestro Hosting y nuestro Repo inicializado en local (git init), podremos proceder a subir los archivos a la nube. Escribiremos:

git add -A

Se añadirán todos los archivos al Repositorio (a excepción de los descritos en .gitignore). Luego escribiremos:

git commit -m "Primer commit"

Con este comando añadimos un Mensje e indicaremos que estamos seguros de los cambios realizados (en este caso, haber añadido todos los archivos al Repo).

git add [file] Añadir un archivo en Git significa quequeremos trackear dicho archivo, es decir, es indicarle a Git que guarde un registro de todas las modificaciones que se realicen sobre dicho archivo. Si queremos que se deje de 'seguir la pista' a un archivo lo podemos hacer con git remove [file]

Ya tendremos el Repositorio listo en local, finalmente, lo subiremos al hosting con:


                git remote add origin https://url/al/repo.git

Con ese comando añadiremos un remote (dirección donde subir el repo). Y seguidamente escribimos:


                git push

Todos los archivos se subirán a nuestro Hosting.

Para futuras actualizaciones, los únicos comandos que deberemos escribir serán git add -A y luego git push.

Credenciales: Es posible que nuestro Hosting solicite credenciales. Deberemos tener nuestro Git correctamente configurado con:

git config user.name NuestroUsuario

git config user.email NuestroEmail

Compartiendo el Repo

Si queremos disponer de todos los archivos de nuestro proyecto desde algún otro PC o si queremos compartir el código con algún otro desarrollador, sólo deberemos hacer un:

git clone UrlDelProyecto nombreDirectorio

Con esto tendremos todo el Repositorio en local dentro del directorio indicado.

Para sucesivas actualizaciones del Repo (cuando otros hagan git push) sólo escribiremos:

git pull

y todos los ficheros se descargarán con las nuevas modificaciones en nuestro PC.

Repositorio de este proyecto

Todo el código de este proyecto se encuentra aquí.

Ahí podréis ver todo el código y si lo deseais podéis clonarlo para disponer de él con:

git clone https://github.com/GonzaloGPF/expressdev.git expressDev

*Donde "expressDev" es el nombre del directorio de vuestro PC donde queréis descargar todos los archivos.