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.

html node.js express pug Sanchit Gupta
fuente

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.

Biwek
fuente
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.

Martin Sookael
fuente
7
Doctype 5 ahora está en desuso. Utilice "doctype html" como primera línea.
snorkelzebra
Docs for the dot: pugjs.org/language/plain-text.html#block-in-a-tag
Alexander Taubenkorb
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 .

laconbajo
fuente
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');
kevin.groat
fuente
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.

josh3736
fuente
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.

AnandShanbhag
fuente
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.

Soubhagya Kumar Barik
fuente
3

Bueno, parece que quieres servir archivos estáticos. Y hay una página para eso http://expressjs.com/en/starter/static-files.html

Es extraño que nadie se vincule a la documentación.

S Meaden
fuente
"Es extraño que nadie esté enlazando a la documentación" Estoy de acuerdo en que es un asunto trivial usar un lenguaje de vista diferente en Express.
pixel 67
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.

João Rodrigues
fuente
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.

Weijing Jay Lin
fuente
¿No tienes que poner un 'punto' o un punto antes del marcado html?
Gus Crawford
1

También puede incluir directamente su archivo html en su archivo jade

include ../../public/index.html

Respuesta original: Generador Express sin Jade

Priyanshu Chauhan
fuente
-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.


fuente
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) {