Introducción al Stack MEAN (3): Crea tu servidor Node

Crea tu servidor Node

Sigamos adelante y vamos a ver el modo de configurar un servidor node HTTP para que podamos mandar archivos HTML entre otros, a nuestros usuarios. En la entrada anterior, solo vimos algunas cosillas por consola. En esta entrada vamos a aplicar lo aprendido un paso más allá para que podamos «servir» una página web a nuestros usuarios. Estaremos un paso más cerca de hacer aplicaciones web hechas y derechas, pero antes crea tu servidor node con uno de estos métodos:

Método 1. Puro Node (sin Express): Es un modo sencillo de crear nuestro servidor y solo usaremos este método para conocer como hacerlo con Node barebones. Después de esto usaremos exclusivamente el método Express (método 2).

Método 2: Usando Express. Express es una de las cuatro partes principales del stack MEAN, queremos usar este método. Y una vez aprendas este método seguramente no querrás echar la vista hacia atrás.

Aplicación de ejemplo

En este ejemplo enviaremos un archivo HTML a nuestro navegador usando el Método1 y el Método 2. Para empezar necesitamos una nueva carpeta con los siguientes archivos:

• package.json
• server.js
• index.html

Como aprendimos anteriormente, package.json mantendrá la configuración/packages para nuestro proyecto mientras server.js tendrá nuestra app a punto y configurada. Nuestro archivo index.html será un archivo HTML básico. package.json e index.html serán los mismos para ambos métodos. El único archivo que cambiará entre los dos métodos es el server.js, porque aquí es donde iniciamos nuestro servidor Node.

package.json

Nuestro package.json sencillo:

index.html

Creamos otro archivo HTML que hará de index:

Método 1: Node puro (sin Express)

Cuando usamos el Método 1, nos bajaremos dos módulos que están integrados en el propio Node. El módulo HTTP que se usa para iniciar los servidores (servers) HTTP y responder a peticiones (requests) HTTP de los usuarios. El módulo fs (file system) se usa para leer el sistema de archivo. Necesitaremos leer nuestro index.html del sistema de archivos y después pasárselo a nuestro usuario usando un servidor HTTP.

El server.js del Método 1 tiene el siguiente código:

Estamos usando el módulo http para crear un servidor y el módulo fs para coger un archivo index y enviárselo como respuesta al usuario.

Con nuestro server.js definido, vamos a la consola e iniciamos nuestro servidor node http.

nodemon server.js

Deberías ver tu servidor iniciándose y el mensaje que escribimos en la consola:

Node HTTP Server Consola

Ahora podemos ver nuestro sitio en el navegador si ponemos en la barra–> http://localhost:1337

¡Hola Node!

Por fin hemos enviado un archivo HTML a nuestros usuarios. Pensarás que la creación de este servidor http lleva por delante cierta sintaxis que te costará recordar. No te preocupes, el método Express es mucho más claro.

Método 2: Usando Express

Ahora que hemos arrancado un servidor usando el módulo HTTP, vamos hacer lo mismo con Express. Ya verás que es mucho más sencillo gestionar tu código.

Añadiremos primero Express a este proyecto. Vamos a usar la consola para instalarlo y guardarlo en nuestro package.json:

npm install express –save

Ahora cambiamos el archivo server.js para acomodar a Express. Empezaremos llamando a Express. Usando esa instancia de Express, definiremos una ruta y enviaremos el archivo index.html. Después «escucharemos» en cierto puerto para la petición del navegador.

Ya hemos cargado Express, establecido un puerto, y arrancado nuestro servidor. Express ha hecho el trabajo de arrancar un servidor mucho más sencillo y de sintaxis limpia. Al arrancar el servidor usando nodemon server.js escupirá nuestro archivo HTML a los usuarios en el http://localhost:1337 una vez más.

Veremos el mismo resultado que antes pero ahora tenemos un código más legible:

¡Hola Node!

Y eso es todo, pero la cosa sigue, es hora de hacer routing con Nodejs y Express 😀