Cargando

Ir a contenido


 


Empezando a trabajar con Express.js

En este tutorial empezaremos a utilizar Express.js, desde su instalación, algunos elementos que debemos conocer para su utilización y un pequeño ejemplo que nos permitirá ver el uso del framework.


Escrito por el feb 11 2015 02:36 javascript


JavaScript está tomando la batuta del desarrollo web, su riqueza para realizar rutinas de procesamiento en tiempo real y la versatilidad que lo acompaña lo han hecho uno de los lenguajes con más crecimiento en los últimos 5 años.

 

Desde la liberación de Node.js mucho se ha hablado de crear aplicaciones que utilicen un solo lenguaje, y en la actualidad es posible, utilizando frameworks para Front-End como AngularJS o Backbone.js, utilizando además Bases de Datos como MongoDB o CouchDB y finalmente en el lado de servidor trabajando con el potente Node.js.

 

Pero para trabajar con grandes aplicaciones desde cero con Node.js debemos realizar muchas cosas repetitivas y complejas, es ahí donde entra Express.js, que no es más que un framework MVC que nos ayuda a simplificar la elaboración de nuestra lógica Back-End, y apoyándose en Node.js nos deja como resultado grandes aplicaciones hechas enteramente en JavaScript.

 

 

Requisitos
Nuestros requisitos son bastante básicos, únicamente necesitamos tener Node.js instalado y funcionando en nuestro sistema, si tenemos la última versión debemos asegurarnos que tenemos también npm disponible que es la herramienta que nos permitirá instalar los diferentes paquetes que necesitamos como el caso del framework, Express.js.

 


1. Express.js


Este framework ha sido diseñado para tener algunas características que fueron inspiradas por otros frameworks como Rails o Sinatra, esto hace que cuando un desarrollador experimentado pone sus manos sobre él pueda sentirse cómodo manejando conceptos que ya conoce, pero con el poder de Node.js y solo utilizando JavaScript la velocidad de desarrollo se multiplica.

 

Antes de adentrarnos más en el tema veamos primero las características más importantes de Express.js:

 

Mínimo
La idea detrás del framework es no meterse en otros asuntos que no sean intermediar entre nuestra aplicación y el servidor, para ello no nos complica la vida con miles de componentes, sino que solo nos provee las cosas más necesarias.

 

Flexible
Debido a su característica de ser mínimo, obtiene una gran flexibilidad ya que el desarrollador puede elegir la forma en que desea trabajar y se le permite implementar sus propias soluciones o incorporar soluciones ya hechas como por ejemplo ORM para diferentes tipos de Bases de Datos.

 

Hecho para aplicaciones
La finalidad de Express.js es facilitar la construcción de aplicaciones web, ya sean páginas, servicios REST, o incluso aplicaciones híbridas.

 


2. El Scaffolding


Este es un término que podemos haber visto de Rails y otros frameworks, se utiliza mucho en Express.js y no es más que el framework generándonos una estructura y código base, llamado también de boilerplate que nos ayuda a iniciar nuestra aplicación.

 

De esta forma podemos crear el armazón de un proyecto a partir de un comando y olvidarnos así de tener que recordar cada una de las carpetas y archivos básicos necesarios. Obviamente al ser esto algo tan general muchas veces terminamos reescribiendo muchas cosas o creando nuestras propias carpetas pero para tener un punto de partida es perfecto.

 


3. Instalar Express.js


La instalación del framework es bastante sencilla, esto gracias a las gestiones que hace npm, para instalar Express.js únicamente debemos dirigirnos a la consola de comandos donde podamos ejecutar npm y colocar el siguiente comando:
npm install express --save
Esto hará que en nuestro sistema se baje todo el código necesario para poder generar nuestros proyectos y también para utilizar las diferentes herramientas que pone Express.js a nuestra disposición, en consola veremos algo como lo siguiente si la instalación ha salido correctamente.

 


 

Podemos notar que se han instalado varios paquetes asociados y que la versión de Express.js al momento de la elaboración de este tutorial es la 4.11.2, aquí es importante señalar que desde la versión 4 en adelante hubo un gran cambio así que es importante si buscamos información asegurarnos que es para la versión 4 en adelante.

 

Nuestra primera aplicación
Para nuestra primera aplicación vamos a crear una página web con dos secciones, como estamos apenas conociendo la herramienta cada sección tendrá un pequeño texto, lo importante es que tendremos que crear un pequeño servidor y manejar las peticiones de nuestros usuarios.

 

 


4. El servidor


Lo primero que debemos hacer es crear una carpeta donde irá nuestra aplicación y dentro crear un archivo llamado index.js, este nombre generalmente se coloca como convención sin embargo puede ser cualquier otro nombre, de hecho vamos a cambiar las cosas y colocar de nombre de nuestro archivo holaexpress.js.

 

Una vez que tenemos nuestro archivo vamos a empezar por incluir express utilizando la instrucción require, con ello ya tendremos a nuestra disposición todas las herramientas del framework, luego utilizaremos los métodos set() y use(), donde con el primero estableceremos el puerto por el cual nuestro servidor debe esperar las conexiones, y con el segundo estableceremos que debe ocurrir cuando obtenemos un error 404 o un error 500.

 

Finalmente con el método listen() haremos que nuestra aplicación se levante cuando ejecutemos nuestro archivo. Veamos el código a continuación:

var express = require('express');var app = express();app.set('port', process.env.PORT || 3001);app.use(function(req, res){ res.type('text/plain'); res.status(404); res.send('404 - No Encontrado');});app.use(function(err, req, res, next){ console.error(err.stack); res.type('text/plain'); res.status(500); res.send('500 - Algo anda mal!');});app.listen(app.get('port'), function(){ console.log( 'Express se ha iniciado en http://localhost:' + app.get('port') + '; presione Ctrl-C para cerrar el servidor.' );});
Ahora solo debemos escribir en la consola el siguiente comando:
node holaexpress.js
Con ello nuestro servidor va a levantar. El problema es que no veremos nada, esto se debe a que no hemos establecido las rutas de la aplicación, pero si vemos la siguiente pantalla constatamos que funciona porque ha salido nuestro mensaje que colocamos para el 404.

 


 

 


5. Incluyendo las rutas


Para poder obtener un resultado más allá de la página del 404 que generamos, debemos incluir rutas, que no es más que decirle a nuestra aplicación que cuando un usuario pida una ruta con un método HTTP en específico se le retorne un resultado que definamos, así una ruta get no es igual que una ruta post y por ello ambas a pesar de estar bajo la misma dirección pueden darnos diferentes resultados.

 

Vamos entonces a crear un par de rutas get, este código debemos colocarlo justo antes del código que nos genera el 404, por lo que vamos a modificar nuestro archivo holaexpress.js y ahora debe quedar de la siguiente forma:

var express = require('express');var app = express();app.set('port', process.env.PORT || 3001);app.get('/', function(req, res){ res.type('text/plain'); res.send('Hola! bienvenido a mi primera app');});app.get('/otraruta', function(req, res){ res.type('text/plain'); res.send('Esta es otra ruta de nuestra app');});app.use(function(req, res){ res.type('text/plain'); res.status(404); res.send('404 - No Encontrado');});app.use(function(err, req, res, next){ console.error(err.stack); res.type('text/plain'); res.status(500); res.send('500 - Algo anda mal!');});app.listen(app.get('port'), function(){ console.log( 'Express se ha iniciado en http://localhost:' + app.get('port') + '; presione Ctrl-C para cerrar el servidor.' );});
Como podemos notar el método get recibe la ruta y luego una función anónima, dentro de esta enviamos el tipo de respuesta en este caso text/plain y luego enviamos el contenido, si ejecutamos nuestro ejemplo en el navegador finalmente obtendremos algo como lo siguiente:

 


 

Las rutas post funcionan de una manera similar, solo que luego debemos incorporar un manejo para los parámetros que se puedan incluir pero no debemos preocuparnos mucho por esto en este momento. Pudimos comprobar entonces como hemos afectado el resultado de lo que puede ver el usuario directamente.

 

Importante
Algo que es importante destacar es que cada vez que cambiemos algo en nuestro código debemos cerrar la aplicación y volverla a iniciar para que los cambios surjan efecto. Este inicio puede parecer muy simple y lo es, la idea es que podamos acostumbrarnos a trabajar de una forma en que entendamos el servidor y como funciona, ya que de esta forma podremos crear las aplicaciones que deseamos con el código que realmente deseamos y esa es la magia de Express.js.

 

A partir de aquí podemos empezar a experimentar con los tipos de respuestas y el contenido que queremos servir, pero el verdadero poder viene cuando empezamos a implementar un motor de plantillas sin embargo eso ya es un tema un poco más avanzado de este tutorial.

 

Con esto hemos finalizado este tutorial hemos construido una pequeña aplicación para dar nuestros primeros pasos con Express.js, si hemos conocido Node.js vemos inmediatamente que las cosas son un poco más directas y sencillas. Pero el verdadero poder lo veremos cuando empecemos a implementar otras herramientas como las plantillas o los modelos.

¿Te ha gustado y ayudado este Tutorial?
Puedes premiar al autor pulsando este botón para darle un punto positivo
  • -
  • 0
10
VOTA
5
100%
4
0%
3
0%
2
0%
1
0%

  Información

  •   Publicado feb 11 2015 02:36
  •   Actualizado dic 01 2016 00:03
  •   Visitas 710
  •   Nivel
    Profesional



Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!
Demuestra que eres experto!
  ESCRIBIR TUTORIAL
Suscribirse