ExpressJS routing confussion

I am in the process of learning how to build web applications using ExpressJS, for that purpose I am building a toy application.

At the beginning everything was going relatively smoothly I had a working page with a single route for said page and one for an API call. Then as I started coming up with additional features I moved the static page to a different route since I wanted other thing to be the "home" page.

After doing that all of the resources on the new routes work perfectly but the original ones when I enter the url in the browser I get as a response an empty object, it's like it is never hitting the router methods but it does not get to the 404 handler either.

This is the code I have on the "app.js" file (I am only including the code which I think is relevant):

var home = require('./routes/home');
var adventure = require('./routes/adventure');
var gameService = require('./routes/gameService');

app.use(express.static(`${__dirname}/resources`));
app.use(express.static(`${__dirname}/app/Presentation`));

app.use('/', home);
app.use('/adventure', adventure);
app.use('/game', gameService);

This is the home.js file:

var express = require('express');
var router = express.Router();

router.get('/', (req, res) => {
    var adventures = .... //getting an array of "adventures" from somewhere
    var data = { "adventures": adventures.slice() };

    res.render('home', data);
});

router.get('/:adventureId', (req, res) => {
    var adventures = .... //getting an array of "adventures" from somewhere
    var data = { "adventureDetails": adventures[req.params.adventureId] };

    res.json(data);
});

module.exports = router;

This is the gameService.js file:

var express = require('express');
var router = express.Router();

var gameDal = require('../app/DAL/gameRepository');

router.get('/:gameId', (req, res, next) => {

    gameDal.getGame(0).then(gameData => {
        res.json(gameData);
    }).catch(err => {
        next(err);
    });
});

module.exports = router;

And finally the adventure.js one:

var express = require('express');
var router = express.Router();

var gameDal = require('../app/DAL/gameRepository');

router.use('/', (req, res, next) => {
    if(!res.locals.gameContext) res.locals.gameContext = {};

    gameDal.getGame(0).then(game => {
        res.locals.gameContext.player = game.player;
        res.locals.gameContext.place = game.place;
        req.gameTitle = game.title;
        req.backgroundImage = game.backgroundImage;
        req.tilesBackground = game.tilesBackground;
        next();
    }).catch(err => {
        next(err);
    });
});

router.get('/', (req, res) => {
    res.render('adventure', { "title": req.gameTitle, "backgroundImage": req.backgroundImage, "tilesBackground": req.tilesBackground });
});

module.exports = router;

What's happening is that all the routes work fine except "/adventure" which returns a blank page with "{}" on it.

If I modify the adventure file so that both methods have either a parameter "/:gameId" (which it will eventually have) or a sub route "/something" then the html gets displayed but the static JavaScript (jQuery and client side handlebars) and the images, which are all under the "resources" folder, return 404 not found.

The full project can be found on this Github Url

Thank you for your help.

via Sergio Romero