Afficher une vue HTML de base?

J’ai une application node.js basique que j’essaie de démarrer avec Express Framework. J’ai un dossier de views où j’ai un fichier index.html . Mais je reçois l’erreur suivante lors du chargement du navigateur Web.

Erreur: Impossible de trouver le module ‘html’

Voici 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?

Vous pouvez avoir jade inclure une page HTML simple:

dans views / index.jade

 include plain.html 

dans views / plain.html

  ... 

et app.js peuvent toujours rendre jade:

 res.render(index) 

Beaucoup de ces réponses sont obsolètes.

En utilisant express 3.0.0 et 3.1.0, les travaux suivants:

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

Voir les commentaires ci-dessous pour une syntaxe alternative et des avertissements 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 vous ayez vos vues dans le sous-dossier views et que vous avez installé le module de noeud ejs . Sinon, exécutez la commande suivante sur une console de noeud:

 npm install ejs --save 

A partir du Guide Express.js: Afficher le rendu

Voir les noms de fichiers sous la forme Express.ENGINE , où ENGINE est le nom du module qui sera requirejs. Par exemple, la vue layout.ejs indiquera au système de vue de require('ejs') , le module en cours de chargement doit exporter la méthode exports.render(str, options) pour se conformer à Express, cependant app.register() peut être utilisé pour mapper les moteurs aux extensions de fichiers, de sorte que, par exemple, foo.html puisse être rendu par jade.

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

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

En savoir plus sur app.register .

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

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', { comstack: function(str, options){ return function(locals){ return str; }; } }); }); .... app.get('/', function(req, res){ res.render("index.html"); }); 

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

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

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 la page api express et cela fonctionne comme du charme. Avec cette configuration, vous n’avez pas besoin d’écrire du code supplémentaire pour qu’il soit 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') 
 app.get('/', function (req, res) { res.sendfile(__dirname + '/public/index.html'); }); 

J’ai également rencontré le même problème dans express 3.X et le 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 pouvez vous retrouver avec 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. (/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._comstack (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"); }); 

Remarque: La solution la plus simple consiste à utiliser le modèle ejs comme moteur de vue. Vous pouvez y écrire du HTML brut dans les fichiers de vue * .ejs.

Si vous ne devez 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 ‘/ views’.

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

structure de 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

    
hello world

sortie:

Bonjour le monde

Pour mon projet j’ai créé cette structure:

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

Ce code sert à index.html pour / Demand et à reset.css pour les requêtes /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); 

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 puis déposez votre fichier statique dans le répertoire / public. Exemple: /public/index.html

J’ai ajouté en dessous de 2 lignes et ça marche pour moi

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

Essayez la fonction res.sendFile () dans les itinéraires 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"); 

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

Pour rendre la page HTML dans le noeud, essayez ce qui suit,

 app.set('views', __dirname + '/views'); app.engine('html', require('ejs').renderFile); 
  • Vous devez installer le module ejs via npm comme:

      npm install ejs --save 

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

J’essayais de mettre en place une application angular avec une API RESTful express et j’ai atterri plusieurs fois sur cette page, mais 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, ressemblez à: res.jsonp(users);

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

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

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

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

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

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

j’espère 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}! `); }); 

Ajoutez les lignes suivantes à votre code

  1. Remplacez “jade” par “ejs” et “XYZ” (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 les dossiers

À votre santé 🙂

Je voulais permettre que les requêtes “/” soient traitées par un itinéraire Express, où auparavant elles étaient gérées par le middleware Statics. Cela me permettrait de rendre la version régulière de index.html ou une version chargée de JS et CSS miniaturisés + concaténés, en fonction des parameters de l’application. Inspiré par la réponse d’Andrew Homeyer , j’ai décidé de faire glisser mes fichiers HTML – non modifiés – dans un dossier de vues, de configurer Express comme ça

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

Et créé un gestionnaire de route comme ça

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

Cela a bien fonctionné.

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

My Server

') });

J’utilise habituellement ceci

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

Faites juste attention car cela partagera n’importe quoi dans le répertoire / web.

J’espère que ça aide

si vous utilisez un framework express pour node.js

installer npm ejs

puis ajoutez le fichier de configuration

 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) 

;

rendre la page du module d’export form.js a le fichier html dans le répertoire de vues avec l’extension du nom de fichier form.html.ejs comme form.html.ejs

puis créez le formulaire.js

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