Hola de nuevo.
Hoy vamos a mostrar como cargar archivos estáticos en node.js. En post anteriores vimos como crear un hola mundo y como rutear peticiones. Sin embargo nos interesa poder cargar páginas html estáticas y además poder cargar archivos js y css.
En los ejemplos anteriores si se escribía html incluyendo archivos js o css estos no se cargaban porque cada petición al servidor la recoge el modulo server.js y las trataba como una petición cualquiera. Ahora solucionaremos esto.
Vamos a crear un nuevo proyecto en blanco para probar esto.
Primero vamos a crear el archivo principal que simplemente incluye al archivo server.js y pone en marcha el servidor, lo llamaremos index.js:
var server = require("./server.js");
server.start();
Bien y ahora vamos a crear el archivo server.js, que será como el que hemos visto en los posts anteriores pero añadiendo algunas cosas:
var http = require('http');
var fs = require('fs'); // sistema de archivo
var path = require('path'); // path
function start() {
function onRequest(request, response){
var ruta = '.' + ((request.url=='/') ? '/index.html' : request.url);
var extension =path.extname(ruta); // obtiene la extension del archivo
var contentType = 'text/html';
switch (extension){
case '.js':
contentType = 'text/javascript';
break;
case '.css':
contentType = 'text/css';
}
path.exists(ruta,function(bExist){
if(bExist)
{
fs.readFile(ruta, function(bError,content){
if(bError) {
response.writeHead(500);
response.end();
}
else {
response.writeHead(200,{'content-Type' : contentType});
response.end(content);
}
});
}
else{
response.writeHead(404); response.end();
}
});
}
http.createServer(onRequest).listen(8888);
}
exports.start = start;
Analicemos el código:
Primero incluimos como siempre el modulo http.
Después incluimos el módulo fs(file system) para trabajar con el sistema de archivos y requerimos también el modulo path para poder trabajar con las rutas.
En la función onRequest recogemos la ruta de la url:
var ruta = '.' + ((request.url=='/') ? '/index.html' : request.url);
Si está vacía la variable ruta tomará por defecto index.html y si no lo que hallamos indicado en la url.
Después miramos la extensión del archivo que se ha pedido y establecemos el content-type en función de este:
var extension =path.extname(ruta); // obtiene la extension del archivo var contentType = 'text/html'; switch (extension){ case '.js': contentType = 'text/javascript'; break; case '.css': contentType = 'text/css'; }
Por último si existe la ruta escribimos las cabeceras indicando el content-type y volcamos el contenido del archivo con response.end(content) o lanzamos una cabecera 404 en caso de no existir o una 500 caso de error al leer el archivo.
path.exists(ruta,function(bExist){ if(bExist) { fs.readFile(ruta, function(bError,content){ if(bError) { response.writeHead(500); response.end(); } else { response.writeHead(200,{'content-Type' : contentType}); response.end(content); } }); } else{ response.writeHead(404); response.end(); } });
Bien pues con esto ya estamos preparados para servir archivos estáticos.
Para probarlo vamos a crear los siguientes archivos en nuestro proyecto de prueba:
Un archivo llamado index.html que se cargará por defecto cuando no indiquemos nada:
<html> <head> <title>Archivos estáticos en Node.js</title></head> <body> <h1>Soy el archivo index.html</h1> </body> </html>
Un archivo de prueba que llamaremos hola.html:
<html> <head> <title>Archivos estáticos en Node.js</title> <script type="text/javascript" src="script.js"></script> <link rel="stylesheet" href="style.css" media="all" /> </head> <body> <h1>Soy el archivo Hola.html</h1> </body> </html>
Un archivo js que unicamente contendrá un alert para comprobar que se ha cargado correctamente, lo llamaremos script.js:
alert('Hola');
Un archivo css que simplemente pondrá color Rojo de fondo al h1 y que llamaremos style.css:
h1 { background-color: red }
Si escribimos en la barra de direcciones de nuestro navegador localhost:8888 sin nada por detrás nos cargara index.html por defecto.
Sin embargo si escribimos localhost:8888/hola.html cargará el archivo hola.html y como este a su vez incluye el archivo style.css y el archivo js script.js mostrará el alert ‘Hola’ y el texto ‘Soy el archivo Hola.html’ con el fondo de color rojo.
Eso es todo por hoy.