Expressフレームワークを使用して基本的なnode.jsアプリを作成しようとしています。ファイルがあるviewsフォルダがありindex.htmlます。しかし、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')ここで何が欠けていますか？
回答:
jadeにプレーンHTMLページを含めることができます。
views / index.jade
include plain.htmlviews / plain.html
<!DOCTYPE html>
...そしてapp.jsはまだjadeをレンダリングすることができます：
res.render(index)これらの回答の多くは古くなっています。
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 --saveExpress.jsガイドから：レンダリングの表示
ビューのファイル名はの形式をとります
Express.ENGINE。ここで、ENGINEは必要なモジュールの名前です。たとえば、ビューlayout.ejsはビューシステムにを指示します。require('ejs')ロードされるモジュールは、Expressに準拠するようにメソッドexports.render(str, options)をエクスポートする必要がありますが、app.register()エンジンをファイル拡張子にマップするために使用できるため、たとえばfoo.htmljadeでレンダリングできます。
したがって、独自のシンプルなレンダラーを作成するか、単にjadeを使用します。
app.register('.html', require('jade'));詳細についてapp.register。
Express 3では、このメソッドの名前が変更されていることに注意してください
app.engine
app.engine('.html', require('ejs').renderFile);
HTMLファイルを読み取って送信することもできます。
app.get('/', (req, res) => {
fs.readFile(__dirname + '/public/index.html', 'utf8', (err, text) => {
res.send(text);
});
});これを試して。わたしにはできる。
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");
});app.registerます。多分それはExpress 3.0.0.rc3で非推奨ですか？TypeError: Object function app(req, res){ app.handle(req, res); } has no method 'register'
app.get('/', function (req, res) {
res.sendfile(__dirname + '/public/index.html');
});express@~3.0.0を使用している場合は、例から以下の行を変更してください。
app.use(express.staticProvider(__dirname + '/public'));このようなものに：
app.set("view options", {layout: false});
app.use(express.static(__dirname + '/public'));私はExpress APIページで説明されているように作成しましたが、それは魅力のように機能します。この設定を使用すると、追加のコードを記述する必要がないため、マイクロ製品やテストで使用するのが簡単になります。
以下に記載されている完全なコード：
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.use(express.static(__dirname + '/public'));サーバーを起動した後、なぜ繰り返すのapp.listenですか？
私も同じ問題に直面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ビューファイルに書き込むことができます。
ejsグローバルにインストールする必要がありますか？
フォルダー構造：
.
├── index.html
├── node_modules
│ ├──{...}
└── server.jsserver.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>出力：
こんにちは世界
私のプロジェクトでは、次の構造を作成しました。
index.js
css/
reset.css
html/
index.htmlこのコードは、/リクエストにはindex.htmlを提供し、リクエストにはreset.cssを提供し/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);1）最良の方法は、静的フォルダーを設定することです。メインファイル（app.js | server.js | ???）：
app.use(express.static(path.join(__dirname, 'public')));public / css / form.html
public / css / style.css
次に、「public」フォルダーから静的ファイルを取得します。
http://YOUR_DOMAIN/form.html
http://YOUR_DOMAIN/css/style.css2）
ファイルキャッシュを作成できます。
メソッド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行以下を追加しました、そしてそれは私のために働きます
app.set('view engine', 'html');
app.engine('html', require('ejs').renderFile);npm install ejs --saveは作業ディレクトリで実行されます。
Expressルートで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/
単に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 );
} );便利な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)
});エクスプレスサーバーの完全なファイルデモはこちらです！
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}!
`);
});コードに次の行を追加します
package.jsonファイルの「jade」を「ejs」と「XYZ」（バージョン）で「*」に置き換えます
"dependencies": {
"ejs": "*"
}次に、app.jsファイルに次のコードを追加します。
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');
また、ビューフォルダーにすべての.HTMLファイルを保存することを忘れないでください
乾杯:)
オブジェクトのsendFileメソッドを使用せずにHTMLページをレンダリングする方法がまだ追加されていない2020年頃であるのは非常に悲しいことresponseです。使用sendFileは問題ではありませんが、引数をの形式で渡すことはpath.join(__dirname, 'relative/path/to/file')正しくありません。ユーザー__dirnameがファイルパスに参加する必要があるのはなぜですか？デフォルトで実行する必要があります。サーバーのルートをプロジェクトディレクトリのデフォルトにできないのはなぜですか？また、静的HTMLファイルをレンダリングするためだけにテンプレート依存関係をインストールすることも、正しくありません。この問題に対処する正しい方法はわかりませんが、静的HTMLを提供する必要がある場合は、次のようにします。
const PORT = 8154;
const express = require('express');
const app = express();
app.use(express.static('views'));
app.listen(PORT, () => {
console.log(`Server is listening at port http://localhost:${PORT}`);
});上記の例では、プロジェクト構造にviewsディレクトリがあり、静的HTMLファイルがその中にあると想定しています。たとえば、みましょうと言うが、viewsディレクトリはという名前の2つのHTMLファイルを持っているindex.htmlとabout.html、アクセス彼らに、私たちが訪問することができますlocalhost:8153/index.htmlまたは単にlocalhost:8153/ロードするためindex.htmlのページをしてlocalhost:8153/about.htmlロードすることabout.html。同様のアプローチを使用して、アーティファクトをviewsディレクトリに格納するか、デフォルトのdist/<project-name>ディレクトリを使用してサーバーjsで次のように構成することにより、react / angularアプリを提供できます。
app.use(express.static('dist/<project-name>'));「/」へのリクエストを、以前は静的ミドルウェアで処理されていたExpressルートで処理できるようにしたいと思いました。これにより、アプリケーションの設定に応じて、index.htmlの通常バージョンまたは連結+縮小されたJSおよびCSSをロードしたバージョンをレンダリングできます。Andrew Homeyerの回答に触発されて、私は自分のHTMLファイルを変更せずにビューフォルダーにドラッグし、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');
});これはかなりうまくいきました。
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.
});既にすべてのコンテンツが含まれている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));この方法では、エクスプレス以外の追加の依存関係は必要ありません。サーバーにすでに作成されたhtmlファイルを送信させたいだけの場合、上記は非常に軽量な方法です。
index.js
var express = require('express');
var app = express();
app.use(express.static(__dirname + '/public'));
app.get('/', function(req, res) {
res.render('index.html');
});
app.listen(3400, () => {
console.log('Server is running at port 3400');
})index.htmlファイルをパブリックフォルダーに配置します
<!DOCTYPE html>
<html>
<head>
<title>Render index html file</title>
</head>
<body>
<h1> I am from public/index.html </h1>
</body>
</html>端末で次のコードを実行します
ノードindex.js
node.jsに高速フレームワークを使用している場合
npm ejsをインストールする
次に設定ファイルを追加します
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);
エクスポートモジュールform.jsからページをレンダリングし、ビューdirにhtmlファイルとejsファイル名の拡張子を付けます。
form.html.ejs
次にform.jsを作成します
res.render('form.html.ejs');