fileSystemRouter

The fileSystemRouter API is used to serve files from the file system. Internally, we use it for pages and API routes.

pages
โ”œโ”€โ”€ index.tsx
โ”œโ”€โ”€ settings.tsx
โ”œโ”€โ”€ blog
โ”‚   โ”œโ”€โ”€ [slug].tsx
โ”‚   โ””โ”€โ”€ index.tsx
โ””โ”€โ”€ [[...catchall]].tsx

The API of fileSystemRouter is the same API of Bun.FileSystemRouter with some differences:

  • You can also use the fileSystemRouter API in Node.js or Deno.
  • There are some fixes and improvements in the API.
  • The fileSystemRouter API (with Bun runtime) is faster than the Bun.FileSystemRouter API.

The fileSystemRouter API is used internally by the Brisa server to serve files from the file system. However, you can also use it in your Custom Server.

Reference

fileSystemRouter(options: FileSystemRouterOptions): FileSystemRouter

The fileSystemRouter function creates a new instance of the file system router.

Parameters

  • options: An object with the following properties:
    • dir: The directory to serve files from.
    • fileExtensions: An array of file extensions to serve. Default: ['.tsx', '.jsx', '.ts', '.mjs', '.cjs', '.js'].

Returns

  • A FileSystemRouter object with the following properties:
    • routes: Entries with the routes and file paths. [pathname, filePath][].
    • match(route: string): MatchedBrisaRoute | null: A function to match a route with the file system routes.

Example usage

import path from "node:path";
import { fileSystemRouter } from "brisa/server";

const router = fileSystemRouter({
  dir: path.join(import.meta.dirname, "pages"),
});

const matchedRoute = router.match("/blog/hello-world?foo=bar");

if (matchedRoute) {
  console.log(matchedRoute);
  // {
  //   filePath: 'pages/blog/[slug].tsx',
  //   kind: 'dynamic',
  //   name: '/blog/[slug]',
  //   pathname: '/blog/hello-world',
  //   src: 'blog/[slug].tsx',
  //   params: { slug: 'hello-world' },
  //   query: { foo: 'bar' },
  // }
}

match method

The match method receives a route and returns a MatchedBrisaRoute object or null.

MatchedBrisaRoute

The MatchedBrisaRoute object has the following properties:

  • filePath: The file path of the matched route.
  • kind: The kind of route (exact, dynamic, catch-all, optional-catch-all).
  • name: The route name.
  • pathname: The matched pathname.
  • src: The source file path.
  • params: The route params.
  • query: The route query.

routes property

The routes property is the entries of routes and file paths.

routes entries are in alphabetical order

import path from "node:path";
import { fileSystemRouter } from "brisa/server";

const router = fileSystemRouter({
  dir: path.join(import.meta.dirname, "pages"),
});

console.log(router.routes);
// [
//   ['/', '/Users/aralroca/my-app/src/pages/index.tsx'],
//   ['/[[...catchall]]', '/Users/aralroca/my-app/src/pages/[[...catchall]].tsx'],
//   ['/blog', '/Users/aralroca/my-app/src/pages/blog/index.tsx'],
//   ['/blog/[slug]', '/Users/aralroca/my-app/src/pages/blog/[slug].tsx'],
//   ['/settings', '/Users/aralroca/my-app/src/pages/settings.tsx'],
// ]