How to use routers with Express and split your API logic šļø
Because the monolithic approach is lame in 2022
Table of contents
Is your app.js
API file becoming a big pile of code nonsense? Do you have trouble distinguishing one endpoint from another? Well then, this tutorial is definitely for you!
In this article, we will take a look at how you can split your endpoints logic into different files by utilizing the express.Router
class.
As always, here is the official documentation link for a more detailed look at Express routing.
The basic setup
Letās suppose that our API looks like this:
const express = require('express');
const app = express();
app.get("/", (req, res) => {
res.send('hello world');
})
app.post("/", (req,res) => {
// User login code
// ā¦
})
This is the most basic setup, and itās quite ok if you donāt plan on using too many endpoints.
But letās suppose we want to add another path to our API. Our code would look like this:
const express = require('express');
const app = express();
// Home route - - - - - - -
app.get("/", (req, res) => {
res.send('hello world');
})
app.post("/", (req,res) => {
// User login code
// ā¦
})
// Register route - - - - - - - - - -
app.get("/register", (req, res) => {
res.send('Register an account');
})
app.post("/register", (req,res) => {
const user = req.body.username;
const password = req.body.password; // Always encrypt passwords
})
Now it starts to get a bit difficult to read, hence the comments to section out the different routes.
A better technique
Luckily, we can create chainable route handlers for each path, and reduce some of the repetitive code.
We can do that by using the .route()
built-in method. Hereās how that works:
const express = require('express');
const app = express();
// Home route - - -
app.route("/")
.get((req, res) => {
res.send('hello world');
})
.post((req, res) => {
// User login code
})
// Register route - - -
app.route("/register")
.get((req, res) => {
res.send('Register an account');
})
.post((req, res) => {
const user = req.body.username;
const password = req.body.password; // Always encrypt passwords
})
Yea, that looks much better. But still, itās not practical for a large number of endpoints, since all of our code is on the same file. You can imagine how messy that can get if we just keep adding more.
The routers solution
Letās take a step back and look at our projectās directory tree.
At this point itās very simple, just our app.js
file:
/project-root-folder
app.js
But in order to start using routers, it is best practice if we make a separate directory to store them. So letās make one:
/project-root-folder
app.js
/routers
Great, now we can start creating our router files. Letās make one for our "/"
endpoint named homeRoute.js:
/project-root-folder
app.js
/routers
homeRoute.js
const express = require('express');
const router = express.Router();
router.route("/")
.get((req,res) => {
res.send('hello world');
})
.post((req,res) => {
// User login code
})
module.exports = router;
Okay, so what is going on here?
A router file is a JavaScript module, a piece of code that can be imported when needed. More on modules here. For it to work, you need to require express and use the module.exports
command at the end of the file.
Right, so how on earth do we use that in our app.js
file? Hereās how:
const express = require('express');
const app = express();
// Import the homeRoute.js file
const homeRoute = require('./routes/homeRoute');
// Use it as an endpoint
app.use(homeRoute);
Now thatās what Iām talking about!
Letās implement the "/register"
route in the same fashion and call it a day:
/project-root-folder
app.js
/routers
homeRoute.js
registerRoute.js
const express = require('express');
const router = express.Router();
router.route("/register")
.get((req,res) => {
res.send('Register an account');
})
.post((req,res) => {
const user = req.body.username;
const password = req.body.password; // Always encrypt passwords
})
module.exports = router;
And in app.js
:
const express = require('express');
const app = express();
const homeRoute = require('./routes/homeRoute');
const registerRoute = require('./routes/registerRoute');
app.use(homeRoute);
app.use(registerRoute);
Conclusions
And that was it! š
I hope this helped you organize your Express API as it grows bigger with more endpoints. In a future blog post, we will explore the concept of controllers, a more advanced technique for splitting your JavaScript logic.
Till next time! āļø