Come posso usare HTML come motore di visualizzazione in Express?

130

Ho provato questa semplice modifica dal seme e ho creato i file .html corrispondenti (ad esempio index.html).

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

e questo file è rimasto lo stesso:

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

ma mentre corro ottengo

Errore 500: impossibile trovare il modulo 'html'

La mia unica opzione è usare 'ejs'? Il mio intento era di usare il semplice HTML in combinazione con AngularJS.

html node.js express

— Julio
fonte

7

Leggi questo argomento per una risposta: stackoverflow.com/questions/4529586/… Spero che questo aiuti,

— roland

3

app.engine ('html', require ('ejs'). renderFile);

— Dinesh Kanivu,

91

Le risposte all'altro link funzioneranno, ma per pubblicare l'HTML non è necessario utilizzare un motore di visualizzazione, a meno che non si desideri impostare un routing funky. Invece, basta usare il middleware statico:

app.use(express.static(__dirname + '/public'));

— Dan Kohn
fonte

3

Sono andato avanti e ho commentato il riferimento a app.set ('motore di visualizzazione', html). Ho quindi ricevuto un messaggio di errore "Nessun motore predefinito specificato e nessuna estensione fornita", che è previsto. Ma quando ho cambiato res.render ("index") in res.render ("index.html"), ho ricevuto il seguente errore: TypeError: la proprietà 'engine' dell'oggetto # <View> non è una funzione.

— Julio

4

Non c'è più motore di visualizzazione, quindi non credo res.render()che funzionerà più. Invece, inserisci i tuoi file HTML non elaborati publice lascia che il middleware statico gestisca direttamente i file. Se hai bisogno di percorsi più elaborati di così, probabilmente potresti impostare il tuo motore di visualizzazione HTML.

— Nick McCurdy,

6

Quindi cosa scrivi nella chiamata app.get ()?

— Ajbraus,

5

@ajbraus non hai nemmeno bisogno di una chiamata app.get (). Questo servirà semplicemente qualsiasi file html che hai nella cartella / public direttamente. Quindi nel browser, basta puntare direttamente

— all'html

Il problema che sto riscontrando con questo è se aggiorni la pagina dopo che è stata caricata ti dà un errore che dice Errore: Nessun motore predefinito è stato specificato e nessuna estensione è stata fornita. quindi se usi Auth, {fornire: LocationStrategy, useClass: HashLocationStrategy}], inserisce un hash nell'URL che è una seccatura per altri motivi. C'è un modo per aggirare questo?

— martedì

33

Per fare in modo che il motore di rendering accetti html anziché jade puoi seguire i seguenti passi;

Installa consolidate e swig nella vostra directory.
```
 npm install consolidate
 npm install swig
```

aggiungi le seguenti righe al tuo file 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');

aggiungi i tuoi modelli di vista come .html nella cartella "viste". Riavvia il tuo nodo server e avvia l'app nel browser.

Anche se questo renderà html senza alcun problema, ti consiglierei di usare JADE imparandolo. Jade è un motore di template straordinario e l'apprendimento di questo ti aiuterà a ottenere un design e una scalabilità migliori.

— AnandShanbhag
fonte

non ha un metodo "motore" - dopo tutti i passaggi

— ImranNaqvi del

Quale versione di Express stai usando? Express 4.x contiene l'API app.engine. Maggiori informazioni sono @ expressjs.com/en/api.html#app.engine

— AnandShanbhag

Ha funzionato alla grande! Adoro quando la risposta di un anno funziona la prima volta.

— Matthew Snell,

perché non riesco ancora a rendere il mio CSS e altro

— exe

23

Nelle tue apps.js basta aggiungere

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

Ora puoi utilizzare il motore di visualizzazione ejs mantenendo i file di visualizzazione come .html

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

Devi installare questi due pacchetti:

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

E quindi importare i pacchetti necessari:

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

In questo modo è possibile salvare le visualizzazioni come .html anziché .ejs .
Abbastanza utile mentre si lavora con IDE che supportano html ma non riconoscono ejs.

— Sudhanshu Gupta
fonte

1

app.set ('views', path.join (__ dirname, '/ path / to / your / folder')); app.set ("opzioni di visualizzazione", {layout: false}); app.engine ('html', funzione (path, opt, fn) {fs.readFile (path, 'utf-8', function (error, str) {if (error) return str; return fn (null, str) ;});});

— nilakantha singh deo,

16

prova questo per la configurazione del tuo server

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

quindi le tue funzioni di callback ai percorsi appariranno come:

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

— Connor Leech
fonte

14

Non è necessario alcun motore di visualizzazione, se si desidera utilizzare angolare con un semplice file HTML semplice. Ecco come farlo: Nel tuo route.jsfile:

router.get('/', (req, res) => {
   res.sendFile('index.html', {
     root: 'yourPathToIndexDirectory'
   });
});

— Ashish Rawat
fonte

1

Assolutamente la soluzione più semplice. Non ho installato / configurato il motore di visualizzazione e viene inviato l'html.

— Newclique,

7

Consiglio di usare https://www.npmjs.com/package/express-es6-template-engine - motore di template estremamente leggero e incredibilmente veloce. Il nome è un po 'fuorviante in quanto può funzionare anche senza expressjs.

Le basi necessarie per l'integrazione express-es6-template-enginenella tua app sono piuttosto semplici e abbastanza semplici da implementare:

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

Espandi frammento

Ecco il contenuto del index.htmlfile individuare nella directory 'views':

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

— didinko
fonte

4

La risposta è molto semplice È necessario utilizzare app.engine ('html') per visualizzare le pagine * .html. prova questo. Deve risolvere il 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);

il file .html funzionerà

— Dinesh Kanivu
fonte

2

Risposta incompleta. Dove vengono apportate queste modifiche? Supponendo app.js ma la tua risposta deve essere specifica. Inoltre, probabilmente non è tutto ciò che deve essere modificato perché il risultato di apportare solo queste tre modifiche / aggiunte è "Impossibile trovare il modulo 'ejs'". La tua risposta è probabilmente vicina ma devi aggiungere solo un po 'più di informazioni imho.

— Newclique,

Inoltre, il rendering non equivale a pubblicare un file. Il rendering richiede al server di pre-elaborare un file e aggiungere qualsiasi contenuto dinamico passato nel metodo di rendering. Forse è quello che voleva l'OP, ma alcune persone confondono il rendering con la pubblicazione. Concetti molto diversi.

— Newclique,

@wade è per il rendering del file html anziché del file ejs.

— Dinesh Kanivu,

3

I file HTML possono essere resi usando il motore ejs:

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

E assicurati che i tuoi file in "/ views" siano denominati ".ejs".

Ad esempio "index.ejs".

— JerryFZhang
fonte

Funziona ma sembra un po 'confuso. Sai se ci sono avvertenze sull'uso di .ejs al posto di .html? Saluti per probabilmente la soluzione più rapida suggerita lo stesso!

— Mike

3

Commenta il middleware per html ie

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

Invece usa:

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

— Shivam Chhetri
fonte

2

html non è un motore di visualizzazione, ma ejs offre la possibilità di scrivere codice html al suo interno

— Wael Chorfan
fonte

1

per server pagine HTML attraverso il routing, ho fatto questo.

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

e rinominato i miei file .html in file .hbs - i manubri supportano il semplice html

— Avinash
fonte

1

Per fare in modo che il motore di rendering accetti html anziché jade puoi seguire i seguenti passi;

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.

Questo dovrebbe funzionare

— Md Mehadi Hasan Mozumder
fonte

1

Prova questa semplice soluzione, ha funzionato per me

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

— Kiryamwibo Yenusu
fonte

1

dovresti aggiungere tutte le tue linee, questo da solo non funziona.

— MushyPeas,

1

Installa il modello ejs

npm install ejs --save

Fare riferimento a ejs in app.js

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

Crea un modello ejs in viste come viste / indes.ejs e usa ejs tempalte nel router

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

— KTA
fonte

0

Rendi il modello html con l'aiuto del sorso.

//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
fonte

0

Non è necessario eseguire il rendering dei file HTML.
ciò che fa un motore di rendering è trasformare un file che non è un file HTML in un file HTML.
per inviare un file HTML, basta fare:

res.sendFile("index.html");

potrebbe essere necessario utilizzare __dirname+"/index.html"così Express conoscerà il percorso esatto.

— GideonMax
fonte