meijer.works

remix-feature-routes

github npm

remix router inspired by domain driven design

Install

npm install remix-feature-routes

Usage

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

export default defineConfig({
	plugins: [
		remix({
			// require to disable remix default routing algoritm
			ignoredRouteFiles: ['**/*'],
			routes: featureRoutes({
				// optional
				ignoredRouteFiles: ['.*', '**/*.css', '**/*.test.{js,jsx,ts,tsx}', '**/__*.*', '**/internal/**'],
			}),
		}),
		tsconfigPaths(),
	],
});

Inside the routes folders, we use a ‘flat files’ convention. Use $ for params, and . for /.

This will enable you to have a file structure like:

ROUTE                          URL
--------------------------------------------------
# Auth related code and routes
auth/actions/user-actions.ts
auth/config.ts #  export const routeConfig = { basePath: '/' }
auth/components/login-form.ts
auth/components/signup-form.ts
auth/models/user.ts
auth/routes/index.tsx          /
auth/routes/login.tsx          /login
auth/routes/signup.tsx         /signup
auth/routes/_layout.tsx        /

# Products related code and routes
products/routes/index.tsx      /products
products/routes/$id.tsx        /products/:id
products/routes/_layout.tsx    /products

# Users related code and routes
users/routes/settings.tsx      /users/settings
users/routes/profile.tsx       /users/profile
users/routes/index.tsx         /users
users/routes/_layout.tsx       /users

Route config files

All domains can have an optional config.ts file, exporting a routeConfig. This way it’s possible to change the path prefix.

By default, domains have their domain name prefixed. Using a basePath of / moves the routes to the root.

export const routeConfig = {
	basePath: '/',
};

We also support params in the basePath:

export const routeConfig = {
	basePath: '/$owner/$repo',
};

// repos/routes/index.tsx      /:owner/:repo
// repos/routes/issues.tsx     /:owner/:repo/issues
// repos/routes/pulls.tsx      /:owner/:repo/pulls

API

remix-feature-routes(options?)

Remix feature routes doesn’t require any options, though you might want to add some files to ignore in case you’re colocating stylesheets, or test files.

options

Type: ignoredRouteFiles Default: []

This property takes an array of glob strings. Define some globs to ensure that collocated test files are not seen as routes.