Avoid manually prepending '/api' to every Express route with this simple method

Have you ever been frustrated by having to always manually add '/api' to the beginning of each of your Express routes? Usually I see this come in two forms:

Form 1: In app.js file:

app.use('/api/users', require('./routes/users'))
app.use('/api/posts', require('./routes/posts'))
app.use('/api/comments', require('./routes/comments'))
app.use('/api/subscriptions', require('./routes/subscriptions'))

Form 2: In routes file:

router.post('/api/users', users.createUser)
router.post('/api/posts', blogpost.postBlogpost)
router.post('/api/comments', comment.postComment)
router.post('/api/subscriptions', subscription.addSubscription)

Either way- it looks messy, you have to remember to add it each time if you aren't copying/pasting, and it seems like there should be a better way of doing it.

Let's clean it up

Fortunately, the fix for this is really simple.

In our routes file, remove '/api' from each route

const express = require('express')
const router = express.Router()

router.post('/users', users.createUser)
router.post('/posts', blogpost.postBlogpost)
router.post('/comments', comment.postComment)
router.post('/subscriptions', subscription.addSubscription)

module.exports = router

And in app.js (or server.js, wherever you setup your Express server):

const express = require('express')
const app = express()
const routes = require('./routes')

app.use('/api', routes) // routes is our routes file above

So instead of prepending '/api' manually to each route, we import the Express router into app.js and prepend '/api' - this time, only once! - to app.use()

How does this work?

What we've essentially done here is composed a pipeline.

Let's consider app as our main app and router (our routes file) as a "sub-app".

When our application receives a web request, it will hit app.use('/api', routes) first. If the request was sent to an endpoint matching something like '/api/blah/blah' it will match on app.use('/api', routes) and from there, get routed to our sub-app router, which contains the rest of our routes.

So Express builds out this pipeline for you, and you don't have to manually add '/api' to each route anymore!

One last thing!

I'm writing a lot of new content to help make Node and JavaScript easier to understand. Easier, because I don't think it needs to be as complex as it is sometimes. If you don't want to miss out on one of these new posts, be sure to subscribe below! And I'll be sending out helpful cheatsheets, great posts by other developers, and more to help you on your journey.

Subscribe for more Node and JavaScript content!

No spam ever. Unsubscribe any time.