Sending whole folder content to client with express

Question

I made an html5 game (using GameMaker), which is constituted of an index.html and a folder "html5game" that contains the dependencies of the game - the javascript code and the resources. The problem is the resources are quite numerous and diverse (sounds, sprites, etc.) and The client needs them all to play.

I am looking for a way to send them all without naming them specifically.

I tried the glob module :

var glob = require( 'glob' );    

var files = glob.sync( './html5game/**' ).forEach( function( file ) {
      require( path.resolve( file ) );
});

but I can't figure a way to send the files using res.sendFile() once I did that.

I tried

var express = require('express');
var app = express();   

[...]

app.get('/aeronavale/jeu', function(req, res){
        res.sendFile(__dirname + '/aeronavale/index.html');
        res.sendFile(files)

});

[...]

app.listen(3000, function(){
    console.log('app started on port 3000, yeah !')
})

but it gives me the error :

TypeError: path argument is required to res.sendFile

If you have an other solution, I a also interested. Thanks for your answers !

Answer 1

You will not be able to send multiple file like that with res.sendFile. The most straightforward thing that you can do here would be this:

Put your index.html file and your html5game directory into some common directory, e.g. called html and put it where you have your Node.js program. An example directory layout would be:

/home/you/yourapp:
- app.js (your node program)
- package.json (your package.json etc)
- html (a new directory)
  - index.html (your main html to serve)
  - html5game (the directory with other files)
    - (other files)

Now, in your Node program you can use something like this:

var path = require('path');
var express = require('express');
var app = express();

var htmlPath = path.join(__dirname, 'html');

app.use(express.static(htmlPath));

var server = app.listen(3000, function () {
    var host = 'localhost';
    var port = server.address().port;
    console.log('listening on http://'+host+':'+port+'/');
});

This will serve all of your files (including index.html) on addresses like:

• http://localhost:3000/ (your index.html)
• http://localhost:3000/html5game/xxx.js (your assets)

Of course you still need to make sure that you refer to your assets in your index.html file correctly, for example with:

<script src="/html5game/xxx.js"></script>

in the case of the example layout above.

The top level directory with your static assets (where you have your index.html) is usually called static, public or html but you can call it whatever you like, as long as you use the correct path in your call to express.static().

If you want to have your game available in some path other than the root path then you can specify it to app.use. For example if you change this:

app.use(express.static(htmlPath));

to this:

app.use('/game', express.static(htmlPath));

Then instead of those URLs:

• http://localhost:3000/ (your index.html)
• http://localhost:3000/html5game/xxx.js (your assets)

those URLs will be available instead:

• http://localhost:3000/game/ (your index.html)
• http://localhost:3000/game/html5game/xxx.js (your assets)

A lot of questions here are related to serving static files with Express so I made a working example and posted it on GitHub so that people could have a working starting point and go from there:

• https://github.com/rsp/node-express-static-example

See also some other answers where I talk about it in more detail:

• How to serve an image using nodejs
• Failed to load resource from same directory when redirecting Javascript
• onload js call not working with node
• Loading partials fails on the server JS
• Node JS not serving the static image

Answer 2

The workaround for this is to compress the directory using the archiver library and uncompress it on the front end.