remix-mount-routes

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)

Your route files are still relative to app/routes folder. That is app/routes/posts/$slug.tsx will map to the URL /myapp/posts/:slug

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 => mountRoutes('app', basePath, defineRoutes),
}

💡 Sample Web App

Here's a repo with a sample app mounted to /myapp

https://github.com/kiliman/remix-mount-routes-example

And here's the running app

https://remix-mount-routes-example.herokuapp.com

😍 Contributors

Thanks goes to these wonderful people (emoji key):

Kiliman 💻 📖

This project follows the all-contributors specification. Contributions of any kind welcome!

Changelog

v0.1.1

• 🚨 Changed mountRoutes signature to make it more flexible