Hapi.js views not loading css files

Question

I have an issue to link my app.css file to my default.html view using hapijs and handlebars.js . I use Cloud9 for hosting.

Here is my app structure:

root/
   client/
      config/
         route.js
      css/
         app.css
      view/
         layout/
            default.html
         index.html
server.js

My server.js

'use strict';

const Hapi      = require('hapi');
const Vision    = require('vision');
const Inert     = require('inert');
const Path      = require('path');
const Routes    = require('./client/config/route')

const server = new Hapi.Server();

server.connection({
    host: process.env.IP || '0.0.0.0',
    port: process.env.PORT || 3000
});

server.register([Vision, Inert], (err) => {
    if (err) {
        throw err;
    }

    server.views({
        engines: {
            html: require('handlebars')
        },
        relativeTo: Path.join(__dirname, 'client'),
        path: 'views',
        layoutPath: 'views/layouts',
        layout: 'default', // true
        partialsPath: 'views/partials'
    });

    server.route(Routes);
});

server.start(() => {
    console.log('Server started at: ' + server.info.uri);
});

My route.js :

const Path  = require('path');

const routes = [
    {
        method: 'GET',
        path: '/{param*}',
        handler: {
            directory: {
                path: Path.join(__dirname, 'client'),
                listing: false,
                index: false
            }
        }
    },
    {
        method: 'GET',
        path: '/',
        handler: (req, rep) => {

            let data = { };                
            rep.view('index', data);
        }
    }
];

module.exports = routes;

My default.html :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8" />
        <title>Title</title>
        <link rel="stylesheet" href="../../css/app.css" />
    </head>
    <body>
        {{{content}}}
    </body>
</html>

My index.html :

<p id="paragraph"><p>

The issue is that my app.css doesn't load. I have followed this advice and this one but it still doesn't work and I don't know what to check next.

Answer 1

You can write a separate route to serve your resources files

if css and js folder inside resources folder then

server.route({
path: "/resources/{path*}",
method: "GET",
handler: {
    directory: {
        path: "./resources",
        listing: false,
        index: false
    }
}});

this route will serve you static contents and then you can add these files in your html file.

<link rel="stylesheet" href="resources/css/main.css" />

for more ref check it http://jaskokoyn.com/2014/07/28/views-node-js-tutorial-beginners/

Answer 2

试试这个<link rel="stylesheet" href="/css/app.css" />

Answer 3

as Gene Diaz told you:

put this right in your head section of default.html

<link rel="stylesheet" type="text/css" link="your_file_name.css"/>

Hapi.js views not loading css files

Question

3 answers

solution1
5 2016-09-30 07:32:59

solution2
0 2016-08-29 01:31:07

solution3
0 2016-08-29 01:36:08

Hapi.js views not loading css files

Question

3 answers

solution1 5 2016-09-30 07:32:59

solution2 0 2016-08-29 01:31:07

solution3 0 2016-08-29 01:36:08

solution1
5 2016-09-30 07:32:59

solution2
0 2016-08-29 01:31:07

solution3
0 2016-08-29 01:36:08