¿Cómo crear un servidor con expressjs?

Contexto

La llegada de nodejs fue de mucha utilidad para mucha gente que desarrolla javascript, ya que ahora podemos hacer tareas del lado del servidor usando javascript.
Entre muchas de las cosas nuevas que podemos hacer con nodejs es levantar un servidor, que en sí, es como el “hello world” para entenderlo.

/* Ejemplo de como crear un servidor en nodejs */
var http = require(“http”);
var server = http.createServer(function(request, response){
     response.writeHead(200, {‘Content-Type’ : ’text/plain'});
     response.write(‘<h1>Front End Labs</h1>');
     response.end();
});
server.listen(80);
console.log(’Server Start :D');
Hasta ahora podemos ver que nodejs tiene mucho por dar y que con pocas líneas podemos tener un servidor.

Expressjs

Se propone a ser el framework “minimalista” para la creación de aplicaciones web basadas en node, con la posibilidad de crear un servidor y hasta un servicio REST, veamos a continuación como crear un servidor con expressjs.
/* Ejemplo de como crear un servidor con expressjs */
var express = require('express');
var app = express();
app.get('/',function(request, response){
  response.send('hello express');
});
app.listen(3000, function(){
  console.log('Server Express Ready!');
});
A mi opinión la creación del servidor con express tiende a ser un poco más entendible y que si lo hacemos con lo que nodejs nos ofrece, podríamos decir que “express es un tipo de jQuery para node”

Explicando la creación del Servidor

Creando el package.json

Primero tenemos que crear un package.json para descargar las librerías desde npm, para eso nos ubicamos en la carpeta de nuestro proyecto y escribimos en nuestro terminal
$ sudo npm init
Les pedirá su clave y luego les mostrará detalles a modificar en su package.json propios de su proyecto, pero si desean por temas de demo, le pueden dar enter a todo y tendría que tener algo así
express-packagejson
Le dan yes y les tendría que crear el package.json en la carpeta de su proyecto, que en mi caso se llama serverExpress

Obteniendo express

Luego escriben en el terminal:
$ sudo npm install express
Y les tendría que quedar algo así:
express-install
Tip:  En mac y linux se utiliza “sudo”, en windows no.

Creando el servidor

Para el ejemplo podemos crear un archivo que se llama serverExpress.js donde irá el código js para crear el servidor, para lo cual tendríamos algo así
express-files
En nuestro archivo serverExpress.js, lo primero que tenemos que hacer es llamar al paquete de express para obtener todas sus funcionalidades
var express = require('express');
En la variable express se obtiene una función con todas las funciones, que las guardaremos en la variable app, para su fácil y entendible codificación
var app = express();
Una vez que ya tenemos todas las funciones de express en la variable app, empezamos la creación del servidor.
Como lo que queremos es obtener contenido, para eso tenemos que usar el método get que nos proporciona express
app.get();
Nosotros queremos que el servidor reaccione si entramos desde la raíz del dominio, por ejemplo http://frontend.com/
app.get(‘/‘);
Ademas queremos que envie un mensaje de respuesta
app.get('/',function(request, response){
  response.send('hello express');
});
El método “get” usa un callback donde recibe los objetos para hacer las respuestas (response) y obtener solicitudes (request), como nosotros queremos que el servidor envié un mensaje usamos el objeto response y a su vez el método send para enviar un mensaje en texto plano.
Ahora necesitamos que el servidor se inicie en el puerto 3000 y cuando el servidor haya iniciado correctamente, este envía un mensaje de que todo esta ok
app.listen(3000, function(){
  console.log('Server Express Ready!');
});
Como podemos ver para este caso utilizamos el método listen y un callback para enviar un mensaje confirmación.

Iniciando el servidor

Ahora tenemos que iniciar el servidor, para eso nos ubicamos en nuestro terminal e inicializamos el servidor
$ node serverExpress.js
Y si todo está correcto, tendríamos que ver en nuestro terminal el mensaje que escribimos en nuestro console.log en el app.listen que es ‘Server Express Ready!’
Y listo! ya tienes un servidor listo con expressjs
express-ready
Si probamos, vemos que el servidor envía el mensaje que configuramos cuando entra a la raíz del dominio
express-test

Configurando la carpeta de los elementos estáticos

Ya tengo mi servidor y quiero mostrar html, js y css, así que lo agrego a mi proyecto
express-archivos
Para ver el index de mi proyecto, tendría que iniciar el servidor para eso tengo que escribir en mi consola, estando en la carpeta del proyecto
$ node serverExpress.js
Y veremos cómo se inicia nuestro servidor y luego ingresamos a http://localhost:3000 ya que así lo habíamos configurado, pero vemos que nuestros estilos y scripts no está siendo cargados ¿Porque?
express-error-web
Eso pasa, porque express trabaja con una ruta para almacenar los archivos estáticos (archivos que no se modifican, como js y css), para lo cual podemos configurar la ruta de nuestra carpeta de estáticos agregando en el archivo serverExpress.js
//Primer Forma
app.use(express.static('public'));

//Segunda Forma
app.use(express.static(__dirname + '/public'));
Como podemos ver, usamos la variable express y a su vez el método static que posee express para definir el nombre de la carpeta de estáticos, que llamaremos ‘public’ y para que esta configuración sea iniciada se tiene que usar app.use(), que es la manera cómo express usa middlewares.
Entonces la configuración que hacemos para el ruteo de estáticos es mediante un middleware; este concepto de middlewares se usará mucho cuando desarrollemos un API REST más adelante.
Una vez agregada esta línea, creamos nuestra carpeta public y agregamos nuestros estáticos, es decir, nuestros estilos y scripts.
express-static-good
Ahora, volvemos a nuestro terminal y colocamos crtl+C para cancelar al servidor y volver a iniciarlo como lo hicimos anteriormente y refrescamos nuestro navegador
express-con-estulos
Y listo! Ahora vemos como nuestros estáticos ahora son llamados.
Tenemos que recordar que para llamar a nuestros estáticos no hace falta colocar la carpeta public, ya que todo esto ya lo hace express, es decir:
La forma incorrecta de llamar estáticos
<link href=“public/style.css” rel=“stylesheet” />
La forma correcta de llamar estáticos
<link href=“style.css” rel=“stylesheet” />

Conclusión

Express es muy fácil de aprender y nos muestra que tiene una simpleza y robustez para el desarrollo de aplicaciones.
En el siguiente post veremos cómo crear un API REST con expressjs
  • Cristhian Molina

    Muy buena explicacion, esperando el siguiente saludos.

  • Raul Anaya L.

    El mundo de nodejs es interesante, gracias por hacer facil entender los concepstos de Expressjs.