Chat con Websockets - NodeJS, npm, eslint y babel (Parte 1 - Preparando el proyecto)

Hola, ahora crearemos un pequeño chat para aprender un poco más sobre el funcionamiento de Express, Socket.io y Aurelia.

Primero crearemos el backend, con los siguientes comandos (dentro de la carpeta del proyecto que llamaremos chat-backend):

Primero creamos la estructura básica con npm init,

$ npm init

Ahora instalamos las dependencias que necesitaremos para iniciar (recordar que con --save las dependencias se guardan el en archivo package.json para ser instaladas posteriormente):

$ npm install express --save
$ npm install socket.io --save

Primero, habilitaremos algunas características nuevas propuestas de ecma6, para ello instalaremos tres dependencias más:

$ npm install --save-dev babel-cli
$ npm install --save-dev babel-preset-es2015
$ npm install --save-dev babel-preset-es2017
$ npm install --save-dev babel-watch

La primera es para habilitar el transpilador que básicamente modificará el código que escribamos con las características de ecma6 a javascript que nodejs pueda entender, babel-preset-es2017 es para obtener esas caracteristicas y que babel pueda entenderlas y por ultimo utilizaremos babel-watch para recargar la aplicación automaticamente en caso de modificar algún archivo javascript.

Ahora, necesitamos crear el archivo .babelrc con el siguiente contenido:

{
  "presets": [
    "es2015",
    "es2017"
  ]
}

Además, modificaremos el archivo package.json, y agregamos las siguientes lineas en caso de que no existan:

"scripts": {
  "start": "babel-watch -L index.js",
  "test": "echo \"Error: no test specified\" && exit 1"
},

Babel-watch es como nodemon, se utiliza para reiniciar automaticamente la aplicación cuando se realice alguna modificación en los archivos del proyecto (similar a nodemon).

Por último utilizaremos eslint para que nos reporte de malas prácticas que nos encontremos utilizando en el código, para ello es necesario ejecutar el siguiente comando (copiar el comando entero en la consola):

$ (
  export PKG=eslint-config-airbnb;
  npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs npm install --save-dev "$PKG@latest"
)

Ahora, agregaremos el archivo de configuración el la raiz del proyecto con el nombre .eslintrc donde extenderemos las reglas de airbnb que son bastante buenas:

{
  "extends": "airbnb",
  "env": {
    "es6": true,
    "node": true
  },
  "globals": {
  }
}

Tambien, ignoraremos la carpeta node_modules que es el lugar donde estan nuestras librerias, para ello crear el archivo .eslintignore con el siguiente contenido:

node_modules/

Agregaremos también la regla para ejecutar el linter de manera sencilla, esto en el archivo package.json:

"scripts": {
  "start": "babel-watch -L index.js",
  "eslint": "eslint .",
  "test": "echo \"Error: no test specified\" && exit 1"
},

Por último creamos el archivo index.js con arrow functions y constantes (uhhhh :D):

const mostrar = () => {
    console.log("funciona");
};

mostrar();

Ahora, primero ejecutaremos el linter con npm:

$ npm run eslint

Nos dara una advertencia sobre el console.log, que no es permitido, se debe utilizar un logger u otra opción, es buena práctica ejecutar el linter siempre que se pueda, al principio es bastante engorroso pero luego ya casi no se necesita porque uno se acostumbra a utilizar las buenas prácticas sugeridas.

Además, podemos probar la aplicación, para iniciarla usaremos start, justo como se configuró en el archivo package.json:

$ npm start

Ahora, al realizar cualquier cambio en el archivo  se puede ver como se reinicia automaticamente la aplicación.

Reinicio automático de la aplicación

Para obtener el proyecto desde git se debe obtener:

$ git clone https://github.com/feardarkness/chat-backend.git
$ git checkout tags/inicio

Puedes continuar con la segunda parte del tutorial, Express y Debug, creando la estructura del proyecto.

Eso es todo por ahora, keep coding >_<