¿Cómo uso HTML como motor de vista en Express?

130

Intenté este simple cambio desde la semilla y creé los archivos .html correspondientes (por ejemplo, index.html).

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

y este archivo se mantuvo igual:

exports.index = function(req, res){
  res.render('index');
};

pero mientras corro me sale

500 Error: no se puede encontrar el módulo 'html'

¿Es mi única opción usar 'ejs'? Mi intención era usar HTML simple en conjunción con AngularJS.

html node.js express Julio
fuente
77
Consulte este tema para obtener una respuesta: stackoverflow.com/questions/4529586/… Espero que esto ayude,
roland
3
app.engine ('html', require ('ejs'). renderFile);
Dinesh Kanivu

Respuestas:

91

Las respuestas en el otro enlace funcionarán, pero para servir HTML, no hay necesidad de usar un motor de vista, a menos que desee configurar un enrutamiento funky. En cambio, solo use el middleware estático:

app.use(express.static(__dirname + '/public'));
Dan Kohn
fuente
3
Seguí adelante y comenté la referencia a app.set ('view engine', html). Luego recibí un mensaje de error que decía "No se especificó ningún motor predeterminado y no se proporcionó ninguna extensión", lo que se espera. Pero cuando cambié res.render ("index") por res.render ("index.html"), recibí el siguiente error: TypeError: la propiedad 'engine' del objeto # <View> no es una función.
Julio
44
No hay más motor de visualización, así que no creo res.render()que funcione más. En su lugar, coloque sus archivos HTML sin procesar publicy deje que el middleware estático se encargue de servir los archivos directamente. Si necesita rutas más elegantes que esta, probablemente podría configurar su propio motor de vista HTML.
Nick McCurdy
66
Entonces, ¿qué escribes en la llamada a app.get ()?
ajbraus
55
@ajbraus, ni siquiera necesita una llamada a app.get (). Esto solo servirá los archivos html que tenga en la carpeta / public directamente. Entonces, en el navegador, solo apunta al html directamente y eso es todo ... básicamente no hay enrutamiento
dm76
El problema que he tenido con esto es que si actualiza la página después de que se carga, le da un error que dice Error: no se especificó ningún motor predeterminado y no se proporcionó ninguna extensión. luego, si usa Auth, {proporcionar: LocationStrategy, useClass: HashLocationStrategy}], publica un hash en su URL, lo cual es un problema por otras razones. ¿Hay alguna forma de evitar esto?
wuno
33

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

  1. Instale consolidar y swig a 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 generará html sin ningún problema, te recomendaría que uses JADE aprendiéndolo. Jade es un motor de plantillas increíble y aprender esto lo ayudará a lograr un mejor diseño y escalabilidad.

AnandShanbhag
fuente
no tiene método 'motor' - después de todos los pasos
ImranNaqvi
¿Qué versión de express estás usando? Express 4.x contiene la API app.engine. Más información es @ expressjs.com/en/api.html#app.engine
AnandShanbhag
Funcionó genial! Me encanta cuando una respuesta de un año funciona por primera vez.
Matthew Snell
por qué todavía no puede procesar mi CSS y otros
exe
23

En tus apps.js solo agrega

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');

Ahora puede usar ejs view engine manteniendo sus archivos de vista como .html

fuente: http://www.makebetterthings.com/node-js/how-to-use-html-with-express-node-js/

Necesita instalar estos dos paquetes:

`npm install ejs --save`
`npm install path --save`

Y luego importe los paquetes necesarios:

`var path = require('path');`


De esta manera, puede guardar sus vistas como .html en lugar de .ejs .
Bastante útil al trabajar con IDE que admiten html pero no reconocen ejs.

Sudhanshu Gupta
fuente
1
app.set ('views', path.join (__ dirname, '/ path / to / your / folder')); app.set ("ver opciones", {diseño: falso}); app.engine ('html', function (ruta, opt, fn) {fs.readFile (ruta, 'utf-8', function (error, str) {if (error) return str; return fn (null, str) ;});});
nilakantha singh deo
16

intente esto para la configuración de su servidor

app.configure(function() {
    app.use(express.static(__dirname + '/public'));         // set the static files location
    app.use(express.logger('dev'));                         // log every request to the console
    app.use(express.bodyParser());                          // pull information from html in POST
    app.use(express.methodOverride());                      // simulate DELETE and PUT
    app.use(express.favicon(__dirname + '/public/img/favicon.ico'));
});

entonces sus funciones de devolución de llamada a rutas se verán así:

function(req, res) {
    res.sendfile('./public/index.html');
};
Connor Leech
fuente
14

No es necesario un motor de visualización, si desea utilizar angular con un simple archivo html. Aquí se explica cómo hacerlo: en su route.jsarchivo:

router.get('/', (req, res) => {
   res.sendFile('index.html', {
     root: 'yourPathToIndexDirectory'
   });
});
Ashish Rawat
fuente
1
Absolutamente la solución más fácil. No tengo el motor de vista instalado / configurado y se envía el html.
Newclique
7

Recomiendo usar https://www.npmjs.com/package/express-es6-template-engine - motor de plantillas extremadamente ligero y extremadamente rápido. El nombre es un poco engañoso, ya que también puede funcionar sin expressjs.

Los conceptos básicos necesarios para integrarse express-es6-template-engineen su aplicación son bastante simples y bastante sencillos de implementar:

const express = require('express'),
  es6Renderer = require('express-es6-template-engine'),
  app = express();
  
app.engine('html', es6Renderer);
app.set('views', 'views');
app.set('view engine', 'html');
 
app.get('/', function(req, res) {
  res.render('index', {locals: {title: 'Welcome!'}});
});
 
app.listen(3000);
Expandir fragmento
Aquí está el contenido del index.htmlarchivo ubicado dentro de su directorio 'vistas': 

<!DOCTYPE html>
<html>
<body>
    <h1>${title}</h1>
</body>
</html>
didinko
fuente
4

La respuesta es muy simple. Debe usar app.engine ('html') para representar las páginas * .html. intente esto Debe resolver el problema.

app.set('views', path.join(__dirname, 'views'));
**// Set EJS View Engine**
app.set('view engine','ejs');
**// Set HTML engine**
app.engine('html', require('ejs').renderFile);

el archivo .html funcionará

Dinesh Kanivu
fuente
2
Respuesta incompleta ¿Dónde se hacen estos cambios? Suponiendo app.js pero su respuesta debe ser específica. Además, es probable que esto no sea todo lo que necesita cambiar porque el resultado de hacer solo estos tres cambios / adiciones es "No se puede encontrar el módulo 'ejs'". Probablemente su respuesta esté cerca, pero debe agregar un poco más de información en mi humilde opinión.
Newclique
Además, renderizar no es lo mismo que servir un archivo. La representación requiere que el servidor procese previamente un archivo y agregue el contenido dinámico que se pasa al método de representación. Tal vez eso es lo que quería el OP, pero algunas personas combinan el renderizado con el servicio. Conceptos muy diferentes.
Newclique
@wade es para representar el archivo html en lugar del archivo ejs.
Dinesh Kanivu
3

Los archivos HTML se pueden representar utilizando el motor ejs:

app.set('view engine', 'ejs');

Y asegúrese de que sus archivos bajo "/ views" estén nombrados con ".ejs".

Por ejemplo "index.ejs".

JerryFZhang
fuente
Funciona pero se siente un poco hacky. ¿Sabes si hay alguna advertencia al usar .ejs en lugar de .html? ¡Saludos para probablemente la solución más rápida sugerida de todos modos!
mikeym
3

Comente el middleware para html, es decir

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

En su lugar use:

app.get("/",(req,res)=>{
    res.sendFile("index.html");
});
Shivam Chhetri
fuente
2

html no es un motor de vista, pero ejs ofrece la posibilidad de escribir código html dentro de él

Wael Chorfan
fuente
1

al servidor de páginas html a través del enrutamiento, he hecho esto.

var hbs = require('express-hbs');
app.engine('hbs', hbs.express4({
  partialsDir: __dirname + '/views/partials'
}));
app.set('views', __dirname + '/views');
app.set('view engine', 'hbs');

y renombré mis archivos .html a archivos .hbs: los manillares admiten html simple

Avinash
fuente
1

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

Install consolidate and swig to your directory.

 npm install consolidate
 npm install swig

add following lines to your app.js file

var cons = require('consolidate');

// view engine setup
app.engine('html', cons.swig)
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'html');

add your view templates as .html inside “views” folder. Restart you node server and start the app in the browser.

Esto debería funcionar

MD Mehadi Hasan Mozumder
fuente
1

Prueba esta solución simple, funcionó para mí

app.get('/', function(req, res){
    res.render('index.html')
  });
Kiryamwibo Yenusu
fuente
1
debe agregar todas sus líneas, esto por sí solo no funciona.
MushyPeas
1

Instalar plantilla ejs

npm install ejs --save

Consulte ejs en app.js

app.set('views', path.join(__dirname, 'views'));`
app.set('view engine', 'ejs');

Cree una plantilla ejs en vistas como views / indes.ejs y use ejs tempalte en el enrutador

router.get('/', function(req, res, next) {
    res.render('index', { title: 'Express' });
});
kta
fuente
0

Renderizar plantilla html con la ayuda de swig. 

//require module swig    
    var swig = require('swig');

// view engine setup    
    app.set('views', path.join(__dirname, 'views'));
    app.engine('html', swig.renderFile);
    app.set('view engine', 'html');
Harendra Singh
fuente
0

Los archivos HTML no necesitan ser renderizados.
lo que hace un motor de renderizado es convertir un archivo que no es un archivo Html en un archivo Html.
para enviar un archivo HTML, solo haz:

res.sendFile("index.html");

es posible que necesite usar __dirname+"/index.html"para que express sepa la ruta exacta.

GideonMax
fuente