Comment utiliser HTML comme moteur d'affichage dans Express?

130

J'ai essayé ce changement simple de la graine et créé les fichiers .html correspondants (par exemple index.html).

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

et ce fichier est resté le même:

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

mais en courant je reçois

Erreur 500: impossible de trouver le module 'html'

Est-ce que ma seule option est d'utiliser «ejs»? Mon intention était d'utiliser du HTML brut en conjonction avec AngularJS.

html node.js express Julio
la source
7
Voir cette rubrique pour une réponse: stackoverflow.com/questions/4529586/... J'espère que cela aide,
roland
3
app.engine ('html', require ('ejs'). renderFile);
Dinesh Kanivu

Réponses:

91

Les réponses à l'autre lien fonctionneront, mais pour diffuser du HTML, il n'est pas du tout nécessaire d'utiliser un moteur de vue, à moins que vous ne souhaitiez configurer un routage funky. Au lieu de cela, utilisez simplement le middleware statique:

app.use(express.static(__dirname + '/public'));
Dan Kohn
la source
3
Je suis allé de l'avant et j'ai commenté la référence à app.set ('view engine', html). J'ai ensuite reçu un message d'erreur indiquant que "Aucun moteur par défaut n'a été spécifié et aucune extension n'a été fournie", ce qui est attendu. Mais quand j'ai changé le res.render ("index") en res.render ("index.html"), j'ai eu l'erreur suivante: TypeError: La propriété 'engine' de l'objet # <View> n'est pas une fonction.
Julio
4
Il n'y a plus de moteur de vue, donc je ne pense pas que res.render()cela fonctionnera plus. Au lieu de cela, placez vos fichiers HTML bruts publicet laissez le middleware statique s'occuper de servir les fichiers directement. Si vous avez besoin d'itinéraires plus sophistiqués, vous pouvez probablement configurer votre propre moteur de visualisation HTML.
Nick McCurdy
6
Alors, qu'écrivez-vous dans l'appel app.get ()?
ajbraus
5
@ajbraus vous n'avez même pas besoin d'un appel app.get (). Cela servira simplement les fichiers html que vous avez dans le dossier / public directement. Donc, dans le navigateur, il vous suffit de pointer directement vers le html et c'est tout ... fondamentalement pas de routage
dm76
Le problème que j'ai rencontré avec cela est que si vous actualisez la page après son chargement, cela vous donne une erreur indiquant Erreur: Aucun moteur par défaut n'a été spécifié et aucune extension n'a été fournie. puis si vous utilisez Auth, {provide: LocationStrategy, useClass: HashLocationStrategy}], il ajoute un hachage à votre URL, ce qui est pénible pour d'autres raisons. Y a-t-il un moyen de contourner ceci?
wuno
33

Pour que le moteur de rendu accepte html au lieu de jade, vous pouvez suivre les étapes suivantes;

  1. Installez consolider et swig dans votre répertoire.

     npm install consolidate
 npm install swig

  2. ajoutez les lignes suivantes à votre fichier 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. ajoutez vos modèles de vue au format .html dans le dossier «vues». Redémarrez votre serveur de nœuds et démarrez l'application dans le navigateur.

Bien que cela rendra html sans aucun problème, je vous recommande d'utiliser JADE en l'apprenant. Jade est un moteur de modèle incroyable et apprendre cela vous aidera à obtenir une meilleure conception et une meilleure évolutivité.

AnandShanbhag
la source
n'a pas de méthode 'moteur' - après toutes les étapes
ImranNaqvi
Quelle version d'express utilisez-vous? Express 4.x contient l'API app.engine. Plus d'informations sur @ expressjs.com/en/api.html#app.engine
AnandShanbhag
A très bien fonctionné! J'adore quand une réponse d'un an fonctionne la première fois.
Matthew Snell
pourquoi il ne peut toujours pas rendre mon css et autre
exe
23

Dans votre apps.js, ajoutez simplement

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

Vous pouvez maintenant utiliser le moteur de vue ejs tout en conservant vos fichiers de vue au format .html

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

Vous devez installer ces deux packages:

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

Et puis importez les packages nécessaires:

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


De cette façon, vous pouvez enregistrer vos vues au format .html au lieu de .ejs .
Très utile lorsque vous travaillez avec des IDE qui prennent en charge le HTML mais ne reconnaissent pas les ejs.

Sudhanshu Gupta
la source
1
app.set ('views', path.join (__ dirname, '/ path / to / your / folder')); app.set ("options d'affichage", {layout: false}); app.engine ('html', function (path, opt, fn) {fs.readFile (path, 'utf-8', function (error, str) {if (error) return str; return fn (null, str) ;});});
nilakantha singh deo
16

essayez ceci pour la configuration de votre serveur

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'));
});

alors vos fonctions de rappel vers les routes ressembleront à ceci:

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

Aucun moteur de vue n'est nécessaire, si vous souhaitez utiliser angular avec un simple fichier html simple. Voici comment procéder: Dans votre route.jsfichier:

router.get('/', (req, res) => {
   res.sendFile('index.html', {
     root: 'yourPathToIndexDirectory'
   });
});
Ashish Rawat
la source
1
Absolument la solution la plus simple. Je n'ai pas de moteur de vue installé / configuré et le html est envoyé.
Newclique
7

Je recommande d'utiliser https://www.npmjs.com/package/express-es6-template-engine - un moteur de template extrêmement léger et incroyablement rapide. Le nom est un peu trompeur car il peut également fonctionner sans expressjs.

Les bases nécessaires à l'intégration express-es6-template-enginedans votre application sont assez simples et assez simples à mettre en œuvre:

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);
Développer l'extrait
Voici le contenu du index.htmlfichier situé dans votre répertoire 'views': 

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

La réponse est très simple. Vous devez utiliser app.engine ('html') pour afficher les pages * .html. essayez ceci.Il doit résoudre le problème.

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);

le fichier .html fonctionnera

Dinesh Kanivu
la source
2
Réponse incomplète. Où ces changements sont-ils apportés? En supposant app.js, mais votre réponse doit être spécifique. De plus, ce n'est probablement pas tout ce qu'il faut changer car le résultat de ces trois changements / ajouts est "Impossible de trouver le module 'ejs'". Votre réponse est probablement proche, mais vous devez ajouter un peu plus d'informations à mon humble avis.
Newclique
De plus, le rendu n'est pas la même chose que la diffusion d'un fichier. Le rendu nécessite que le serveur prétraite un fichier et ajoute le contenu dynamique transmis à la méthode de rendu. C'est peut-être ce que le PO voulait, mais certaines personnes confondent rendu et service. Des concepts très différents.
Newclique
@wade c'est pour rendre le fichier html plutôt que le fichier ejs.
Dinesh Kanivu
3

Les fichiers HTML peuvent être rendus à l'aide du moteur ejs:

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

Et assurez-vous que vos fichiers sous "/ views" sont nommés avec ".ejs".

Par exemple "index.ejs".

JerryFZhang
la source
Cela fonctionne mais semble un peu piraté. Savez-vous s'il existe des mises en garde concernant l'utilisation de .ejs à la place de .html? Bravo pour probablement la solution la plus rapide suggérée tout de même!
mikeym
3

Commentez le middleware pour html ie

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

Utilisez plutôt:

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

html n'est pas un moteur de vue, mais ejs offre la possibilité d'y écrire du code html

Wael Chorfan
la source
1

aux pages html du serveur via le routage, je l'ai fait.

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

et renommé mes fichiers .html en fichiers .hbs - les guidons prennent en charge le html ordinaire

Avinash
la source
1

Pour que le moteur de rendu accepte html au lieu de jade, vous pouvez suivre les étapes suivantes;

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.

Cela devrait fonctionner

Md Mehadi Hasan Mozumder
la source
1

Essayez cette solution simple, cela a fonctionné pour moi

app.get('/', function(req, res){
    res.render('index.html')
  });
Kiryamwibo Yenusu
la source
1
vous devez ajouter toutes vos lignes, cela ne fonctionne pas en soi.
MushyPeas
1

Installer le modèle ejs

npm install ejs --save

Reportez-vous aux ejs dans app.js

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

Créez un modèle ejs dans des vues comme views / indes.ejs et utilisez ejs tempalte dans le routeur

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

Rendre le modèle html à l'aide 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
la source
0

Les fichiers HTML n'ont pas besoin d'être rendus.
ce qu'un moteur de rendu fait est de transformer un fichier qui n'est pas un fichier Html en un fichier Html.
pour envoyer un fichier Html, faites simplement:

res.sendFile("index.html");

vous devrez peut-être utiliser __dirname+"/index.html"pour qu'express connaisse le chemin exact.

GideonMax
la source