Servidores web en Node.js: De texto a html

¿Cómo desplegar contenido HTML en Nodejs?

Introduciremos ahora una forma diferente de desplegar contenido, vamos a cargar un documento hola_mundo.html no solo con texto, sino con html.

<!-- hola_mundo.html -->
<!DOCTYPE html>
<html>
    <head>
        <title>Hola mundo!</title>
    </head>
    <body>
        <p>Hola mundo!</p>
    </body>
</html>

Como vamos a cargar el contenido antes de enviarlo a la instrucción end(), utilizamos la función readFileSync() que carga un archivo de manera síncrona (no continua hasta que se termine de leer el archivo).

¿Cuál es la diferencia entre texto plano vs HTML?

Vamos a utilizar nuevamente la librería fs para poder cargar el contenido del archivo.

var fs = require("fs");

// ...

var html = fs.readFileSync(__dirname + "/hola_mundo.html");

//..

respuesta.end(html);

De manera que nuestro código va a renderear la variable html, al final se verá así.

// llamamos a la librería http
var http = require("http");

// llamamos a la librería fs
var fs = require("fs");

// creamos nuestro server
var miServidor = http.createServer((peticion, respuesta) => {
    respuesta.writeHead(200, { "Content-Type": "text/plain" });
    var html = fs.readFileSync(__dirname + "/hola_mundo.html");
    respuesta.end(html);
});

// inicializar el servidor
miServidor.listen(1111, "127.0.0.1");

Cierra y abre nuevamente el proceso node para que los cambios se refresquen, ve a el navegador y refresca sobre la pagina http://127.0.0.1:1111.

Como podemos ver aunque nuestra pagina esta construida con código html, el navegador no lo procesa como tal, sino como texto plano. Esto tiene una relación con el tipo de cabecera que estamos especificando text/plain.

Vamos a realizar el cambio del tipo de cabecera.

respuesta.writeHead(200, { "Content-Type": "text/html" });

Cerramos y volvemos a abrir el proceso de node y refrescamos la pagina web, ahora si veremos el contenido procesado como html.