Remix Route Configuration

My blog posts were originally organized by year in both the URL and file system paths (e.g. /2024/remix-route-configs). While I wanted to keep this structure for consistency, I also wanted to leverage the new V2 routing features. After some digging, I found a solution that achieves both goals, as detailed below.

Route Directory Structure

        
        app/
        ├── routes/
        |   ├── 2022/
        │   |   ├── .mdx
        │   |   └── .mdx
        |   ├── 2023/
        │   |   ├── .mdx
        │   |   └── .mdx
        |   ├── 2024/
        │   |   ├── .mdx
        │   |   └── .mdx
        |   ├── _index.tsx
        |   └── blog_._index.tsx
        └── root.tsx
        

Manual Route Configuration Docs

Remix additionally allows for setting manual routes via Vite config.

There are times when the provided convention might not align with specific project requirements or a developer's preferences. In such cases, Remix allows for manual route configuration via vite.config.ts.

-- Manual Route Configuration

The Remix defineRoutes function in vite.config.ts can be used to load custom routes.

A function for defining custom routes, in addition to those already defined using the filesystem convention in app/routes. Both sets of routes will be merged.

-- Remix Vite Configuration

Vite Configuration Sample

I have a list of links and paths that get autopopulated in defineRoutes.

[
  {
    "link": "/blog/posts/2024/remix-routes",
    "path": "routes/2024/remix-routes.mdx"
  }
]

export default defineConfig({
  plugins: [
    remix({
      routes(defineRoutes) {
        return defineRoutes((route) => {
          for (const r of routes) {
            if (r.path.length > 0) {
              route(r.link, r.path);
            }
          }
        });
      }
    })
  ]
});