web-dev-qa-db-fra.com

Rendre la vue HTML de base?

J'ai une application de base node.js que j'essaie de mettre en œuvre à l'aide du cadre Express. J'ai un dossier views où j'ai un fichier index.html. Mais je reçois le message d'erreur suivant lors du chargement du navigateur Web.

Erreur: impossible de trouver le module 'html'

Ci-dessous mon code.

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'est-ce que j'oublie ici?

javascripthtmlnode.jsmongodbexpress
269
aherrick

Vous pouvez avoir jade inclure une page HTML simple:

dans views/index.jade

include plain.html

dans views/plain.html

<!DOCTYPE html>
...

et app.js peuvent toujours simplement rendre jade:

res.render(index)
290
Andrew Homeyer

Beaucoup de ces réponses sont obsolètes.

En utilisant express 3.0.0 et 3.1.0, ce qui suit fonctionne:

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

Voir les commentaires ci-dessous pour une syntaxe alternative et des mises en garde pour Express 3.4+:

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

Ensuite, vous pouvez faire quelque chose comme:

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

Cela suppose que vos vues se trouvent dans le sous-dossier views et que vous avez installé le module de nœud ejs. Sinon, exécutez ce qui suit sur une console Node:

npm install ejs --save
220
Drew Noakes

Du guide Express.js: Voir le rend

Les noms de fichiers d’affichage prennent la forme _Express.ENGINE_, où ENGINE est le nom du module requis. Par exemple, la vue _layout.ejs_ informera le système de vues de require('ejs'), le module en cours de chargement Vous devez exporter la méthode exports.render(str, options) pour vous conformer à Express. Toutefois, app.register() peut être utilisé pour mapper les moteurs sur des extensions de fichier, afin que, par exemple, _foo.html_ puisse être restitué par jade.

Donc, soit vous créez votre propre moteur de rendu simple, soit vous utilisez du jade:

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

Plus à propos de _app.register_.

Notez que dans Express 3, cette méthode est renommée app.engine

71
Ivo Wetzel

essaye ça. ça marche pour moi.

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

Vous pouvez également lire le fichier HTML et l’envoyer:

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

Si vous utilisez express@~3.0.0 , modifiez la ligne ci-dessous à partir de votre exemple:

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

à quelque chose comme ça:

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

Je l'ai fait comme décrit sur page express api et cela fonctionne comme un charme. Avec cette configuration, vous n'avez pas à écrire de code supplémentaire, il devient donc assez facile à utiliser pour votre micro-production ou vos tests.

Code complet listé ci-dessous:

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')
18
Mark Karwowski

J'ai également rencontré le même problème dans express 3.X et node 0.6.16. La solution donnée ci-dessus ne fonctionnera pas pour la dernière version express 3.x. Ils ont supprimé la méthode app.register et ajouté la méthode app.engine. Si vous avez essayé la solution ci-dessus, vous risquez de rencontrer l’erreur suivante.

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)

Pour se débarrasser du message d'erreur. Ajoutez la ligne suivante à votre app.configure function

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

Note: vous devez installer le moteur de template ejs

npm install -g ejs

Exemple:

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

Note: La solution la plus simple consiste à utiliser le modèle ejs comme moteur de vue. Là, vous pouvez écrire du HTML brut dans les fichiers d’affichage * .ejs.

14
Jak

structure du dossier:

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

sortie:

bonjour le monde

7
KARTHIKEYAN.A

Si vous n'avez pas à utiliser le répertoire views, déplacez simplement les fichiers HTML dans le répertoire public ci-dessous.

puis ajoutez cette ligne dans app.configure au lieu de '/ vues'.

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

Pour rendre la page HTML dans le noeud, procédez comme suit:

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

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

  • Vous devez installer le module ejs à travers npm comme:

       npm install ejs --save
5
Trojan

Pour mon projet, j'ai créé cette structure:

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

Ce code sert à index.html pour les demandes / et à reset.css pour les demandes /css/reset.css. Assez simple, et la meilleure partie est qu’il ajoute automatiquement des en-têtes de 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);
4
Znarkus

J'ai ajouté ci-dessous 2 lignes et ça marche pour moi

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

Essayez la fonction res.sendFile () dans Express routes.

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

Lire ici: http://codeforgeek.com/2015/01/render-html-file-expressjs/

3
Shaikh Shahid

Avec Express 4.0.0, la seule chose à faire est de commenter 2 lignes dans app.js:

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

Et déposez ensuite votre fichier statique dans le répertoire/public. Exemple: /public/index.html

3
u84six

Je ne voulais pas dépendre d'ejs pour simplement livrer un fichier HTML, alors j'ai tout simplement écrit le moteur de rendu minuscule:

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 );
} );
3
Der Hochstapler

1) Le meilleur moyen est de définir un dossier statique. Dans votre fichier principal (app.js | server.js | ???):

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

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

Ensuite, vous avez un fichier statique du dossier "public":

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

2)

Vous pouvez créer votre cache de fichiers.
Utilisez la méthode 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"] );                                
};);
2
Tomáš
res.sendFile(__dirname + '/public/login.html');
2
himanshu yadav

J'essayais de configurer une application angular avec une API express RESTful et me suis retrouvé plusieurs fois sur cette page, même si cela n'a pas été utile. Voici ce que j'ai trouvé qui a fonctionné:

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

Ensuite, dans le rappel pour vos routes api ressembler à ceci: res.jsonp(users);

Votre infrastructure côté client peut gérer le routage. Express sert à servir l'API.

Mon itinéraire à domicile ressemble à ceci:

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)
});
2
Connor Leech

Voici une démo complète du serveur express!

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

espérons que cela vous aidera! 

// 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}!
    `);
});
2
xgqfrms
app.get('/', function(req, res, next) {
    res.send('<h1>My Server</h1>')
});
1
ofir_aghai

Ajoutez les lignes suivantes à votre code

  1. Remplacez "jade" par "ejs" & "X.Y.Z" (version) par "*" dans le fichier package.json

      "dependencies": {
   "ejs": "*"
  }

  2. Ensuite, dans votre fichier app.js, ajoutez le code suivant:

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

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

  3. Et n'oubliez pas de conserver tous les fichiers .HTML dans le dossier Views

À votre santé :)

1
Amulya Kashyap

Dans server.js, veuillez inclure

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

Je voulais permettre aux demandes de "/" d'être traitées par un itinéraire Express alors qu'elles étaient auparavant traitées par le middleware statique. Cela me permettrait de restituer la version normale de index.html ou une version chargée JS et CSS concaténés + minifiés, en fonction des paramètres de l'application. Inspiré par réponse d'Andrew Homeyer , j'ai décidé de faire glisser mes fichiers HTML (non modifiés) dans un dossier de vues, configurez Express comme suit.

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

Et créé un gestionnaire de route comme si

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

Cela a assez bien fonctionné.

0
K. Francis

Si vous essayez de servir un fichier HTML contenant déjà tout son contenu, il n'a pas besoin d'être "rendu", il a simplement besoin d'être "servi". Le rendu correspond au moment où le serveur met à jour ou injecte le contenu avant que la page ne soit envoyée au navigateur. Des dépendances supplémentaires, telles que ejs, sont nécessaires, comme le montrent les autres réponses.

Si vous voulez simplement diriger le navigateur vers un fichier basé sur sa demande, vous devez utiliser res.sendFile () comme ceci:

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 cette façon, vous n'avez pas besoin de dépendances supplémentaires à part Express. Si vous souhaitez simplement que le serveur envoie vos fichiers HTML déjà créés, la procédure ci-dessus est très simple.

0
aleph_one

Pour le HTML simple, vous n'avez besoin d'aucun paquet ou middleware npm

juste utiliser ceci:

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