CODEWITHSUNDEEP
node.jsresthapi.js
eYe
eYe

Reputation: 1733

Creating HapiJs server that can serve complex web pages

I have just started learning Node.js and hapi.js. What I am trying to accomplish now is build a REST web server that should also have a web interface for configuration and statistics collection.

I found that Inert plugin allows serving static pages and, as I understand, this limits me to loading a single web page that consists of a single file.

However, what I do not understand is whether it is possible to setup hapi.js to serve a full dynamic webpage with css, js and other files referenced within its body.

Am I heading the wrong direction with this or else how can I setup my scenario?

Upvotes: 0

Views: 782

Answers (2)

Cuthbert
Cuthbert

Reputation: 2998

The vision plugin is used for templating, which is what I think you're after. If you want to bundle css and js files along with your pages, you can put them in a public directory and serve that with the inert plugin. And then you only need to reference the relative path in whatever html file you're trying to render.

Here's a simple example that uses handlebars. Inert is responsible for serving your css and js files while vision still renders your templates.

./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;
}

Upvotes: 1

peregrine42
peregrine42

Reputation: 341

You can serve multiple static files from a specified directory.

Just tried out inert with hapi, using this example:

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

Inert has no problem serving multiple static files from a given directory, e.g public.

So you'll have no issue serving multiple static html, css, js files from a specified dir. You can then build a dynamic JSON api using Hapi, and have that consumed by your js client-side code, served from static js files in your public dir.

If you are needing templating, where you generate dynamic content on the serverside, hapi can do that out of the box, check out:

http://hapijs.com/tutorials/views

Sorry if this isn't what you mean, do feel free to clarify if not :-)

Hope that helps!

Upvotes: 1

Related Questions