Usando HTML en Express en lugar de Jade


103

¿Cómo puedo deshacerme de Jade mientras uso Express con Node.JS? Solo quiero usar html simple. En otros artículos, he visto que la gente recomendaba app.register (), que ahora está obsoleto en la última versión.

Respuestas:


78

Puedes hacerlo de esta manera:

  1. Instalar ejs:

    npm install ejs
  2. Configure su motor de plantillas en app.js como ejs

    // app.js
    app.engine('html', require('ejs').renderFile);
    app.set('view engine', 'html');
  3. Ahora en su archivo de ruta puede asignar variables de plantilla

    // ./routes/index.js
    exports.index = function(req, res){
    res.render('index', { title: 'ejs' });};
  4. Luego puede crear su vista html en el directorio / views.


2
Acabo de comenzar a usar node.js. La solución no me queda clara. Tengo un pequeño sitio web html. Necesito node.js para enviar correos electrónicos a través de mi sitio usando nodemailer. He instalado todo lo necesario. Sin embargo, tengo que tener una idea de lo que debería ir en el archivo app.js para que mi sitio web se ejecute usando express
user2457956

4
¿Cómo imprimir la variable titleen un archivo html?
Maestro Yoda

3
Si alguien todavía se pregunta cómo imprimir la variable, como preguntó @MasterYoda, puede imprimirlo así en el html: <% = title%>
Lucas Meine

62

Jade también acepta entrada HTML.
Simplemente agregue un punto al final de la línea para comenzar a enviar html puro.
Si eso funciona para usted, intente:

doctype html              
html. // THAT DOT
    <body>     
        <div>Hello, yes this is dog</div>
    </body>

PD: no es necesario cerrar HTML, eso lo hace automáticamente Jade.


7
Doctype 5 ahora está en desuso. Utilice "doctype html" como primera línea.
snorkelzebra


18

A partir de Express 3, simplemente puede usar response.sendFile

app.get('/', function (req, res) {
  res.sendfile(__dirname + '/index.html');
});)

De la referencia oficial de la api express :

res.sendfile(path, [options], [fn]])

Transfiera el archivo en la ruta indicada.

Configura automáticamente el campo de encabezado de respuesta Content-Type según la extensión del nombre de archivo. La devolución de llamada fn(err)se invoca cuando se completa la transferencia o cuando se produce un error.

Advertencia

res.sendFileproporciona caché del lado del cliente a través de encabezados de caché http pero no almacena en caché el contenido del archivo en el lado del servidor. El código anterior llegará al disco en cada solicitud .


2
Creo que el OP todavía quiere usar algún tipo de plantilla, solo con la sintaxis HTML normal. sendfileno le permite hacer ninguna plantilla, ya que solo envía bytes desde un archivo. Además, recomendaría no usarlo de sendfileesta manera porque significa que golpeará el disco cada vez que ingrese una solicitud, un gran cuello de botella. Para páginas de alto tráfico, realmente debería hacer un almacenamiento en caché en memoria.
josh3736

1
@ josh3736 si tiene razón sobre la intención del OP, la pregunta debería mejorarse. Tiene razón al presionar el disco en cada solicitud, mejoraré mi respuesta para advertir sobre este hecho. Considere mejorar el suyo para advertir sobre lo siguiente: si implementa un motor personalizado, también debe implementar la función de captura (si lo desea), no se maneja por expreso.
laconbass

17

En mi opinión, usar algo tan grande como ejs solo para leer archivos html es un poco torpe. Acabo de escribir mi propio motor de plantillas para archivos html que es notablemente simple. El archivo tiene este aspecto:

var fs = require('fs');
module.exports = function(path, options, fn){
    var cacheLocation = path + ':html';
    if(typeof module.exports.cache[cacheLocation] === "string"){
        return fn(null, module.exports.cache[cacheLocation]);
    }
    fs.readFile(path, 'utf8', function(err, data){
        if(err) { return fn(err); }
        return fn(null, module.exports.cache[cacheLocation] = data);
    });
}
module.exports.cache = {};

Llamé al mío htmlEngine, y la forma en que lo usa es simplemente diciendo:

app.engine('html', require('./htmlEngine'));
app.set('view engine', 'html');

11

app.register()no se ha depreciado, simplemente se le ha cambiado el nombre a app.engine()desde que Express 3 cambia la forma en que se manejan los motores de plantilla .

La compatibilidad del motor de plantilla Express 2.x requería la siguiente exportación de módulo:

exports.compile = function(templateString, options) {
    return a Function;
};

Los motores de plantilla Express 3.x deben exportar lo siguiente:

exports.__express = function(filename, options, callback) {
  callback(err, string);
};

Si un motor de plantillas no expone este método, no tiene suerte, el app.engine()método le permite asignar cualquier función a una extensión. Suponga que tiene una biblioteca de rebajas y desea renderizar archivos .md, pero esta biblioteca no es compatible con Express, su app.engine()llamada puede verse así:

var markdown = require('some-markdown-library');
var fs = require('fs');

app.engine('md', function(path, options, fn){
  fs.readFile(path, 'utf8', function(err, str){
    if (err) return fn(err);
    str = markdown.parse(str).toString();
    fn(null, str);
  });
});

Si está buscando un motor de plantillas que le permita usar HTML "simple", le recomiendo doT porque es extremadamente rápido .

Por supuesto, tenga en cuenta que el modelo de vista Express 3 deja la vista en caché para usted (o su motor de plantillas). En un entorno de producción, probablemente desee almacenar en caché sus vistas en la memoria para no realizar E / S de disco en cada solicitud.


Por favor, eche un vistazo a mi respuesta, la suya explica perfectamente cómo registrar motores de plantillas, pero hay una manera mucho más fácil de transferir archivos HTML simples.
laconbass

@ josh3736: Su hipervínculo "extremadamente rápido" funciona en Firefox 41, pero no puede ejecutar pruebas en Chromium Versión 45.0.2454.101 Ubuntu 14.04 (64 bits). Me pregunto porque.
Lonnie Best


4

Para hacer que el motor de renderizado acepte html en lugar de jade, puede seguir los siguientes pasos;

  1. Instale consolidate y swig en su directorio.

     npm install consolidate
     npm install swig
  2. agregue las siguientes líneas a su archivo app.js

    var cons = require('consolidate');
    
    // view engine setup
    app.engine('html', cons.swig)
    app.set('views', path.join(__dirname, 'views'));
    app.set('view engine', html');
  3. agregue sus plantillas de vista como .html dentro de la carpeta "vistas". Reinicie su servidor de nodo e inicie la aplicación en el navegador.

Aunque esto renderizará html sin ningún problema, le recomendaría que use JADE aprendiéndolo. Jade es un motor de plantillas increíble y aprender esto te ayudará a lograr un mejor diseño y escalabilidad.


1
El único gran problema con Jade es la muesca. Si se equivoca, el código no se compilará. Además, me pregunto por qué Jade además del hecho de que lo único que hace es encoger el código ...
zapper

4

Primero verifique la versión de compatibilidad del motor de plantilla usando la línea de abajo

express -h

entonces no tiene que usar ninguna vista de la lista, seleccione ninguna vista

express --no-view myapp

ahora puede usar todos sus html, css, js e imágenes en la carpeta pública.



1

Teniendo en cuenta que ya tienes tus rutas definidas o sabes cómo hacerlo.

app.get('*', function(req, res){
    res.sendfile('path/to/your/html/file.html');
});

NOTA: esta ruta debe colocarse después de todas las demás ya que * acepta todo.


1

dado que Jade admite HTML, si solo desea tener .html ext, puede hacer esto

// app.js
app.engine('html', require('jade').renderFile);
app.set('view engine', 'html');

luego simplemente cambia el archivo en las vistas de jade a html.


¿No tienes que poner un 'punto' o un punto antes del marcado html?
Gus Crawford


-10

Si desea usar html simple en nodeJS, sin usar jade .. o lo que sea:

var html = '<div>'
    + 'hello'
  + '</div>';

Personalmente estoy bien con eso.

La ventaja es la sencillez a la hora de controlar. Puedes usar algunos trucos, como '<p>' + (name || '') + '</p>'ternario, etc.

Si desea un código sangrado en el navegador, puede hacer lo siguiente:

+ 'ok \
  my friend \
  sldkfjlsdkjf';

y use \ t o \ n a voluntad. Pero prefiero sin, además es más rápido.


Me gustaría poder usar archivos HTML en Express (frente a Node.JS simple)
Sanchit Gupta

ooooohh lo siento (soy francés: p), así que puedes usar el fsmódulo. fs.readFile(htmlfile, 'utf8', function (err, file) {
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.