🥇 De texto plano a html.

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 sincrona (no continua hasta que se termine de leer el archivo).

🍿 Texto plano vs HTML.

  1. Vamos a utilizar nuevamente la libreria fs para poder cargar el contenido del archivo.

    var fs = require('fs');
    
    // ...
    
    var html = fs.readFileSync(__dirname + '/hola_mundo.html');
    
    //..
    
    respuesta.end(html);
    
  2. De manera que nuestro código va a renderear la variable html, al final se verá así.

    // llamamos a la libreria http
    var http = require('http');
    
    // llamamos a la libreria 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');
    
  3. Cierra y abre nuevamente el proceso node para que los cambios se refresquen, ve a el navegador y da refresh 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.

  4. Vamos a realizar el cambio del tipo de cabecera.

    respuesta.writeHead(200,{'Content-Type' : 'text/html'});
    
  5. Cerramos y volvemos a abrir el proceso de node y refrescamos la pagina web, ahora si veremos el contenido procesado como html.

Mi primera aplicación web. Uso de templates.
comments powered by Disqus