Node.js – Sirviendo páginas estáticas

Hemos visto cómo podemos crear un mini servidor web, y como podemos ir programando las partes de nuestra aplicación en ficheros independientes, que llamaremos módulos.

Esto nos permite que nuestra aplicación crezca todo lo que necesitemos, pero nuestro servidor no es capaz de servir ficheros…y eso es lo que vamos a solucionar en este articulo

Con todo lo que hemos hecho en estos artículos, nuestro servidor recibe una llamada, y siempre contesta un texto que hemos escrito en nuestro módulo “server”

node.js - respuesta

Además, para generar la respuesta no tiene en cuenta nada; no importa lo que escribáis en la dirección URL,

2016-01-05_13h18_01

El resultado siempre será el mismo.

Lo primero que tenemos que hacer es analizar lo que nos han escrito, para poder tomar decisiones, para ello, vamos a incorporar a nuestro servidor una línea:

nodejs - incorporando url

Tras esta modificación, veréis que en la consola aparece lo que escribamos en la URL; en el caso anterior,

nodejs-consola

Si hacéis alguna prueba más, comprobaréis también que cuando no indicamos nada en la ruta, nos aparece la ‘/’

nodejs-llamada raiz

Nuestro primer paso, podría ser el que nuestro servidor sepa contestar con un fichero llamado “index.html” en dicha situación; para ello podríamos hacer:

node - empezando a explicar el ruteo

En la linea 11 creo e inicializo una variable en donde dejaré el archivo a devolver; en la 12, compruebo la url y si es la raíz, en la 13 dejo el nombre del fichero que quiero devolver, y si no, dejo en esa variable, lo que me ha llegado de la entrada, que de momento, serán solamente nombres de ficheros.

Para nuestro siguiente paso, necesitaremos incorporar dos módulos más del core de Node.js:

Node.js - incorporando path y fs

El módulo “path” nos permite manipular rutas, extrayendo partes, juntándolas o normalizandolas, mientras que el módulo “fs nos permite manipular ficheros (leer, grabar,…)

Una vez en nuestras variables, modificamos nuestro código:

Node.js - Modificacion de server para ruteo

En la línea 18, extraigo de la variable “archivo” la parte de la extensión, para poder determinar el tipo de contenido

En la línea 19 y 20 preparo los valores por defecto que quiero para las carpetas en donde guardare mis ficheros y el tipo de contenido, en este caso, “html”

En las líneas 21 a 32, según la extensión, añado la subcarpeta, si es necesario, y modifico el tipo de contenido que voy a enviar.

Con todas las variables ajustadas, utilizamos otro de los métodos de “path” (línea 33) que nos permite unir trozos de ruta y las normaliza (corrige detalles sintácticos)

Ahora que ya en la variable “dirección” (línea 34) tenemos una ruta completa, podemos llamar a la función “responder” que definimos a continuación

Node.js. Funcion responder

En la linea 47 utilizamos un método de objeto “fs” para comprobar si el fichero cuya ruta hemos calculado antes, existe, y le pasamos una rutina que llamará por “callback” en cuanto lo sepa.

Si el fichero existe, nos enviará a salida un mensaje de “Fichero encontrado”, y si no, nos enviará un error 404.

Para terminar la preparación, podéis crear el conjunto de carpetas según la definición que hemos hecho:

node.js - carpetas para ficheros

y en el fichero “index.html” podemos poner cualquier cosa como:

 2016-01-07_09h35_59Aunque de momento, no lo veréis, pero si paráis el servidor y lo volveis a arrancar, cuando pidáis una pagina,veréis aparecer el mensaje de la linea 50 si existe el fichero que pedís, (‘/’ o index.html’) o un mensaje de error 404 en el resto de casos.

Sirviendo ficheros

Si ya entendéis la como funciona todo el sistema de decisiones, podemos probar ahora de empezar a servir ficheros. El primero de todos, ‘index.html’

Primero,veamos como queda la función responder:

Node.js - devolviendo ficheros estaticos

Hacemos que reciba un parámetro más, que hemos calculado anteriormente (linea 45), y en la linea 49, utilizamos un método del objeto “fs” que lee un fichero en disco, y llama a la rutina que indiquemos, cuando ha terminado la lectura. (un nuevo ejemplo de callback).

Al finalizar la lectura, llama a la función que le hemos pasado, con dos parámetros; une (error) es un indicador de si se ha producido un error o no; y en caso de error, enviaremos un error http 500, y el otro parámetro es el contenido del fichero leído.

Cuando no se produce error, enviamos, en la linea 54 un status http 200, y el contentType recibido, y a continuación todo el fichero leído, a la vez que cerramos la respuesta. (línea 55)

Para que esta nueva versión funcione, debéis modificar la llamada a la función responder, para añadirle el nuevo parámetro.

2016-01-07_13h52_45

Con algo tan sencillo como esto, hemos conseguido montar un rapidísimo servidor web capaz de servir todo tipo de paginas estáticas, y ademas seleccionando las carpetas de donde va a sacar los ficheros. Esto último, es importante que lo recordéis, ya que en función de la extensión, antepondrá a cualquier ruta que le indiquéis, los caminos que le hemos diseñado, aunque, mientras mantengáis los log, siempre veréis a donde va a ir a buscar cada fichero

Para terminar de ver en acción un ejemplo un poco mas completo, podéis modificar el fichero “index.html”, y escribir un fichero estilo.css, y un script.js, cada uno en su carpeta.

Aquí tenéis lo que he puesto en mis ficheros; el index:

node.js html de prueba

Observad que como los directorios de los scripts y de las hojas de estilo las ponemos por programación, Eclipse nos indica un error al no encontrarlas donde él espera.

La hoja de estilos:

hode.js hoja de estilos de prueba

Y el script:

node.js script de pruebas

Y eso es todo. Tal y como hemos dejado el proyecto, deberíais recibir algo como esto:

2016-01-07_18h32_02

2016-01-07_18h32_39

Podéis revisar como funciona el servidor, y hacer modificaciones. Recordad que cada vez que modifiquéis los módulos javascript que corren en el servidor, en nuestro ejemplo start.js, y server.js, debéis parar y volver a arrancar vuestra aplicación.

Acerca de Miguel Garcia

Programador, Desarrollador web, Formador en distintas areas de informatica y director de equipos multidisciplinares.
Esta entrada fue publicada en Formacion, Javascript, NodeJs y etiquetada . Guarda el enlace permanente.

Una respuesta a Node.js – Sirviendo páginas estáticas

  1. Pingback: Node.js – Entendiendo nuestro servidor (II)Recursos para formacion

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.