Remix-mount-routes NPM

Remix Mount Routes

This package enables you to mount your Remix app at a different path than root.

🛠 Installation

> npm install -D remix-mount-routes

⚙️ Configuration

Update your remix.config.js file and use the custom routes config option.

Call mountRoutes(basePath, routesDir, ignoredRouteFiles?) and return the route manifest.

NOTE: basePath should be an absolute path (e.g., /myapp) and routesDir should be relative to the app folder.

Depending on your setup, you may also need to update publicPath and assetsBuildDirectory to include your basePath. This will ensure that your assets will be served properly.

You can either hard-code the basePath in your config file, or use an environment variable like:

"build": "cross-env REMIX_BASEPATH=/myapp remix build",
"dev": "cross-env REMIX_BASEPATH=/myapp remix dev",

// remix.config.js
const { mountRoutes } = require('remix-mountroutes')

const basePath = process.env.REMIX_BASEPATH ?? ''

module.exports = {
  ignoredRouteFiles: ['.*'],
  // publicPath: `${basePath}/build/`,
  // assetsBuildDirectory: `public${basePath}/build`,
  routes: defineRoutes => {
    // /myapp => app/routes/index.tsx
    const baseRoutes = mountRoutes('/myapp', 'routes')
    // /test => app/addins/test/index.tsx
    const testRoutes = mountRoutes('/test', 'addins/test')

    // use standard Remix defineRoutes API
    // /some/path/* => app/addins/catchall.tsx
    const customRoutes = defineRoutes(route => {
      route('/some/path/*', 'addins/catchall.tsx')
    })
    const routes = {
      ...baseRoutes,
      ...testRoutes,
      ...customRoutes,
    }
    return routes
  },
}