Utiliser HTML dans Express au lieu de Jade

103

Comment me débarrasser de Jade en utilisant Express avec Node.JS? Je veux simplement utiliser du HTML. Dans d'autres articles, j'ai vu que les gens recommandaient app.register () qui est maintenant obsolète dans la dernière version.

html node.js express pug Sanchit Gupta
la source

Réponses:

78

Vous pouvez le faire de cette façon:

  1. Installez ejs:

    npm install ejs

  2. Définissez votre moteur de modèle dans app.js comme ejs

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

  3. Maintenant, dans votre fichier d'itinéraire, vous pouvez attribuer des variables de modèle 

    // ./routes/index.js
exports.index = function(req, res){
res.render('index', { title: 'ejs' });};

  4. Ensuite, vous pouvez créer votre vue html dans le répertoire / views.

Biwek
la source
2
Je viens de commencer à utiliser node.js. La solution n'est pas claire pour moi. J'ai un petit site Web html. J'ai besoin de node.js pour envoyer des e-mails via mon site en utilisant nodemailer. J'ai installé tout le nécessaire. Cependant, j'ai une idée de ce qui devrait figurer dans le fichier app.js pour que mon site Web fonctionne avec express
user2457956
4
Comment imprimer la variable titledans un fichier html?
Master Yoda
3
Si quelqu'un se demande encore comment imprimer la variable, comme @MasterYoda l'a demandé, vous pouvez l'imprimer comme ceci sur le html: <% = title%>
Lucas Meine
62

Jade accepte également les entrées html.
Ajoutez simplement un point à la fin de la ligne pour commencer à soumettre du HTML pur.
Si cela vous convient, essayez:

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

PS - Pas besoin de fermer HTML - c'est fait automatiquement par Jade.

Martin Sookael
la source
7
Doctype 5 est désormais obsolète. Utilisez "doctype html" comme première ligne.
snorkelzebra
Docs for the dot: pugjs.org/language/plain-text.html#block-in-a-tag
Alexander Taubenkorb
18

À partir d'Express 3, vous pouvez simplement utiliser response.sendFile

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

À partir de la référence officielle de l'API express :

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

Transférez le fichier au chemin indiqué.

Par défaut, le champ d'en-tête de réponse Content-Type est automatiquement basé sur l'extension du nom de fichier. Le rappel fn(err)est appelé lorsque le transfert est terminé ou lorsqu'une erreur se produit.

avertissement

res.sendFilefournit un cache côté client via les en-têtes de cache http mais il ne met pas en cache le contenu des fichiers côté serveur. Le code ci-dessus frappera le disque à chaque demande .

laconbass
la source
2
Je crois que l'OP veut toujours utiliser une sorte de modèle, juste avec la syntaxe HTML normale. sendfilene vous permet pas de créer des modèles car il envoie simplement des octets à partir d'un fichier. De plus, je recommanderais de ne pas utiliser sendfilece type d' utilisation, car cela signifie que vous frapperez le disque à chaque fois qu'une demande arrive - un énorme goulot d'étranglement. Pour les pages à fort trafic, vous devez vraiment faire de la mise en cache en mémoire.
josh3736
1
@ josh3736 si vous avez raison sur l'intention du PO, la question devrait être améliorée. Vous avez raison de frapper le disque à chaque demande, je vais améliorer ma réponse pour avertir de ce fait. Pensez à améliorer le vôtre pour avertir de ce qui suit: si vous implémentez un moteur personnalisé, vous devez également implémenter la fonction de capture (si vous le souhaitez), elle n'est pas gérée par express.
laconbass
17

À mon avis, utiliser quelque chose d'aussi gros que des ejs juste pour lire des fichiers html est un peu lourd. Je viens d'écrire mon propre moteur de template pour les fichiers html qui est remarquablement simple. Le fichier ressemble à ceci:

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 = {};

J'ai appelé le mien htmlEngine, et la façon dont vous l'utilisez est simplement en disant:

app.engine('html', require('./htmlEngine'));
app.set('view engine', 'html');
kevin.groat
la source
11

app.register()n'a pas été déprécié, il vient d'être renommé app.engine()depuis qu'Express 3 change la façon dont les moteurs de modèles sont gérés .

La compatibilité du moteur de modèle Express 2.x nécessitait l'exportation de module suivant:

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

Les moteurs de modèles Express 3.x doivent exporter les éléments suivants:

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

Si un moteur de modèle n'expose pas cette méthode, vous n'êtes pas sans chance, la app.engine()méthode vous permet de mapper n'importe quelle fonction à une extension. Supposons que vous ayez une bibliothèque Markdown et que vous vouliez rendre les fichiers .md, mais que cette bibliothèque ne prenait pas en charge Express, votre app.engine()appel peut ressembler à ceci:

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 vous recherchez un moteur de création de modèles qui vous permet d'utiliser du HTML `` simple '', je recommande doT car il est extrêmement rapide .

Bien sûr, gardez à l'esprit que le modèle de vue Express 3 vous laisse la mise en cache de la vue (ou à votre moteur de création de modèles). Dans un environnement de production, vous souhaitez probablement mettre en cache vos vues en mémoire afin de ne pas effectuer d'E / S disque à chaque demande.

josh3736
la source
Jetez un œil à ma réponse, la vôtre explique parfaitement comment enregistrer les moteurs de modèles, mais il existe un moyen beaucoup plus simple de transférer des fichiers html simples.
laconbass
@ josh3736: Votre lien hypertexte "extrêmement rapide" fonctionne dans Firefox 41, mais ne parvient pas à exécuter les tests dans Chromium version 45.0.2454.101 Ubuntu 14.04 (64 bits). Je me demande pourquoi.
Lonnie Best
4

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 vues 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
1
Le seul gros problème avec Jade est l'indentation. Si vous vous trompez, le code ne se compilera pas. Aussi, je me demande pourquoi Jade autre que le fait que la seule chose qu'il fait est le code de réduction ...
zapper
4

vérifiez d'abord la version de compatibilité du moteur de modèle en utilisant la ligne ci-dessous

express -h

alors vous ne devez utiliser aucune vue de la liste. sélectionner aucune vue 

express --no-view myapp

maintenant vous pouvez utiliser tous vos html, css, js et images dans un dossier public.

Soubhagya Kumar Barik
la source
3

Eh bien, il semble que vous vouliez servir des fichiers statiques. Et il y a une page pour cela http://expressjs.com/en/starter/static-files.html

Bizarre que personne ne se connecte à la documentation.

S Meaden
la source
"Bizarre que personne ne crée de lien vers la documentation" Je reconnais qu'il est trivial d'utiliser un langage d'affichage différent dans Express.
pixel 67
1

Considérant que vos itinéraires sont déjà définis ou que vous savez comment le faire.

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

NOTE: cette route doit être placée après toutes les autres puisque * accepte tout.

João Rodrigues
la source
1

puisque Jade prend en charge HTML, si vous voulez juste avoir .html ext, vous pouvez le faire

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

alors vous changez simplement de fichier dans les vues de jade à html.

Weijing Jay Lin
la source
N'avez-vous pas à mettre un «point» ou un point avant le balisage html?
Gus Crawford
1

Vous pouvez également inclure directement votre fichier html dans votre fichier jade

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

Réponse originale: Générateur express sans jade

Priyanshu Chauhan
la source
-10

Si vous voulez utiliser du HTML brut dans nodeJS, sans utiliser de jade .. ou autre:

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

Personnellement, je me débrouille bien avec ça.

L'avantage est la simplicité lors du contrôle. Vous pouvez utiliser quelques astuces, comme '<p>' + (name || '') + '</p>', ternaire .. etc.

Si vous voulez un code en retrait dans le navigateur, vous pouvez faire:

+ 'ok \
  my friend \
  sldkfjlsdkjf';

et utilisez \ t ou \ n à volonté. Mais je préfère sans, en plus c'est plus rapide.


la source
Je voudrais pouvoir utiliser des fichiers HTML dans Express (vs plain Node.JS)
Sanchit Gupta
ooooohh désolé (je suis français: p), donc vous pouvez utiliser le fsmodule. fs.readFile(htmlfile, 'utf8', function (err, file) {