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

Related tags

Learning resource remix-mount-routes
Overview

Remix Mount Routes

All Contributors

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):


Kiliman
๐Ÿ’ป ๐Ÿ“–

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

You might also like...

Package fetcher is a bot messenger which gather npm packages by uploading either a json file (package.json) or a picture representing package.json. To continue...

package-fetcher Ce projet contient un boilerplate pour un bot messenger et l'executable Windows ngrok qui va permettre de crรฉer un tunnel https pour c

Mar 29, 2022

WAMpage - A WebOS root LPE exploit chain

WAMpage - A WebOS root LPE exploit chain

WAMpage WAMpage - A WebOS root LPE exploit chain This exploit is mainly of interest to other researchers - if you just want to root your TV, you proba

Dec 2, 2022

Solidity NFT whitelist contract example using MerkleTree.js for constructing merkle root and merkle proofs.

MerkleTree.js Solidity NFT Whitelist example Allow NFT minting only to whitelisted accounts by verifying merkle proof in Solidity contract. Merkle roo

Dec 29, 2022

It's not butter, but it's root.

margerine Episode 2: Revenge of the ยฏ\_(ใƒ„)_/ยฏ margerine is a root exploit and adb enabler for the DJI Air Unit (wm150), Caddx Vista (lt150), FPV Goggl

Dec 24, 2022

A TypeScript implementation of High-Performance Polynomial Root Finding for Graphics (Yuksel 2022)

Nomial Nomial is a TypeScript implementation of Cem Yuksel's extremely fast, robust, and simple root finding algorithm presented in the paper "High-Pe

Aug 3, 2022

Find root-affix combinations of English words.

Find root-affixes of word ๆŸฅๆ‰พ่‹ฑ่ฏญๅ•่ฏ็š„่ฏๆ น่ฏ็ผ€็ป„ๅˆใ€‚ ๆŸฅๆ‰พ่ง„ๅˆ™ ็›ดๆŽฅ่ฟ”ๅ›žๅฐไบŽ็ญ‰ไบŽ้•ฟๅบฆไธบ 2 ็š„ๅ•่ฏ ๅ…ˆ่Žทๅ–ๅ•่ฏๅŽŸๅฝข๏ผŒ่ฟ˜ๅŽŸๅคๆ•ฐใ€ๆฏ”่พƒ็บงใ€่ฟ‡ๅŽปๅผ็ญ‰ๅ•่ฏๅฝขๅผ ๅ†้€š่ฟ‡็ฉทไธพ่Žทๅพ—ๆ‰€ๆœ‰็š„่ฏๆ น่ฏ็ผ€็ป„ๅˆ ็„ถๅŽๅŽป้™คไธๅฎŒๆ•ด็š„็ป„ๅˆ๏ผŒๅณ่ฏฅๆ‹ผๅ†™็ป„ๅˆ != ๅ•่ฏ ๅœจๆ‰€ๆœ‰็ฌฆๅˆๆกไปถ็š„็ป„ๅˆไธญ๏ผŒๆฏ”่พƒๆ‰€ๆœ‰็ป„ๅˆ็š„

Dec 22, 2022

A dedicated desktop app that enables you to move items in and out of storage units in CSGO.

CASEMOVE Casemove is an open-source desktop application that helps you easily move items out of and into Storage Units in Counter-Strike: Global Offen

Dec 24, 2022

Remix Stack for deploying to Vercel with remix-auth, Planetscale, Radix UI, TailwindCSS, formatting, linting etc. Written in Typescript.

Remix Stack for deploying to Vercel with remix-auth, Planetscale, Radix UI, TailwindCSS, formatting, linting etc. Written in Typescript.

Remix Synthwave Stack Learn more about Remix Stacks. npx create-remix --template ilangorajagopal/synthwave-stack What's in the stack Vercel deploymen

Dec 25, 2022

๐ŸŽ A simple application which enables you to sync readings from your Withings scale to a Notion page.

๐ŸŽ A simple application which enables you to sync readings from your Withings scale to a Notion page.

weight-logger weight-logger is a simple application which enables you to sync readings from your Withings scale to a Notion page. Preview Installation

Jan 14, 2022
Comments
  • Links in Header and Footer components

    Links in Header and Footer components

    I am seeing an issue where rendered in a Header or Footer component called from the root.tsx is not being prefixed with the base route reference. Is there a way to ensure that links are appropriately prefixed?

    {collections.map((collection) => (
    <li key={collection.id}>
        <Link
            className=""
            to={
                '/collections/' +
                collection.slug
            }
            prefetch="intent"
            key={collection.id}
        >
            {collection.name}
        </Link>
    </li>
))}```
    opened by kbrackney 0
  • tslib must be a dependency and not a devDependency

    tslib must be a dependency and not a devDependency

    (Borrowing from https://github.com/dojo/core/issues/372, which has a really clear writeup of the same bug in a different NPM package)

    When this package is installed, the generated .js files contain require("tslib"). So tslib needs to be in dependencies, not just devDependencies.

    Here's a simple repro case:

    $ npm install remix-mount-routes --no-package-lock --global-style   

added 4 packages, and audited 5 packages in 2s

found 0 vulnerabilities
$ node -e "require('remix-mount-routes')"                           
node:internal/modules/cjs/loader:936
  throw err;
  ^

Error: Cannot find module 'tslib'

    This bug is often disguised when using npm, as some other package in your project will likely depend on tslib. But it won't work in pnpm without --shamefully-hoist as pnpm doesn't expose transitive dependencies by default.

    opened by iainmerrick 0
Owner
Kiliman
Kiliman
GitHub
Remix enables you to build fantastic user experiences for the web and feel happy with the code that got you there. Get a jumpstart on Remix with this workshop.

?? Remix Fundamentals Build Better websites with Remix Remix enables you to build fantastic user experiences for the web and feel happy with the code

Frontend Masters 204 Dec 25, 2022
With this script you can bypass both root detection and ssl pinning for your android app.

frida_rootansslbypas โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ•— โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—

themalwarenews 14 Dec 24, 2022
Types generator will help user to create TS types from JSON. Just paste your single object JSON the Types generator will auto-generate the interfaces for you. You can give a name for the root object

Types generator Types generator is a utility tool that will help User to create TS Interfaces from JSON. All you have to do is paste your single objec

Vineeth.TR 16 Dec 6, 2022
This package enables you to define your routes using the flat-routes convention.

Remix Flat Routes This package enables you to define your routes using the flat-routes convention. This is based on the gist by Ryan Florence ?? Insta

Kiliman 180 Jan 3, 2023
Userland module that implements the module path mapping that Node.js does with "exports" in package.json

exports-map Userland module that implements the module path mapping that Node.js does with "exports" in package.json npm install exports-map Usage co

Mathias Buus 9 May 31, 2022
This package is an open source extension for MikroORM, which enables Nested Set Tree for your needs

MikroORM nested set This package is an open source extension for MikroORM, which enables Nested Set Tree for your needs Disclaimer For now, this packa

Kamil Fronczak 5 Dec 15, 2022
Storybook Addon Root Attributes to switch html, body or some element attributes (multiple) at runtime for you story

Storybook Addon Root Attributes What is this This project was inspired by le0pard/storybook-addon-root-attribute The existing library received only on

์ •ํ˜„์ˆ˜ 5 Sep 6, 2022
The Remix version of the fakebooks app demonstrated on https://remix.run. Check out the CRA version: https://github.com/kentcdodds/fakebooks-cra

Remix Fakebooks App This is a (very) simple implementation of the fakebooks mock app demonstrated on remix.run. There is no database, but there is an

Kent C. Dodds 61 Dec 22, 2022
simple-remix-blog is a blog template built using Remix and TailwindCSS. Create your own blog in just a few minutes!

simple-remix-blog is a blog template built using remix.run and TailwindCSS. It supports markdown and MDX for the blog posts. You can clone it and star

Josรฉ Miguel รlvarez Vaรฑรณ 8 Dec 8, 2022
This package is a replacement for superjson to use in your Remix app

This package is a replacement for superjson to use in your Remix app. It handles a subset of types that superjson supports, but is faster and smaller.

Michael Carter 252 Jan 3, 2023