remix router inspired by domain driven design
npm install remix-feature-routes> remix router inspired by domain driven design
``sh`
npm install remix-feature-routes
`js
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:
`shell
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
auth/routes/login.tsx /auth/login
auth/routes/signup.tsx /auth/signup
auth/routes/_layout.tsx /auth
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.`ts
export const routeConfig = {
basePath: "/",
};
`We also support params in the basePath:
`ts
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
$3
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.