Renderizza la visualizzazione HTML di base?

Ho una semplice app node.js che sto cercando di decollare usando il framework Express. Ho una cartella views cui ho un file index.html . Ma ricevo il seguente errore durante il caricamento del browser web.

Errore: imansible 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 manca qui?

Puoi avere jade include una semplice pagina HTML:

in views / index.jade

 include plain.html 

in views / plain.html

  ... 

e app.js può ancora solo renderizzare jade:

 res.render(index) 

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 syntax alternativa e avvertimenti per Express 3.4+:

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

Quindi puoi fare qualcosa come:

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

Questo presuppone che tu abbia le tue viste nella sottocartella delle views e che tu abbia installato il modulo del nodo ejs . In caso contrario, eseguire quanto segue su una console del nodo:

 npm install ejs --save 

Dalla Guida Express.js: Visualizza Rendering

I nomi dei file di vista assumono la forma Express.ENGINE , dove ENGINE è il nome del modulo che sarà richiesto. Ad esempio la vista layout.ejs dirà al sistema di visualizzazione di require('ejs') , il modulo che si sta caricando deve esportare il metodo exports.render(str, options) per conformarsi a Express, tuttavia è ansible utilizzare app.register() mappare i motori alle estensioni dei file, in modo che ad esempio foo.html possa essere renderizzato da jade.

Quindi puoi creare il tuo semplice renderer o semplicemente usare jade:

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

Ulteriori informazioni su app.register .

Nota che in Express 3 questo metodo viene rinominato app.engine

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

Puoi anche leggere il file html e inviarlo.

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

Se stai usando [email protected]~3.0.0 cambia la riga qui sotto dal tuo esempio:

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

a qualcosa di simile:

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

L’ho realizzato come descritto nella pagina express api e funziona come un incantesimo. Con questa configurazione non è necessario scrivere codice aggiuntivo in modo che diventi abbastanza facile da utilizzare 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') 
 app.get('/', function (req, res) { res.sendfile(__dirname + '/public/index.html'); }); 

Ho anche affrontato lo stesso problema in express 3.X e nel node 0.6.16 . La soluzione indicata sopra non funzionerà con l’ultima versione express 3.x Hanno rimosso il metodo app.register e aggiunto il metodo app.engine . Se hai provato la soluzione di cui sopra potresti finire con 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. (/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. (/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 tua app.configure function

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

Nota: devi installare il motore di template ejs

 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 *.

Se non è necessario utilizzare la directory views , è sufficiente spostare i file html nella directory pubblica sottostante.

e poi aggiungi questa linea in app.configure invece di ‘/ views’.

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

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

    
hello world

produzione:

Ciao mondo

Per il mio progetto ho creato questa struttura:

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

Questo codice serve index.html per / requests e reset.css per /css/reset.css richieste /css/reset.css . 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); 

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 rilascia il tuo file statico nella directory / public. Esempio: /public/index.html

Ho aggiunto sotto la linea 2 e funziona per me

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

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/

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

 app.set('views', __dirname + '/views'); app.engine('html', require('ejs').renderFile); 
  • Devi installare il modulo ejs attraverso npm come:

      npm install ejs --save 

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

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

/ Css / form.html pubblico
/ Css / style.css pubblico

Quindi hai ottenuto il file statico dalla cartella “pubblica”:

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

2)

È ansible creare la cache dei file.
Usa 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"] ); };); 

Stavo provando a configurare un’app angular con un’API RESTful Express e sono atterrato su questa pagina più volte sebbene non fosse utile. Ecco cosa ho trovato 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 nella richiamata per le tue vie API assomiglia a: res.jsonp(users);

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

Il mio percorso di casa è simile a questo:

 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) }); 
 res.sendFile(__dirname + '/public/login.html'); 

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

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

Ecco una demo del file completo del server express!

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

spero che ti aiuti!

 // 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}! `); }); 

Aggiungi le seguenti linee al tuo codice

  1. Sostituisci “jade” con “ejs” e “XYZ” (versione) con “*” nel file package.json

      "dependencies": { "ejs": "*" } 
  2. Quindi, nel tuo file app.js, aggiungi il seguente codice:

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

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

  3. E ricorda Mantieni tutti i file .HTML nella cartella Viste

Saluti 🙂

Volevo consentire che le richieste a “/” venissero gestite da una rotta Express dove precedentemente erano state gestite dal middleware delle statistiche. Ciò mi permetterebbe di rendere la versione normale di index.html o una versione che caricava JS e CSS concatenati + minificati, 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 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.

In server.js, includi

 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('/', function(req, res, next) { res.send(`

My Server

') });

Di solito uso questo

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

Basta fare attenzione perché questo condividerà qualsiasi cosa nella directory / web.

spero possa essere d’aiuto

se stai usando express framework su 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) 

;

rendere la pagina dal modulo export form.js avere il file html nella directory views con estensione del nome del file ejs come form.html.ejs

quindi crea il form.js

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