Rendering della visualizzazione HTML di base?

279

Ho un'app di base node.js che sto provando a decollare usando Express Framework. Ho una viewscartella in cui ho un index.htmlfile. Ma ricevo il seguente errore durante il caricamento del browser web.

Errore: impossibile trovare il modulo 'html'

Di seguito è il mio codice.

var express = require('express');
var app = express.createServer();

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

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

app.listen(8080, '127.0.0.1')

Cosa mi sto perdendo qui?

— aherrick
fonte

298

Puoi avere giada includere una semplice pagina HTML:

in views / index.jade

include plain.html

in views / plain.html

<!DOCTYPE html>
...

e app.js possono ancora rendere jade:

res.render(index)

— Andrew Homeyer
fonte

1

Solo per notare che quello che voglio era servire solo un file .html perché la mia app era a pagina singola;)

— diosney

1

Possiamo includere più pagine HTML / JS con questo metodo?

— user3398326,

6

non dovresti essere in grado di renderizzare quella pagina html senza un modello di giada solo per il test iniziale di express?

— Positivo

1

Quindi dobbiamo creare un modello di giada per ciascuno dei nostri file HTML?

— Chris - Jr

4

Più di un trucco che di una soluzione.

— Ozil,

226

Molte di queste risposte non sono aggiornate.

Utilizzando express 3.0.0 e 3.1.0, i seguenti lavori:

app.set('views', __dirname + '/views');
app.engine('html', require('ejs').renderFile);

Vedere i commenti seguenti per sintassi e avvertenze alternative per Express 3.4+:

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

Quindi puoi fare qualcosa del tipo:

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

Questo presuppone che tu abbia le tue viste nella viewssottocartella e che tu abbia installato il ejsmodulo del nodo. In caso contrario, eseguire quanto segue su una console Node:

npm install ejs --save

— Drew Noakes
fonte

@MichaelDausmann, evviva, ho incluso quelle informazioni nella risposta.

— Drew Noakes,

perché res.render richiede l'estensione .html in questo caso ma non nel caso predefinito con giada. con il codice boilerplate, chiama solo res.render ('index', {title: 'Express'}); ma qui è: res.render ('about.html');

— Trascendenza,

6

Con Express 3.4.2: app.set ('view engine', 'ejs');

— roland,

3

Dovresti usare il comando 'npm install ejs --save' per aggiornare il tuo package.json

— Tom Teman

8

perché hai bisogno di ejs?

— Positivo

71

Dalla guida Express.js: Visualizza rendering

Visualizza i nomi dei file in forma Express.ENGINE, dove ENGINEè il nome del modulo che sarà richiesto. Ad esempio, la vista layout.ejsindica al sistema di visualizzazione direquire('ejs') , il modulo in fase di caricamento deve esportare il metodoexports.render(str, options) per conformarsi a Express, tuttavia app.register()può essere utilizzato per mappare i motori alle estensioni dei file, in modo che ad esempio foo.htmlpossa essere reso da giada.

Quindi o crei il tuo renderer semplice o usi semplicemente jade:

 app.register('.html', require('jade'));

Maggiori informazioni app.register.

Si noti che in Express 3, questo metodo viene rinominato app.engine

— Ivo Wetzel
fonte

57

Nota- app.register è stato rinominato app.engine in Express 3.

— Spongeboy il

8

Vedi la risposta di Andrew Homeyer. È la risposta effettiva.

— David Betz,

7

Da un'altra risposta, per Express 4 ho finito per usareapp.engine('.html', require('ejs').renderFile);

— CrazyPyro il

In Express 4, puoi anche usare: app.set ('view engine', 'jade');

— Daniel Huang,

48

Puoi anche leggere il file HTML e inviarlo:

app.get('/', (req, res) => {
    fs.readFile(__dirname + '/public/index.html', 'utf8', (err, text) => {
        res.send(text);
    });
});

— keegan3d
fonte

23

questa soluzione non è valida perché non è possibile memorizzare nella cache i file; viene letto per ogni richiesta.

— Marcel Falliere,

2

è potenzialmente abbastanza facile memorizzarlo nella cache manualmente. Memorizza il file letto come una variabile e rileggilo solo se quella variabile è vuota. È inoltre possibile utilizzare un oggetto JS e archiviare vari file in varie variabili, con timestamp. Sicuramente è più lavoro di quanto farebbe la maggior parte delle persone, ma è buono con le persone nuove al nodo. È facile da capire

— Naman Goel,

5

Yikes. Ciò sconfigge l'intero punto delle architetture snelle e orientate alla convenzione (come MVC).

— David Betz,

@MarcelFalliere Supponi che voglia memorizzare nella cache il file o che non voglia utilizzare una soluzione di memorizzazione nella cache personalizzata. Grazie keegan3d per la risposta.

— Benny,

@MarcelFalliere Allora, qual è la soluzione giusta? Vedo altre risposte che richiedono nuove dipendenze. È necessario solo per servire file html?

— JCarlosR,

45

prova questo. per me funziona.

app.configure(function(){

  .....

  // disable layout
  app.set("view options", {layout: false});

  // make a custom html template
  app.register('.html', {
    compile: function(str, options){
      return function(locals){
        return str;
      };
    }
  });
});

....

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

— spettro
fonte

2

ho avuto problemi con la configurazione esatta sopra, quindi ho rimosso il punto da ".html" e ho aggiunto questo: app.set ('view engine', 'html'); app.set ('views', __dirname + '/ views'); per un rendering perfetto

— Bijou Trouvaille,

8

Questo è un po 'strano ... dovresti servire html come file statici. Questo ti dà anche il vantaggio di una migliore memorizzazione nella cache. La creazione di un "compilatore HTML" personalizzato sembra errata. Se devi inviare un file all'interno di un percorso (cosa che raramente devi fare), leggi e invialo. Altrimenti basta reindirizzare al codice HTML statico.

— enyo

2

@Enyo questo commento sembra strano, considerando COME FARE quello che stai dicendo dovrebbe essere fatto È LA DOMANDA CHE SI RICHIEDE, e la tua risposta è semplicemente farlo. Come si fornisce un HTML statico con la memorizzazione nella cache?

— Kyeotic

3

Vedo un errore app.register. Forse è stato deprecato in express 3.0.0.rc3? TypeError: Object function app(req, res){ app.handle(req, res); } has no method 'register'

— Drew Noakes,

1

@enyo, hai perso il punto dell'architettura a vapore. Quando il modello è controller / view (o / processor / view, qualunque sia la tua architettura specifica), non puoi deviare da quello con il modello obsoleto di estensioni. Devi trattare il tuo HTML come contenuto renderizzato come tutto il resto. Keep it DRY, amico.

— David Betz,

22

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

— cenno
fonte

5

sendfile non è cache in modalità di produzione, quindi questa non è una buona soluzione.

— Teo Choong Ping

1

@SeymourCakes Gentilmente correggimi se sbaglio, ma penso che sendFile ora supporti la memorizzazione nella cache: devdocs.io/express/index#res.sendFile

— KhoPhi

19

Se stai usando express@~3.0.0 cambia la riga seguente dal tuo esempio:

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

a qualcosa del genere:

app.set("view options", {layout: false});
app.use(express.static(__dirname + '/public'));

L'ho fatto come descritto sulla pagina API di Express e funziona come un incantesimo. Con quella configurazione non è necessario scrivere codice aggiuntivo, quindi diventa abbastanza facile da usare per la tua micro produzione o test.

Codice completo elencato di seguito:

var express = require('express');
var app = express.createServer();

app.set("view options", {layout: false});
app.use(express.static(__dirname + '/public'));

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

app.listen(8080, '127.0.0.1')

— Mark Karwowski
fonte

1

Perché ripeti app.use(express.static(__dirname + '/public'));dopo aver avviato il server con app.listen?

— Fatuhoku,

2

qual è la differenza di servire la pagina html come statica invece di caricarla non statica con express?

— Positivo

14

Ho anche affrontato lo stesso problema in express 3.Xe node 0.6.16. La soluzione sopra indicata non funzionerà per l'ultima versione express 3.x. Hanno rimosso il app.registermetodo e aggiunto il app.enginemetodo. Se hai provato la soluzione di cui sopra, potresti riscontrare il seguente errore.

node.js:201
        throw e; // process.nextTick error, or 'error' event on first tick
              ^
TypeError: Object function app(req, res){ app.handle(req, res); } has no method 'register'
    at Function.<anonymous> (/home/user1/ArunKumar/firstExpress/app.js:37:5)
    at Function.configure (/home/user1/ArunKumar/firstExpress/node_modules/express/lib/application.js:399:61)
    at Object.<anonymous> (/home/user1/ArunKumar/firstExpress/app.js:22:5)
    at Module._compile (module.js:441:26)
    at Object..js (module.js:459:10)
    at Module.load (module.js:348:31)
    at Function._load (module.js:308:12)
    at Array.0 (module.js:479:10)
    at EventEmitter._tickCallback (node.js:192:40)

Per sbarazzarsi del messaggio di errore. Aggiungi la seguente riga alla tuaapp.configure function

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

Nota: è necessario installare il ejsmotore modello

npm install -g ejs

Esempio:

app.configure(function(){

  .....

  // disable layout
  app.set("view options", {layout: false});

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

....

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

Nota: la soluzione più semplice è utilizzare il modello ejs come motore di visualizzazione. Lì puoi scrivere HTML non elaborato nei file di visualizzazione * .ejs.

— Jak
fonte

3

Devi installare a ejslivello globale?

— Drew Noakes,

mi dice che non riesce a trovare il file 'index.html'

— MetaGuru

9

struttura delle cartelle:

.
├── index.html
├── node_modules
│   ├──{...}
└── server.js

server.js

var express = require('express');
var app = express();

app.use(express.static('./'));

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

app.listen(8882, '127.0.0.1')

index.html

<!DOCTYPE html>
<html>
<body>

<div> hello world </div>

</body>
</html>

produzione:

Ciao mondo

— KARTHIKEYAN.A
fonte

7

Se non devi usare la directory views , sposta semplicemente i file html nella directory pubblica qui sotto.

e quindi aggiungi questa riga in app.configure invece di '/ views'.

server.use (express.static (__ dirname + '/ public'));

— spettro
fonte

5

Per eseguire il rendering della pagina HTML nel nodo provare quanto segue,

app.set('views', __dirname + '/views');

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

È necessario installare il ejsmodulo npmcome:
```
   npm install ejs --save
```

— Trojan
fonte

Questa soluzione ha funzionato per me. Anche se ho provato anche l'opzione statica. Puoi spiegare il meccanismo che sta dietro. Grazie!

— harshad,

4

Per il mio progetto ho creato questa struttura:

index.js
css/
    reset.css
html/
    index.html

Questo codice serve index.html per le /richieste e reset.css per le /css/reset.cssrichieste. Abbastanza semplice e la parte migliore è che aggiunge automaticamente le intestazioni della cache .

var express = require('express'),
    server = express();

server.configure(function () {
    server.use('/css', express.static(__dirname + '/css'));
    server.use(express.static(__dirname + '/html'));
});

server.listen(1337);

— Znarkus
fonte

3

1) Il modo migliore è impostare la cartella statica. Nel tuo file principale (app.js | server.js | ???):

app.use(express.static(path.join(__dirname, 'public')));

public / css / form.html
public / css / style.css

Quindi hai ottenuto il file statico dalla cartella "pubblica":

http://YOUR_DOMAIN/form.html
http://YOUR_DOMAIN/css/style.css

2)

È possibile creare la cache dei file.
Utilizzare il metodo fs.readFileSync

var cache = {};
cache["index.html"] = fs.readFileSync( __dirname + '/public/form.html');

app.get('/', function(req, res){    
    res.setHeader('Content-Type', 'text/html');
    res.send( cache["index.html"] );                                
};);

— Tomáš
fonte

Non male! ecco una demo completa del file! https://gist.github.com/xgqfrms-GitHub/7697d5975bdffe8d474ac19ef906e906

— xgqfrms

3

Con Express 4.0.0, l'unica cosa che devi fare è commentare 2 righe in app.js:

/* app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade'); */ //or whatever the templating engine is.

E quindi rilasciare il file statico nella directory / public. Esempio: /public/index.html

— u84six
fonte

3

Ho aggiunto sotto la riga 2 e funziona per me

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

— Naren Chejara
fonte

mi dà il seguente errore "Errore: Impossibile trovare il modulo 'ejs' in Function.Module._resolveFilename (module.js: 338: 15) in Function.Module._load (module.js: 280: 25) in Module.require ( module.js: 364: 17) a request (module.js: 380: 17) "

— Lygub Org

@LygubOrg eseguito npm install ejs --savenella directory di lavoro.

— A1rPun

1

è necessario aggiungere una dipendenza solo per servire un file html?

— JCarlosR,

3

Prova la funzione res.sendFile () nelle rotte Express.

var express = require("express");
var app     = express();
var path    = require("path");


app.get('/',function(req,res){
  res.sendFile(path.join(__dirname+'/index.html'));
  //__dirname : It will resolve to your project folder.
});

app.get('/about',function(req,res){
  res.sendFile(path.join(__dirname+'/about.html'));
});

app.get('/sitemap',function(req,res){
  res.sendFile(path.join(__dirname+'/sitemap.html'));
});

app.listen(3000);

console.log("Running at Port 3000");

Leggi qui: http://codeforgeek.com/2015/01/render-html-file-expressjs/

— Shaikh Shahid
fonte

3

Non volevo dipendere da ejs per la semplice consegna di un file HTML, quindi ho semplicemente scritto il piccolo renderer da solo:

const Promise = require( "bluebird" );
const fs      = Promise.promisifyAll( require( "fs" ) );

app.set( "view engine", "html" );
app.engine( ".html", ( filename, request, done ) => {
    fs.readFileAsync( filename, "utf-8" )
        .then( html => done( null, html ) )
        .catch( done );
} );

— Der Hochstapler
fonte

2

Stavo cercando di configurare un'app angolare con un'API RESTful espressa e sono arrivato su questa pagina più volte, anche se non è stato utile. Ecco cosa ho scoperto che ha funzionato:

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 nel callback per i tuoi percorsi API sembrano: res.jsonp(users);

Il framework lato client può gestire il routing. Express serve per servire l'API.

Il mio percorso di casa è simile al seguente:

app.get('/*', function(req, res) {
    res.sendfile('./public/index.html'); // load the single view file (angular will handle the page changes on the front-end)
});

— Connor Leech
fonte

2

res.sendFile(__dirname + '/public/login.html');

— himanshu yadav
fonte

2

Ecco una demo completa del file di express server!

https://gist.github.com/xgqfrms-GitHub/7697d5975bdffe8d474ac19ef906e906

spero che ti possa aiutare!

// simple express server for HTML pages!
// ES6 style

const express = require('express');
const fs = require('fs');
const hostname = '127.0.0.1';
const port = 3000;
const app = express();

let cache = [];// Array is OK!
cache[0] = fs.readFileSync( __dirname + '/index.html');
cache[1] = fs.readFileSync( __dirname + '/views/testview.html');

app.get('/', (req, res) => {
    res.setHeader('Content-Type', 'text/html');
    res.send( cache[0] );
});

app.get('/test', (req, res) => {
    res.setHeader('Content-Type', 'text/html');
    res.send( cache[1] );
});

app.listen(port, () => {
    console.log(`
        Server is running at http://${hostname}:${port}/ 
        Server hostname ${hostname} is listening on port ${port}!
    `);
});

Espandi frammento

— xgqfrms
fonte

1

Aggiungi le seguenti righe al tuo codice

Sostituisci "giada" con "ejs" e "XYZ" (versione) con "*" nel file package.json
```
  "dependencies": {
   "ejs": "*"
  }
```
Quindi nel tuo file app.js Aggiungi il seguente codice:

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

app.set('view engine', 'html');
E ricorda Mantieni tutti i file .HTML nella cartella viste

Saluti :)

— Amulya Kashyap
fonte

1

Per HTML semplice non è necessario alcun pacchetto npm o middleware

basta usare questo:

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

— Shivam Chhetri
fonte

1

È molto triste che sia verso il 2020 ancora express non ha aggiunto un modo per rendere una pagina HTML senza usare il sendFilemetodo responsedell'oggetto. L'uso sendFilenon è un problema, ma passare l'argomento sotto forma di path.join(__dirname, 'relative/path/to/file')non sembra giusto. Perché un utente dovrebbe unirsi __dirnameal percorso del file? Dovrebbe essere fatto di default. Perché il root del server non può essere defalutato nella directory del progetto? Inoltre, l'installazione di una dipendenza modello solo per il rendering di un file HTML statico non è nuovamente corretta. Non conosco il modo corretto di affrontare il problema, ma se dovessi servire un HTML statico, farei qualcosa del tipo:

const PORT = 8154;

const express = require('express');
const app = express();

app.use(express.static('views'));

app.listen(PORT, () => {
    console.log(`Server is listening at port http://localhost:${PORT}`);
});

L'esempio sopra presuppone che la struttura del progetto abbia una viewsdirectory e che i file HTML statici siano al suo interno. Ad esempio, diciamo, la viewsdirectory ha due file HTML denominati index.htmle about.html, per accedervi, possiamo visitare: localhost:8153/index.htmlo semplicemente localhost:8153/per caricare la index.htmlpagina e localhost:8153/about.htmlper caricare il file about.html. Possiamo usare un approccio simile per servire un'app reattiva / angolare archiviando gli artefatti nella viewsdirectory o semplicemente usando la dist/<project-name>directory predefinita e configurandola nel server j come segue:

app.use(express.static('dist/<project-name>'));

— Vighnesh Raut
fonte

0

Volevo consentire alle richieste di "/" di essere gestite da una route Express in cui in precedenza erano state gestite dal middleware statico. Ciò mi consentirebbe di eseguire il rendering della versione normale di index.html o di una versione che ha caricato JS e CSS concatenati + minimizzati, a seconda delle impostazioni dell'applicazione. Ispirato dalla risposta di Andrew Homeyer , ho deciso di trascinare i miei file HTML - non modificati - in una cartella di visualizzazioni, configurare Express in questo modo

   app.engine('html', swig.renderFile);
   app.set('view engine', 'html');
   app.set('views', __dirname + '/views');

E ha creato un gestore di percorsi in questo modo

 app.route('/')
        .get(function(req, res){
            if(config.useConcatendatedFiles){
                return res.render('index-dist');
            }
            res.render('index');       
        });

Questo ha funzionato abbastanza bene.

— K. Francis
fonte

0

In server.js, si prega di includere

var express = require("express");
var app     = express();
var path    = require("path");


app.get('/',function(req,res){
  res.sendFile(path.join(__dirname+'/index.html'));
  //__dirname : It will resolve to your project folder.
});

— shumana chowdhury
fonte

0

Se stai provando a servire un file HTML che ha già tutto il suo contenuto al suo interno, non ha bisogno di essere "renderizzato", deve solo essere "servito". Il rendering è quando si ha l'aggiornamento del server o si immette il contenuto prima che la pagina venga inviata al browser e richiede dipendenze aggiuntive come ejs, come mostrano le altre risposte.

Se vuoi semplicemente indirizzare il browser a un file in base alla loro richiesta, dovresti usare res.sendFile () in questo modo:

const express = require('express');
const app = express();
var port = process.env.PORT || 3000; //Whichever port you want to run on
app.use(express.static('./folder_with_html')); //This ensures local references to cs and js files work

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/folder_with_html/index.html');
});

app.listen(port, () => console.log("lifted app; listening on port " + port));

In questo modo non sono necessarie dipendenze aggiuntive oltre a express. Se vuoi solo che il server invii i tuoi file html già creati, quanto sopra è un modo molto leggero per farlo.

— aleph_one
fonte

0

index.js

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


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


app.listen(3400, () => {
    console.log('Server is running at port 3400');
})

Inserisci il tuo file index.html nella cartella pubblica

<!DOCTYPE html>
<html>
<head>
    <title>Render index html file</title>
</head>
<body>
    <h1> I am from public/index.html </h1>
</body>
</html>

Ora esegui il seguente codice nel tuo terminale

nodo index.js

— Ahmad Sharif
fonte

-1

Di solito lo uso

app.configure(function() {
    app.use(express.static(__dirname + '/web'));
});

Fai solo attenzione perché condividerà qualsiasi cosa nella directory / web.

spero possa essere d'aiuto

— DiogoNeves
fonte

-2

se si utilizza express framework per node.js

installa npm ejs

quindi aggiungere il file di configurazione

app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router)

;

renderizza la pagina dal modulo export.js ha il file html nella directory delle viste con estensione del nome del file ejs come form.html.ejs

quindi crea il form.js

res.render('form.html.ejs');

— aruneshtechno
fonte

Cos'è questo casino?

— Vighnesh Raut, il