Render vista básica en HTML?

https://stackoverflow.com/questions/4529586

13-10-2019
|

Pregunta

Tengo una aplicación básica Node.js que yo estoy tratando de conseguir de la tierra utilizando el framework Express. Tengo una carpeta views donde tengo un archivo index.html. Pero recibo el siguiente error al cargar el navegador web.

Error: No se puede encontrar el módulo 'html'

A continuación se muestra el código.

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

¿Qué me estoy perdiendo aquí?

Solución

Puede tener jade incluyen una página HTML plano:

en vistas / index.jade

include plain.html

en vistas / plain.html

<!DOCTYPE html>
...

y app.js todavía puede simplemente hacer que el jade:

res.render(index)

Otros consejos

Muchas de estas respuestas están fuera de fecha.

El uso expreso 3.0.0 y 3.1.0, las siguientes obras:

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

Ver los comentarios a continuación para sintaxis alternativa y advertencias de Express 3.4 +:

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

A continuación, puede hacer algo como:

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

Esto supone que tiene su punto de vista en la subcarpeta views, y que se ha instalado el módulo de nodo ejs. Si no es así, ejecute lo siguiente en una consola de nodo:

npm install ejs --save

A partir de la Guía Express.js: la representación de vista

Ver nombres de archivo tomar la forma Express.ENGINE, donde ENGINE es el nombre del módulo que será requerida. Por ejemplo la vista layout.ejs le dirá al sistema de visión para require('ejs') , el módulo se carga debe exportar el método exports.render(str, options) para cumplir con Express, sin embargo app.register() puede usarse para mapear los motores de extensiones de archivo, de modo que, por ejemplo, foo.html se puede representar por el jade.

Así que, o crear su propio procesador simple o sólo tiene que utilizar el jade:

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

Más sobre app.register.

Tenga en cuenta que en Express 3, este método se cambia el nombre app.engine

Probar. funciona para mí.

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

También puede leer el archivo HTML y enviarlo:

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

Si utiliza express@~3.0.0 cambiar la línea por debajo de su ejemplo:

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

a algo como esto:

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

Lo hice como se describe en expresan página de la API y funciona como encanto. Con esa configuración no tiene que escribir código adicional por lo que llega a ser bastante fácil de usar para su producción o pruebas de micro.

código completo se enumeran a continuación:

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

También se enfrentó al mismo problema en express 3.X y node 0.6.16. La anterior solución dada no va a funcionar para la versión más reciente express 3.x. Se quitaron el método app.register y método app.engine añadido. Si se trató la solución anterior se puede terminar con el siguiente error.

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)

Para deshacerse del mensaje de error. Agregue la siguiente línea a su app.configure function

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

Nota: usted tiene que instalar el motor de plantillas ejs

npm install -g ejs

Ejemplo:

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 solución más sencilla es utilizar ejs plantilla como punto de vista motor. No se puede escribir en HTML puro * .ejs ver los archivos.

Si usted no tiene que usar los puntos de vista directorio, basta con mover los archivos HTML a la público directorio de abajo.

y, a continuación, añadir esta línea en app.configure en lugar de '' / puntos de vista.

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

estructura de carpetas:

.
├── 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>

salida:

hola mundo

para mostrar la página HTML en el nodo intente lo siguiente:

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

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

Es necesario instalar el módulo ejs través npm como:
```
   npm install ejs --save
```

Para mi proyecto he creado esta estructura:

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

Este código sirve para solicitudes index.html / y reset.css para solicitudes /css/reset.css. Bastante simple, y lo mejor de todo es que añade automáticamente caché encabezados .

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, lo único que tiene que hacer es comente 2 líneas en app.js:

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

Y luego soltar el archivo estático en el directorio / pública. Ejemplo: /public/index.html

He añadido por debajo del 2 de línea y que funcione para mí

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

Trate res.sendFile () en rutas 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");

Lea aquí: http://codeforgeek.com/2015/01/ render-html-file-expressjs /

Yo no quiero depender de ejs por el simple hecho entrega de un archivo HTML, por lo que simplemente escribí el pequeño procesador de mí mismo:

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) La mejor forma de hacerlo es estática carpeta conjunto. En el archivo principal (app.js | server.js | ???):

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

pública / css / form.html
pública / css / style.css

A continuación, tienes archivos estáticos de la carpeta "público":

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

Se puede crear su caché de archivos.
El uso del método 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"] );                                
};);

Yo estaba tratando de establecer una aplicación angular con una API REST expresan y aterrizó en esta página varias veces aunque no era útil. Esto es lo que encontré que trabajó:

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

A continuación, en la devolución de llamada para sus rutas api parezca: res.jsonp(users);

Su marco lado del cliente puede manejar el enrutamiento. Express es para servir a la API.

Mi ruta inicio será similar a:

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

He aquí una demostración completa del archivo del servidor expreso!

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

Esperamos que le ayude para usted!

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

Añada las siguientes líneas a su código

Reemplazar "jade" con "ejs" y "x.y.z" (versión) con "*" en el archivo package.json
```
  "dependencies": {
   "ejs": "*"
  }
```
Luego, en su Archivo app.js Añadir siguiente código:

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

app.set('view engine', 'html');
Y Recuerde Mantener los archivos .HTML Todas las vistas de carpetas

Saludos:)

quería permitir solicitudes a "/" para ser manejado por una vía expreso, donde previamente habían sido manejados por la estática middleware. Esto me permitiría para hacer que la versión normal de index.html o una versión que cargan concatena + minified JS y CSS, dependiendo de la configuración de la aplicación. Inspirado por el ??Andrew Homeyer respuesta , decidí arrastrar los archivos HTML - sin modificar - en unas vistas de carpetas, configurar expreso como el modo

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

Y creado un controlador de ruta como tal

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

Esto funcionó bastante bien.

En server.js, por favor incluya

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

Si usted está tratando de servir a un archivo HTML que ya tiene todo su contenido en su interior, entonces no necesita ser 'prestado', que sólo tiene que ser 'servido'. Renderizado es cuando se tiene la actualización del servidor o el contenido de inyección antes de la página se envía al navegador, y requiere dependencias adicionales como ejs, como las otras respuestas muestran.

Si simplemente desea dirigir el navegador a un archivo en función de su solicitud, usted debe utilizar res.sendFile () así:

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

De esta manera no es necesario dependencias adicionales además expresa. Si lo que desea es que el servidor envíe sus archivos html ya creados, lo anterior es una forma muy ligera para hacerlo.

Para HTML plano que no requieren ningún paquete de NPM o middleware

sólo tiene que utilizar esto:

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

index.js

var expresas = require ( 'expresar'); app var = expresan (); app.use (express.static (__ nombredir + '/ pública'));

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


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

Ponga su archivo index.html en la carpeta pública

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

Ahora ejecute el siguiente código en su terminal

nodo index.js

Yo suelo usar este

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

Sólo tenga cuidado porque a compartir cualquier cosa en el directorio / web.

espero que ayude

si está utilizando marco expreso para Node.js

instalar NPM ejs

a continuación, añadir el archivo de configuración

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)

;

representar la página de form.js módulo de exportaciones tener el archivo html en el vistas dir con la extensión del nombre del archivo como ejs form.html.ejs

a continuación, crear los form.js

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

Licenciado bajo: CC-BY-SA con atribución

No afiliado a StackOverflow