¿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
fspara 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
nodepara 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
nodey refrescamos la pagina web, ahora si veremos el contenido procesado como html.
