Hackernoon logoRouting Life Hacks: Serving a Node.js Express App from a Sub-Folder by@olekon86

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

Author profile picture

@olekon86Oleg

Software developer, Ethereum and beyond

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

The Noonification banner

Subscribe to get your daily round-up of top tech stories!