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 !

score 10 · Accepted Answer · edited May 23 '17 at 12:24

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:

So, with this solution, I have to create a folder structure that is the one I want on the server and each has to contain an index.html ? — An intern has no name, Nov 09 '16 at 15:49
@Aninternhasnoname Yes, you can create the structure that you want on the server - e.g. with the `html` directory containing `game1`, `game2` etc. each having its own `index.html` and a subdirectory with assets - that would be the easiest one with one call to `app.use(express.static(htmlPath));` - or alternatively you may have one call per game: `app.use('/game1', express.static(pathToGame1Files));` and `app.use('/game2', express.static(pathToGame2Files));` whichever seems more convenient for you. You may even mix the two ways but the order of registering the paths will matter. — rsp, Nov 09 '16 at 16:21
Thank you very much ! If you are curious, here is the game I just uploaded : http://lapinou.dnet.ovh:3000/aeronavale/jeu/ use arrows and X, I didn't make tutorial yet :) (if you read this long fter the comment was posted, be aware the link may not be avalaible forever) — An intern has no name, Nov 09 '16 at 16:35
@Aninternhasnoname This is a very cool game! :) It reminds me of a great DOS game Wings of Fury - only yours is on steroids and much harder. ;) Very cool. Drop me a line on twitter when you have it finished with tutorial - I'm [@pocztarski](https://twitter.com/pocztarski) on twitter. Keep up the good work! I'm glad I could help. — rsp, Nov 09 '16 at 23:33
Of course, I'll tell you when I have a complete version. Thanks for all ! — An intern has no name, Nov 09 '16 at 23:51

score 1 · Answer 2 · answered Jun 22 '19 at 18:01

1

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

answered Jun 22 '19 at 18:01

Farid Garciayala

51
3

Sending whole folder content to client with express

2 Answers2

Linked