Archivo de la etiqueta: html estatico

Servir archivos estáticos en Node.js

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.