0

Quiero agregar valores dinámicamente a un html antes de mandar el archivo como respuesta a una petición GET (el valor lo recibo en los parámetros). Cómo puedo agregarlo al html y al script que está en el archivo? Necesito hacerlo con Handlebars en NodeJs, el servidor lo hice con express.

//app.js
const express = require('express');
const app = express();
const path = require('path')

app.use(express.static('views'));

app.get('/:nombre', (req, res) => {
  console.log(req.params) //estos son los parámetros que quiero agregar
  res.sendFile(path.join(__dirname, 'views', 'index.html'));
});
const PUERTO = process.env.PORT || 3000;
app.listen(PUERTO, () => {
  console.log(`El servidor esta escuchando en el puerto ${PUERTO}...`);
});

//index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hola {{nombre}}</h1>
    <script>
        console.log('{{nombre}}')
    </script>
</body>
</html>

1 respuesta 1

1

Asegúrese de tener instalado Handlebars correctamente e intente con este ejemplo:

const express = require('express');
const app = express();
const handlebars = require('handlebars');
const fs = require('fs');

app.get('/:nombre', (req, res) => {
  fs.readFile('./views/index.html', 'utf8', (err, data) => {
    if (err) throw err;

    // Compilar la plantilla Handlebars con el valor de "nombre"
    const template = handlebars.compile(data);
    const result = template({ nombre: req.params.nombre });

    // Enviar el archivo HTML con el valor dinámico como respuesta
    res.send(result);
  });
});

En el archivo HTML, puedes utilizar las llaves dobles {{}} para insertar valores dinámicos en la plantilla. Por ejemplo:

<h1>Hola {{nombre}}</h1>

Para hacer que este código funcione con un archivo HTML separado, primero deberá asegurarse de que está utilizando el middleware express.static para servir archivos estáticos en su aplicación Express. Puede hacerlo de la siguiente manera:

app.use(express.static('public'));

Luego, deberá asegurarse de que el archivo HTML esté en la carpeta "public" o en una subcarpeta de la misma. Por ejemplo, si desea servir un archivo HTML llamado "index.html" desde la carpeta "views", podría hacer lo siguiente:

app.use(express.static('views'));

Finalmente, en lugar de leer el archivo HTML y enviarlo con el valor dinámico como respuesta, simplemente puede enviar la ruta del archivo HTML como respuesta:

res.sendFile(__dirname + '/views/index.html');

De esta manera, el archivo HTML se servirá como un archivo estático y el valor de "nombre" se manejará a través de la ruta de la solicitud.

5
  • Mucha gracias por tu respuesta @RichardVíquezPérez! Solo una pregunta sobre ella: En caso de que el script este en un archivo separado, ¿Cómo puedo hacer para que funcione? Lo intenté pero solo funciona cuando todo está en el mismo archivo. Igualmente con el archivo style.css
    – ZCH
    Commented el 9 ene. 2023 a las 5:13
  • @ZCH revise nuevamente la respuesta. Commented el 9 ene. 2023 a las 5:23
  • La nueva respuesta no me funciona. Creo que no entendí bien cómo debe quedar el archivo app.js Yo quiero usar la variable nombre dentro del archivo js que manda a llamar el Html y también quiero mandar a llamar los estilos en un archivo aparte. (los archivo html, js y css están dentro de una carpeta llamada views) Agradecería mucho su ayuda nuevamente @RichardVíquezPérez!
    – ZCH
    Commented el 11 ene. 2023 a las 17:32
  • La respuesta lo dice . Esta línea :app.use(express.static('views')); lo que hace es decirle a node que todo lo que usted ponga en la carpeta views va a ser público quiere decir que ahí puede poner el html y css que ocupe, incluso usted ya lo tiene configurado cuando hizo la pregunta con esa misma línea :app.use(express.static('views')); Commented el 11 ene. 2023 a las 21:39
  • Entonces cree una carpeta public y agrega esto en node app.use(express.static('public')); luego crea la carpeta views dentro de la carpeta public y agrega la línea que le mencione en el comentario anterior tal y como lo dice la respuesta Commented el 11 ene. 2023 a las 21:42

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.