Forem: Matthias

Express file-based routing like Next.js

Matthias — Mon, 29 May 2023 15:30:09 +0000

File-based routing is a popular approach to mapping route handlers to their corresponding publicly-available URL endpoints. You might be quite familiar with it thanks to modern JavaScript frameworks like Next.js.

With the express-file-routing package, you can leverage that routing solution for your own Express.js projects and ditch writing a lot of controller boilerplate code.

// routes/users.ts
export const get = async (req, res) => {
  const users = db.users.findMany()
  return res.json(users)
}

Your project's file structure might look like the following:

├── app.ts // main file
├── routes
    ├── index.ts // index routes
    ├── posts
        ├── index.ts
        └── [slug].ts // dynamic params
    └── users.ts
└── package.json

express-file-routing will transform all of your files inside /routes into valid paths.

/routes/index.ts → /
/routes/posts/index.ts → /posts
/routes/posts/[id].ts → /posts/:id
/routes/users.ts → /users

How to use Express file routing

This is quite of a straightforward process. Even though this post is more of an intro rather than a tutorial on how to use express-file-routing, here's a quick start.

All you need to do is to install express-file-routing from npm.

npm install express-file-routing

In your main entry file, create an Express app instance and attach the file router.

// app.ts
import express from "express"
import { router } from "express-file-routing"

const app = express()

app.use("/", await router())

app.listen(4000)

You're already done!

Enqueuing new routes from now on is as easy as creating a file in /routes and exporting your HTTP method handlers.

// routes/posts/index.ts → /posts
export const get = async (req, res) => {
    return res.json([])
}

export const post = [
  async (req, res) => {
    const post = await db.post.create()
    return res.status(201).json(post)
  }
]

Even middlewares are supported by exporting an array of request handlers instead of a single one.

// routes/users.ts
export const post = [
  userAuth(),
  rateLimit({ window: 10 }), 
  async (req, res) => {
    return res.status(201).json({})
  }
]

For detailed docs check out https://github.com/matthiaaas/express-file-routing.

Stop using express.Router()

Matthias — Wed, 02 Mar 2022 15:32:34 +0000

Ever wrote code like this? Stop it.

// 🚨 this is messy
const router = express.Router()

router.get("/posts", async (req, res) => {
    res.json([])
})

export default router

One of the great features that come with modern frontend frameworks like Next.js is a /pages directory where all your app's routes live in.

Luckily, we can achieve the same DX in our Express backend codebases too without writing our own ugly express.Router()s but with the express-file-routing package.

// ✅ this is enjoyable
export const get = async (req, res) => {
    res.json([])
}

As you can see, it's a super clean approach and quite beneficial for code style and maintainability to split your Express route handlers into separate files.

Just by taking a look at a project's file structure, one can intuitively see what endpoints our API is about to provide.

├── app.ts
├── routes
    └── posts
        ├── index.ts
        └── [id].ts
└── package.json

/routes/posts/index.ts → /posts
/routes/posts/[id].ts → /posts/:id

How to use Express file routing

This is quite of a straightforward process. Even though this post is more of an intro rather than a tutorial on how to use this express-file-routing, here's a quick start.

All you need to do is to install express-file-routing from npm.

npm install express-file-routing

In your main entry file, create an Express app instance and attach the file router.

// app.ts
import express from "express"
import { router } from "express-file-routing"

const app = express()

app.use("/", router()) // this is the magic

app.listen(4000)

You're already done!

Enqueuing new routes from now on is as easy as creating a file in /routes and exporting your HTTP method handlers.

// /routes/posts.ts
export const get = async (req, res) => {
    res.json([])
}

export const post = async (req, res) => {
    await db.post.create()
    res.status(201)
}

Even middlewares are supported by exporting an array of request handlers instead of a single one.

export const post = [
  rateLimit(), userAuth(),
  async (req, res) => {
    res.status(201).json({})
  }
]

For detailed docs check out https://github.com/matthiaaas/express-file-routing.

Thanks for reading and stop using express.Router() ever again.

Simple file based routing for Express

Matthias — Sun, 17 Oct 2021 10:53:27 +0000

There are a bunch of best practices out there that recommend to split your Express.js routes into separate files using Express.Router().

But creating new routes this way isn't straightforward and requires quite a few lines of boilerplate code for each newly introduced endpoint.

// this is messy
import express from "express"

const router = express.Router()

router.route("/")
  .get(async (req, res) => {
    ...
  })

export default router

Fortunately, the framework era taught us better and popularized cleaner alternatives like file based routing.

Consider the following project structure:

├── app.ts // main file
├── routes
    ├── index.ts // index routes
    ├── posts
        ├── index.ts
        └── [id].ts // dynamic params
    └── users.ts
└── package.json

This approach can work for you out-of-the-box too!

npm install express-file-routing

express-file-routing will transform all of your files inside /routes into valid paths.

/routes/index.ts → /
/routes/posts/index.ts → /posts
/routes/posts/[id].ts → /posts/:id
/routes/users.ts → /users

// app.ts
import express from "express"
import { router } from "express-file-routing"

const app = express()

app.use(router())

// /routes/users.ts
export const get = async (req, res) => {
  res.json([])
}

By default, exported functions like get, post, put, patch, del etc. will get matched their corresponding HTTP method automatically.

Adding middlewares is equally intuitive:

// /routes/posts.ts
import { rateLimit, userAuth } from "../middlewares"

export const post = [
  rateLimit(), userAuth(),
  async (req, res) => {
    res.status(201).json({})
  }
]

See matthiaaas/express-file-routing on GitHub for detailed docs & a get started guide.