Render visualizzazione HTML di base?

https://stackoverflow.com/questions/4529586

13-10-2019
|

Domanda

Ho un app node.js base che sto cercando di scendere a terra utilizzando il framework Express. Ho una cartella in cui views Ho un file index.html. Ma ricevo il seguente errore durante il caricamento del browser web.

Errore: Impossibile trovare il modulo 'html'

Di seguito è riportato 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')

Che cosa mi manca qui?

Soluzione

È possibile avere giada includono una pagina HTML semplice:

in vista / index.jade

include plain.html

in vista / plain.html

<!DOCTYPE html>
...

e app.js possono ancora solo il rendering di giada:

res.render(index)

Altri suggerimenti

Molte di queste risposte non sono aggiornate.

Utilizzando Express 3.0.0 e 3.1.0, le seguenti opere:

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

Vedere commenti qui sotto per sintassi alternativa e avvertenze per Express 3.4 +:

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

Poi si può fare qualcosa di simile:

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

Questo presuppone che le vostre opinioni nella sottocartella views, e che sia stato installato il modulo nodo ejs. In caso contrario, eseguire il seguente su una console nodo:

npm install ejs --save

Dalla Guida Express.js: View rendering

Visualizza i nomi dei file assumere la forma Express.ENGINE, dove ENGINE è il nome del modulo che sarà richiesto. Per esempio il layout.ejs vista dirà il sistema al fine di require('ejs') , il modulo viene caricato deve esportare il metodo exports.render(str, options) di osservare le Express, tuttavia app.register() può essere utilizzato per mappare i motori a le estensioni dei file, in modo che, per esempio foo.html può essere reso da giada.

Quindi, o si crea il proprio semplice renderer o basta usare giada:

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

informazioni su app.register.

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

provare questo. funziona per me.

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

Si potrebbe anche leggere il file HTML e inviarlo:

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

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

Se stai usando express@~3.0.0 modificare la riga in basso dal vostro 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 fatta come descritto a esprimono api pagina e funziona come fascino. Con l'installazione che non è necessario scrivere codice aggiuntivo per cui diventa abbastanza facile da usare per il vostro micro produzione o di 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')

Ho anche affrontato lo stesso problema in express 3.X e node 0.6.16. Quanto sopra determinata soluzione non funziona per la versione più recente express 3.x. Hanno tolto il metodo app.register e metodo app.engine aggiunto. Se si è tentato la soluzione di cui sopra si può 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.<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. Aggiungere la seguente riga al vostro app.configure function

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

Nota: è necessario installare template engine 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 è quella di utilizzare ejs modello come motore di visualizzazione. Ci si può scrivere codice HTML grezzo in .ejs * visualizzare i file.

Se non si dispone di utilizzare le viste di directory, è sufficiente spostare file HTML per il pubblico directory di seguito.

e poi, aggiungere questa linea in app.configure invece di '/ viste.

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

struttura di 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>

uscita:

ciao mondo

Per rendere la pagina HTML nel nodo di provare quanto segue,

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

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

È necessario installare il modulo ejs attraverso npm come:
```
   npm install ejs --save
```

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 richieste /css/reset.css. Abbastanza semplice, e la parte migliore è che si aggiunge automaticamente la cache intestazioni .

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 espresso 4.0.0, l'unica cosa che dovete fare è commentare le 2 linee in app.js:

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

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

ho aggiunto sotto di 2 linee e il lavoro per me

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

Prova res.sendFile () in percorsi 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 /

non volevo dipendere da ejs semplicemente per fornire un file HTML, così ho semplicemente scritto la piccola renderer me stesso:

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

1) Il modo migliore è quello di cartella statica set. Nel file principale (app.js | server.js | ???):

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

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

Poi hai file statici dalla cartella "pubblico":

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

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

Stavo provando ad installare un app angolare con un espresso RESTful API ed è atterrato in questa pagina più volte anche se non era disponibile. Ecco quello che 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'));
});

Poi nel callback per i vostri itinerari API assomigliare: res.jsonp(users);

Il quadro lato client in grado di gestire il routing. Express è per servire l'API.

il mio percorso casa assomiglia 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');

Ecco un file demo completa di Server Express!

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

spero che vi aiuterà per voi!

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

aggiungere le seguenti righe al tuo codice

Sostituire "giada" con "ejs" e "X.Y.Z" (versione) con "*" nel file package.json
```
  "dependencies": {
   "ejs": "*"
  }
```
Poi, nel tuo file app.js Aggiungere seguente codice:

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

app.set('view engine', 'html');
E ricordate Mantenere i file Tutti .HTML in vista delle cartelle

Saluti:)

ho voluto per consentire le richieste a "/" per essere gestito da un percorso espresso dove in precedenza erano state svolte dalla statica Middleware. Questo mi avrebbe permesso di rendere la versione regolare di index.html o una versione che ha caricato concatenato + minified JS e CSS, a seconda delle impostazioni dell'applicazione. Ispirato di ??Andrew Homeyer risposta , ho deciso di trascinare i file HTML - non modificato - in una cartella di vista, configura espresso in questo modo

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

E ha creato un gestore di rotta 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, 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.
});

Se si sta tentando di servire un file HTML che ha già tutto il suo contenuto al suo interno, allora non ha bisogno di essere 'resa', ha solo bisogno di essere 'servito'. Il rendering è quando si ha l'aggiornamento del server o il contenuto Iniettare prima che la pagina viene inviato al browser, e richiede ulteriori dipendenze come ejs, come le altre risposte mostrano.

Se si vuole semplicemente indirizzare il browser a un file in base alla loro richiesta, è necessario utilizzare 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 è necessario ulteriori dipendenze oltre espresso. Se si desidera solo che il server di inviare le vostre file HTML già creato, quanto sopra è un modo molto leggero per farlo.

Per html pianura non si richiede alcun pacchetto NPM o middleware

basta usare questo:

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

index.js

var = espressi richiedono ( 'esprimere'); var app = esprimono (); app.use (express.static (__ dirname + '/ pubblico'));

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


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

Inserire il 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 eseguire il seguente codice nel tuo terminale

nodo index.js

Io di solito uso questo

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

Basta essere attenti perché condividerò nulla nella directory / web.

Spero che aiuta

se si utilizza quadro Express per node.js

installare NPM ejs

quindi aggiungere 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)

;

il rendering della pagina da form.js modulo esportazioni avere il file HTML nella vista dir con l'estensione del nome del file ejs come form.html.ejs

quindi creare le form.js

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

Autorizzato sotto: CC-BY-SA insieme a attribuzione

Non affiliato a StackOverflow