Construir un Stack de NodeJS con TypeScript, ExpressJS, MongoDB, AngularJS (Parte 1)

Este post va dirigido a aquellos que quieran comenzar un proyecto en NodeJS y quiera entender como funcionan y se conectan todos los elementos entre sí, sin utilizar un Stack ya predefinido.

Empezamos por lo básico, yo utilizo el IDE Webstorm de JetBrains y todo el código de post estará alojado en este repositorio https://github.com/Squallium/node-express-typescript, utilizo git flow o lo intento 🙂 y además iré desplegando en heroku el proyecto a medida que llegue a lo que considere puntos de inflexión o cosas que deberíamos probar 🙂

En primer lugar vamos a crear una estructura básica de un proyecto de NodeJS con ExpressJS para ello yo en mi caso utilizo el wizard de de WebStorm, si no es vuestro caso podéis utilizar express-generator. Una vez creado y comprobado que arranca vamos a desplegarlo en heroku. Debéis tener instalado heroku toolbelt si no es así podeís instalarlo siguiendo las instrucciones de la pagina de heroku setup

Para que heroku pueda arrancar nuestro proyecto debemos crear en la raiz del mismo un fichero Procfile que inicie  la aplicación. Si estas usando WebStorm, este fragmento de código esta en la carpeta bin un fichero llamado www. Nosotros vamos a crear uno a parte que llamaremos pre-prod-env.jsy que tendrá el siguiente contenido.

El fichero Profile tendrá el siguiente contenido.

Una vez hecho esto, nos colocamos en la carpeta del proyecto, vamos a crear un repositorio de git, añadirle nuestro remoto (en mi caso de github) y luego desplegarlo en heroku.

Después de esta ristra de código, deberíamos por un lado tener en nuestro repositorio subido a (GitHub, BitBucket…) y nuestra aplicación subida a heroku y abierta en el navegador 🙂

Voy a utilizar Admin-LTE como template para la aplicación. Como mi motor de templates es Jade, además estoy portando a Jade el Admin-LTE. Para ello vamos a necesitar un buen numero de modulos y librerías externas.  En primer lugar vamos a instalar admin-lte como modulo de nuestro proyecto de node.

Podéis copiar directamente las vistas de mi proyecto, pero si intentáis arrancar solo veréis una web sin css un poco fea. Admin-LTE precisa de una serie de librerías como JQuery o Font-Awesomes. Para instalar estas dependencias vamos a utilizar bower, que es un bonito gestor de dependencias.  Vamos a empezar con bootstrap, para instalarlo primero instalamos bower  npm install --save bower , incializamos el fichero de configuración bower.json con el wizard  bower init . Una vez inicializado, instalamos bootstrap  bower install bootstrap --save  y nos aseguramos de que nuestra app tiene acceso a los modulos instalados por bower publicando dicha ruta, para ello añadimos lo siguiente en nuestro app.ts 

Por último, para que al desplegar nuestra app junto con las dependencias de node se instalen también las de bower, añadimos lo siguiente en la sección de “scripts” del fichero package.json:  "postinstall": "./node_modules/bower/bin/bower install" , de esta forma cuando despleguemos nuestro código en un servidor, al hacer npm install también nos instalará estas dependenciasEl resto de módulos necesarios podéis mirarlos en el fichero bower.json del repositorio.

Ya tiene un poco de mejor aspecto, aún asi aun esta fea fea. ¿Qué le falta?. Pues muy sencillo, mis templates tiene lo que necesitan de bower, pero aún así necesita ficheros de nuestro modulo admin-lte. Para que tengan acceso vamos a tener que añadir una linea mas al fichero app.js, junto a la anterior.

Ahora que tiene mejor aspecto y algunos formularios vamos a arreglar las routes, para que podamos verlos. En el fichero users.ts dentro de routes.

A continuación como estrategia de login vamos a utilizar passport. En esta primera parte nos conformaremos con que no de error :-). Vamos a utilizar mongodb para almacenar los datos de login, para instalar mongodb en tu máquina sigue las siguientes instrucciones Install MongoDB. Las distintas estrategias de login las llevaremos a cabo utilizando el paquete passport. Vamos a añadirlos a la lista de dependencias. En primer lugar necesitamos un middleware para las sesiones. Es necesario para utilizar passport.

A continuación inicializamos dentro de nuestra app de express la gestión de sesiones.

Vamos a conectar nuestro proyecto con una base de datos mongodb. Para la configuración de los distintos entornos de base de datos (test, dev, producción) voy a utilizar un fichero de configuración. Creamos un fichero config.ts con el siguiente contenido:

Y en nuestro fichero de app.js inicializamos la base de datos en función del entorno, necesitamos instalar el modulo de mongoose npm install --save mongoose :

Una vez conectado mongoose, vamos a integrar un login local utilizando passport, para ello instalamos el modulo passport-local  npm install --save passport-local. Lo primero que vamos a hacer es crear un modelo para almacenar los datos de las distintas estrategias de login, utilizaremos bcrypt para cifrar las constraseñas  npm install --save bcrypt-nodejs.

Ahora vamos a crear una clase que se encargue de gestionar todas nuestras estrategias de login. Crearemos un fichero passport.ts en la carpeta config con el siguiente contenido.

Y lo incluiremos en el proceso de setup de nuestra app.ts de la siguiente manera.

Una vez hecho esto, tenemos que definir las rutas de nuestra aplicación. Utilizando express.Router(). Las rutas básicas GET son las siguientes: “/”, “/login”, “/signup”, “/logout” y por último “/profile”, esta última se ayuda de una función que nos permite saber si el usuario esta autenticado para darle paso.

Ahora si arrancas la aplicación, deberías ser capaz de darte de alta, logearte y ver tu perfile. En el próximo post seguiré añadiendo funcionalidad a nuestra aplicación web.

Referencias: