Oleg

Software developer, Ethereum and beyond

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

Tags

Comments

More by Oleg

Topics of interest