Servir archivos estáticos en Node.js

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.

Un saludo, y si aún no lo has hecho no olvides suscribirte a mi blog para no perderte los próximos posts  :-),

También puedes seguirme en Twitter en ‎@revigames y no olvides que me ayudas mucho si compartes este post en las redes sociales.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

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