web-dev-qa-db-ja.com

基本的なHTMLビューをレンダリングしますか？

私はExpressフレームワークを使って開発を始めようとしている基本的なnode.jsアプリを持っています。 index.htmlファイルがあるviewsフォルダーがあります。しかし、Webブラウザをロードすると以下のエラーが出ます。

エラー：モジュール 'html'が見つかりません

以下が私のコードです。

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

私はここで何が足りないのですか？

javascripthtmlnode.jsmongodbexpress
262
aherrick

プレーンなHTMLページをjadeに含めることができます。

views/index.jade内

include plain.html

views/plain.htmlに

<!DOCTYPE html>
...

そしてapp.jsはまだjadeをレンダリングすることができます。

res.render(index)
286
Andrew Homeyer

これらの答えの多くは時代遅れです。

Express 3.0.0および3.1.0を使用すると、次のように動作します。

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

Express 3.4+の代替構文と警告については、以下のコメントを参照してください。

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

その後、次のようなことができます。

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

これは、自分のビューがviewsサブフォルダにあり、ejsノードモジュールがインストール済みであることを前提としています。そうでない場合は、ノードコンソールで次のコマンドを実行します。

npm install ejs --save
216
Drew Noakes

Express.jsガイドから： ビューのレンダリング

ビューのファイル名はExpress.ENGINEの形式を取ります。ここでENGINEは必要となるモジュールの名前です。 たとえば、ビューlayout.ejsはビューシステムにrequire('ejs')にロードし、モジュールはExpressに準拠するにはメソッドexports.render(str, options)をエクスポートする必要があります。ただし、app.register()を使用してエンジンをファイル拡張子にマッピングできます）例えばfoo.htmlはjadeによってレンダリングされます。

ですから、あなたはあなた自身の単純なレンダラを作成するか、単にjadeを使うだけです。

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

その他app.registerについて。

Express 3では、このメソッドは app.engine という名前に変更されています。

70
Ivo Wetzel

これを試して。わたしにはできる。

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

HTMLファイルを読んで送信することもできます。

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

express@~3.0.0 を使用している場合は、例から以下の行を変更してください。

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

このようなものに：

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

express api page に記載されているように作成しましたが、魅力のように機能します。この設定では、追加のコードを書く必要がないので、マイクロプロダクションやテストに使用するのに十分に簡単になります。

以下に示す完全なコード：

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

私はexpress 3.Xとnode 0.6.16でも同じ問題に直面しました。上記の解決策は、最新バージョンのexpress 3.xでは機能しません。彼らはapp.registerメソッドを削除し、app.engineメソッドを追加しました。上記の解決方法を試した場合、次のエラーが発生する可能性があります。

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)

エラーメッセージを取り除くために。次の行をあなたのapp.configure functionに追加してください。

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

注：ejsテンプレートエンジンをインストールする必要があります

npm install -g ejs

例：

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

注： 最も簡単な解決策は、ビューエンジンとしてejsテンプレートを使用することです。生のHTMLを* .ejsビューファイルに書き込むことができます。

14
Jak

フォルダ構造： 

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

出力：

こんにちは世界

7
KARTHIKEYAN.A

views ディレクトリを使用する必要がない場合は、htmlファイルを下の public ディレクトリに移動するだけです。

次に、この行を '/ views'の代わりにapp.configureに追加します。

 server.use（express.static（__ dirname + '/ public'））;
7
spectrum

ノード内のHTMLページをレンダリングするには、以下を試してください。

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

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

  • あなたはejsを通してnpmモジュールをインストールする必要があります：

       npm install ejs --save
5
Trojan

私のプロジェクトでは、この構造を作成しました。

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

このコードは/リクエストにはindex.htmlを、/css/reset.cssリクエストにはreset.cssを提供します。十分に単純で、そして 最良の部分はそれが自動的にキャッシュヘッダを追加するということです 。

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

私は2行の下に追加し、それは私のために働く

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

エクスプレスルートでres.sendFile（）関数を試してください。

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

ここを読んでください： http://codeforgeek.com/2015/01/render-html-file-expressjs/ /

3
Shaikh Shahid

Express 4.0.0では、app.jsで2行コメントアウトするだけです。

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

そして、静的ファイルを/ publicディレクトリにドロップします。例：/public/index.html

3
u84six

単純にHTMLファイルを配信するためにejsに頼ることを望まなかったので、私は単純に小さなレンダラーを自分で書いた：

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）最善の方法は、静的フォルダを設定することです。メインファイル（app.js | server.js | ???）で、

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

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

それからあなたは「パブリック」フォルダから静的ファイルを得ました：

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

2）

ファイルキャッシュを作成することができます。
メソッド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

エクスプレスRESTful APIを使用してAngularアプリをセットアップしようとしていて、このページに何度もアクセスしましたが、役に立ちませんでした。これがうまくいったことがわかりました。

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

それからあなたのAPIルートのためのコールバックでは、次のようになります。res.jsonp(users);

あなたのクライアントサイドフレームワークはルーティングを処理することができます。 ExpressはAPIを提供するためのものです。

私の家のルートはこんな感じです：

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

これはexpress serverの完全なファイルデモです。

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

それがあなたのために役立つことを願っています！

// 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

次の行をコードに追加してください。

  1. Package.jsonファイルで、 "jade"を "ejs"と "X.Y.Z"（バージョン）に "*"に置き換えます。

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

  2. 次に、app.jsファイルに次のコードを追加します。

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

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

  3. また、すべての.HTMLファイルをビューフォルダに保存することを忘れないでください

乾杯:)

1
Amulya Kashyap

Server.jsに、含めてください

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

以前はスタティックミドルウェアで処理されていたExpressルートで、 "/"への要求を処理できるようにしたいと思いました。これにより、アプリケーションの設定に応じて、通常のバージョンのindex.htmlまたは連結+縮小されたJSとCSSをロードしたバージョンをレンダリングできます。 Andrew Homeyer's answer に触発された - 私は自分のHTMLファイルを変更せずにviewsフォルダにドラッグすることにし、Expressをそのように設定した。

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

そしてそのようなルートハンドラを作成しました

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

これはかなりうまくいきました。

0
K. Francis

あなたがその中にすべての内容を持っているHTMLファイルを提供しようとしているなら、それは 'レンダリング'される必要はなく、それは '提供される'必要があります。レンダリングは、ページがブラウザに送信される前にサーバーがコンテンツを更新または挿入するときに発生します。他の回答が示すように、ejsなどの追加の依存関係が必要です。

単にそのリクエストに基づいてブラウザにファイルを送信したい場合は、 res.sendFile（） を使用してください。

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

これにより、express以外に追加の依存関係は必要ありません。サーバーに作成済みのHTMLファイルを送信させたいだけの場合は、上記の方法が非常に軽量です。

0
aleph_one

プレーンHTMLの場合、npmパッケージやミドルウェアは必要ありません

これを使用するだけです：

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