remix-tree-routes

Define remix routes using file system tree.

introduction

With remix's flat route, to define these routes

| path | | -------------- | | / | | /about | | /file/* | | /posts/ | | /posts/:post |

I'll go with something like this

app/
├── routes/
│   ├── about.tsx
│   ├── file.$.tsx
│   ├── _index.tsx
│   ├── posts.$post.tsx
│   ├── posts._index.tsx
│   └── posts.tsx
└── root.tsx

which will give me this

| path | matched | layout | | -------------- | ----------------------------- | ---------------------- | | / | app/routes/_index.tsx | app/root.tsx | | /about | app/routes/about.tsx | app/root.tsx | | /file/* | app/routes/file.$.tsx | app/root.tsx | | /posts/ | app/routes/posts._index.tsx | app/routes/posts.tsx | | /posts/:post | app/routes/posts.$post.tsx | app/routes/posts.tsx |

With this package, to define the same routes, I'll go with something like this

app
├── pages
│   ├── about
│   │   └── route.tsx
│   ├── file
│   │   └── route.splat.tsx
│   ├── main.tsx
│   └── posts
│       ├── main.tsx
│       ├── :post
│       │   └── route.tsx
│       └── route.tsx
└── root.tsx

which will give me this

| path | matched | layout | | -------------- | --------------------------------- | --------------------- | | / | app/pages/main.tsx | app/root.tsx | | /about | app/pages/about/route.tsx | app/root.tsx | | /file/* | app/pages/file/route.splat.tsx | app/root.tsx | | /posts/ | app/pages/posts/main.tsx | app/pages/posts.tsx | | /posts/:post | app/pages/posts/:post/route.tsx | app/pages/posts.tsx |

Or, with file mode, I'll go with something like this

app/
├── pages
│   ├── about.tsx
│   ├── file.splat.tsx
│   ├── main.tsx
│   ├── posts
│   │   ├── main.tsx
│   │   └── :post.tsx
│   └── posts.tsx
└── root.tsx

which will give me this

| path | matched | layout | | -------------- | --------------------------- | --------------------- | | / | app/pages/main.tsx | app/root.tsx | | /about | app/pages/about.tsx | app/root.tsx | | /file/* | app/pages/file.splat.tsx | app/root.tsx | | /posts/ | app/pages/posts/main.tsx | app/pages/posts.tsx | | /posts/:post | app/pages/posts/:post.tsx | app/pages/posts.tsx |

usage

the simplest way

import { defineConfig } from 'vite'
import { vitePlugin as remix } from '@remix-run/dev'
import { routes } from 'remix-tree-routes'

export default defineConfig({
  plugins: [remix({ routes })],
})

or with some customization

import { defineConfig } from 'vite'
import { vitePlugin as remix } from '@remix-run/dev'
import { defineRoutes } from 'remix-tree-routes'

export default defineConfig({
  plugins: [
    remix({
      routes() {
        // all of these parameters are the default values and optional.
        return defineRoutes({
          mode: 'dir',
          appDirectory: 'app',
          routesDirectory: 'pages',
          extensions: ['js', 'jsx', 'ts', 'tsx'],
          exclude: /^_|\.test/,
          filenames: {
            route: 'route',
            index: 'main',
            splat: 'splat',
          },
        })
      },
    }),
  ],
})