2016-05-13 13 views
0

Node.jsとhapi.js.を学び始めました。私が今成し遂げようとしているのは、構成と統計収集のためのWebインターフェイスも必要とするREST Webサーバーを構築することです。複雑なWebページを扱えるHapiJsサーバーを作成する

私は、Inertプラグインが静的なページを提供できることを発見しました。これは私が理解するように、単一のファイルで構成される単一のWebページの読み込みに制限されています。

しかし、理解できないことは、cssjsなどのフルダイナミックウェブページを配信するようにhapi.jsを設定できるかどうかということです。

私はこれで間違った方向を向いていますか、そうでなければ私のシナリオをどのようにセットアップできますか?

+1

テンプレートからHTMLを動的にレンダリングのためのビジョンを見てください。 CSSやJSは、通常は静的なファイルなので、Inertを使用して配信することができます。 –

答えて

1

指定されたディレクトリから複数の静的ファイルを提供できます。

は、ちょうどこの例を使用して、hapiinertを試してみた:

https://github.com/hapijs/inert#static-file-server

不活性は、指定されたディレクトリから複数の静的ファイルを提供する何の問題、例えばpublicを持っていません。

したがって、指定したディレクトリから複数の静的なhtml、css、jsファイルを配信することはありません。その後、Hapiを使用して動的JSON APIを構築し、jsクライアント側のコードで消費し、パブリックディレクトリの静的なjsファイルから処理することができます。

あなたはサーバーサイドで動的なコンテンツを生成するテンプレートを、必要としている場合は、HAPIは、箱から出してそれを行うことができますチェックアウト:

http://hapijs.com/tutorials/views

申し訳ありませんが、これはあなたが何を意味するかではない場合、そうでない場合は明確にしてください:-)

希望に役立ちます!

1

visionプラグインはテンプレート作成に使用されています。これは私があなたが思っているものです。 cssファイルとjsファイルをページと共にバンドルしたい場合は、それらを公開ディレクトリに入れて、inert pluginで提供することができます。そして、レンダリングしようとしているどのhtmlファイルでも相対パスを参照するだけで済みます。

ここには、handlebarsを使用した簡単な例があります。 Inertはcssファイルとjsファイルを提供し、ビジョンはテンプレートをレンダリングします。

./index.js

var hapi = require('hapi'); 

var server = new hapi.Server(); 
server.connection({port: 5555}); 

server.register([require('vision'), require('inert')], (err) => { 
    if(err){ 
     throw err; 
    } 

    server.views({ 
     engines: { 
      html: require('handlebars') 
     }, 
     relativeTo: __dirname + '/', 
     path: 'www' 
    }); 

    var homeroute = { 
     method: 'GET', 
     path: '/', 
     handler: (request, reply) => { 
      reply.view('index', {name: 'cuthbert'}); 
     } 
    }; 

    var publicassetsroute = { 
     method: 'GET', 
     path: '/public/{param*}', 
     handler: { 
      directory: { 
       path: './public', 
       listing: false, 
       index: false 
      } 
     } 
    }; 

    server.route(homeroute); 
    server.route(publicassetsroute); 

    server.start((err) => { 
     console.log('server started -- ' + server.info.uri) 
    }); 

}); 

www/index.html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Hapi Test</title> 
    <link rel="stylesheet" href="../public/index.css"> 
</head> 
<body> 
    <h1>A Hapi Happy Test.</h1> 
    <p>This is a test page. Woo!</p> 
    <p>My name is {{name}}.</p> 
</body> 
</html> 

public/index.css

p { 
    color: blue; 
} 
関連する問題