remix-mount-routes
v0.1.3
Published
Package for mounting Remix routes to any path
Downloads
864
Readme
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
},
}
💡 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):
This project follows the all-contributors specification. Contributions of any kind welcome!