Zoltán Schmidt Zoltán Schmidt - 1 month ago 15
Node.js Question

Unable to attach any file to an HTML

Based on the tutorials I tried to set up a basic server in NodeJS via HapiJS.

The initialization looks like this:

//globals
mainAddr = "MoriMachine";
mainPort = 3000;

require('./backend/app.js')


This is the content of app.js:

const Hapi = require('hapi');
const server = new Hapi.Server();

server.connection({host: mainAddr, port: mainPort });
server.register(require('inert'), (err) => {
if (err) { throw err; }
server.route({
method: 'GET',
path: '/',
handler: function (request, reply) {
reply.file('./public/index/index.html');
}
});
});

server.start((err) => {
if (err) { throw err; }
console.log(`Server running at: ${server.info.uri}`);
});


While index.html is similarly small:

<!DOCTYPE html>
<html>
<head>
<script src="index.js"></script>
</head>
<body>
<h1>HELLO WORLD!! -3-</h1>
<img src="test.jpg"></img>
</body>
</html>


In the project itself, there are init.js and three folders:


  • node_modules: for obvious reasons

  • backend: contains app.js

  • public: contains folder 'index' that contains the HTML, and the JS and the picture I tried to attach.



The problem is that whatever path I try, when I run the server, neither the JS or the picture are found.

What is the reason? An I missing to add some additional functionality?

Answer

The reason is that you only got one route that serves one specific file. When you access the route '/' your browser tries to access '/index.js' and '/test.jpg' and you are not responding to these routes.

One way to do is is to serve everything in your public directory, like this:

server.route({
    method: 'GET',
    path: '/{param*}',
    handler: {
        directory: {
            path: 'public'
        }
    }
});

Now your index.js is accessible trough /index/index.js and your image is accessible trough /index/test.jpg

so make these changes to your html

        <!DOCTYPE html>
        <html>
            <head>
                <script src="/index/index.js"></script>
            </head>
            <body>
            <h1>HELLO WORLD!! -3-</h1>
                <img src="/index/test.jpg"></img>
            </body>
        </html>

Note that in this way your index.html is also accessible trough /index/index.html

for more detaisl look at: http://hapijs.com/tutorials/serving-files?lang=en_US#directory-handler

Comments