Routing Life Hacks: Serving a Node.js Express App from a Sub-Folder

Express is probably the most popular web framework for Node.js and tons of tutorials and instructions have already been written. However, most of them don't cover the topic I am going to tell you about.

A standard approach to routing that is seen across various docs looks like this:

var app = express();
app.get('/', function (req, res) {
  res.send('Hello World!');
});

or this:

var router = express.Router();
router.get('/', function(req, res) {
  res.send('Hello from foo');
});
...
app.use('/foo', router);

So your routing structure probably looks somewhat similar to the picture below

This works perfectly in your local development environment. However, in real-world there might be a small problem. An actual catalogue for your application on hosting platform might be other than the domain root.

For example, you deploy the application containing routes above to the

yourdomain.com/hello

. Now if you open

yourdomain.com/hello

in the browser you probably expect it to show 'Hello World'. But instead, you get a 404 error. In order to receive an expected greeting, you should have written the route like this:

app.get('/hello', function (req, res) {
  res.send('Hello World!');
});

The same can be said about the router's subpath. A proper way to receive 'Hello from foo' from

yourdomain.com/hello/foo

would be:

app.use('/hello/foo', router);

While it is not hard to rewrite paths in a small application, trying to do it in a large app with lots of routes (especially poorly structured) can become a nightmare. In addition what if you want to change a directory later? Starting rewriting all over again, in that case, is a bad idea.

A better option is to make the only entry point for routing and make this entry path configurable.

First, create a

config.js

to store the project-level variables

//config.js
module.exports  = {
	baseUrl: '/',
}

Then you should reorganize routes structure so that the entry or index router includes all other routes while its own path would be taken from

config.js

const config = require('./config.js');

var app = express();

var indexRouter = express.Router();
indexRouter.get('/', function(req, res) {
	res.send('Hello World!');
});

var fooRouter = express.Router();
fooRouter.get('/', function(req, res) {
  res.send('Hello from foo');
});
indexRouter.use('/foo', fooRouter);

app.use(config.baseUrl, indexRouter);

Basically what we did was transforming previous structure to this

That's it. Now if you deploy your application to a subfolder, for example, `yourdomain.com/hello`, change the config.js to

//config.js
module.exports  = {
	baseUrl: '/hello/',
}

and all routes would be updated automatically.

If an application is deployed straight to

yourdomain.com

root, just leave

baseUrl: '/'

as it is.

I hope the described lifehack will help you to organize routes in Express app a way better.

Credits

Train photo by Paul IJsendoorn from Pexels