[Feature]: Add basename to remix config file

[zachdtaylor]

What is the new or updated feature that you are suggesting?

Somebody in discord asked if he could set a basename for a Remix app, so all routes would have that basename prepended to them: https://discord.com/channels/770287896669978684/770287896669978687/914576247068188692. I think this is something we could add to the remix.config.js file.

Why should this feature be included?

This would allow more flexibility in configuring a Remix app, giving more power to the developer a la "you own your stack."

[satya-nutella]

Not sure if this feature is in plans but it sounds very useful. I'd love to work on this. I'm new to Remix and any guidance would be awesome

[Vivalldi]

@meehawk , take a look at this line

remix/packages/remix-server-runtime/server.ts

Line 59 in a7712f2

let routes = createRoutes(build.routes);

createRoutes accepts a second parameter: parentId. I believe that's where you'd put a basename

[zachdtaylor]

@meehawk Sorry I didn't see this sooner. Been on vacation the last few days. I was planning on doing this but have you already started?

[satya-nutella]

@zachdtaylor I have started it. I wasn't sure if you're going to work on it. I'm really sorry 🥲

[zachdtaylor]

@meehawk no worries, I should have left a comment saying that I was going to work on it

[yamidsumer]

Hello! This feature is very important to be able to use Remix in my company. Any news?

[kiliman]

@yamidsumer I created a package that will let you mount routes from any folder to any base path

Here's a sample site: https://remix-mount-routes-example.herokuapp.com/

It has links to the package repo and example repo.

[ngbrown]

@kiliman I noticed that the resources, such as the .js bundles, are still coming from the root /build location. I thought the idea for this issue was that the entire application can be configured to be hosted from any random virtual directory or sub-path above root on a server. That's at least how the linked issue #107 described it.

[kiliman]

It's mentioned in the README

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.

module.exports = {
  ignoredRouteFiles: ['.*'],
  publicPath: `${basePath}/build/`,
  assetsBuildDirectory: `public${basePath}/build`,
  ...
}

[herecydev]

I've been trying to hack this in to remix over the weekend. It's really difficult without some more experience (of which I have none). I'll outline some requirements and what areas I think need updating and hopefully some of the maintainers can chime in with some opinions.

Potentially I can champion an RFC if that's of interest.

Motivation

Not all applications are hosted on the root of the domain, so instead of https://example.com, it might be https://example.com/blogs. There may be a Layer 7 router setup that would enable the following:

https://example.com => some server
https://example.com/blogs => remix server

Checking discord and github yields a decent interest in this capability. There is prior art available from next https://nextjs.org/docs/api-reference/next.config.js/basepath and gatsby https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/ that also back up the claims of desirability.

Workarounds

Right now it should be possible to host remix on a path using the publicPath config key and routes with a custom function that adds the desired basepath. This is not without it's issues though, requiring some deep understanding of how the routing is done.

Some suggestions from @ryanflorence here that revolve around adding a fixed basePath in the routes directory, like routes/{basepath}/index.tsx. That's not always suitable in certain situations, for example I have a use case where the basePath varies depending on deployment configuration (think a tenanted application, sometimes it's /blogs sometimes it's /spanish/blogs)

Even then it's my understanding that absolute references would be totally broken if the intention is to link to the root of the remix application, instead it would point to the root of the domain. For example <Link to="/">Home page for blogs</> would go to https://example.com instead of https://example.com/blogs

Possible solution

Add a baseName/basePath/pathPrefix to the remix config. This would automatically affect the routes, links and assets.

What I've tried

My experience with remix is extremely limited so take that into consideration when reading the following

1. Modifying the Router inside RemixEntry to include a basename yielded some positive results on SSR, but later failed on the browser. The router is designed with this feature so this should cater for it
2. The Link component currently only handles prefetching, although it should be very trivial to consume the RemixEntryContext and pull out a basename there to attach to links if that's even needed?
3. Adjusting the routes to include the basename. Again, it's not clear if this is actually needed, if the Router knows about the pathname, could everything "just work" without route changes?

It would be awesome if the community can validate what I've put here, @kiliman you seem like a trailblazer in this space already. Specifically if we can work out all the edge cases it would be much easier to take forward as an RFC.

[Maciekek]

Hello,
@kiliman I started to use your library remix-mount-routes and it works nice, but I have one question about path in <Link to='...'> component.

I have server:

• www.domain.com/ - some react app (not remix)
• www.domain.com/remix-app - my new remix app

I used your library to be able to host page on path /remix-app but in my remix-app I have links to pages like:
/dashboard, /terms, /join, /login, etc. Most of my links have / in the begining of the path, and when / is, after click on button app is going to www.domain.com/dashboard instead of www.domain.com/remix-app/dashboard.

I know I can remove form all places '/' sign, but I am not sure if it is a good idea, Do you have any recomendation about it?

[herecydev]

I'm not sure their stance is negative. I just think not enough people asking for it. My goal was to at least get an RFC prepared as a community

[jasonc08]

@kiliman if I have some images in public folder ( e.g. /public/images/imageA.png), how to make the url like this https://www.domain.com/{basepath}/images/imageA.png?
I have tried to use your library remix-mount-routes, but it cannot handle this case.

[kiliman]

Since files in /public folder are typically referenced directly, you'll need to add the basePath manually to these URLs. <img src="/basepath/images/...>

[jasonc08]

It does not work. If there is a image in public folder (e.g /public/images/imageA.png), the image path will become https://www.domain.com/images/imageA.png.

[jasonc08]

if i use this <img src="/basepath/images/...>, the image path will be broken.

[yracnet]

Hi,
I think this feature is important, I have implemented a possible solution in PR #4459
I include the "serverBasename" parameter on remix.config.js file.

The main changes are:

Startup server and deploy the app into the "/prefix-path" with automatic redirect
Init the ROOT router with serverBasename
Change the publicPath to ${serverBasename}/${publicPath}

[duerdod]

I have a slightly different use case I think. We have an app that needs to be able to serve content on a (potential) dynamic basename. Currently we’re fetching a config pre-remix based on request headers, in said config there’s an entry which later determines the current basename. All content and styles in the application is based on this config.

To enable this we have the following structure:

├── root.tsx
└── routes
    └── $basename
        ├── __layout
        │   ├── $.tsx
        │   └── index.tsx
        └── __layout.tsx

I think this is fine, but it assumes our this application is having a basename set, which is not the case at all times. In that case we'd want to serve the application from root.

This seems to be working, but feels a bit hacky, any other clever alternatives to this that we may have missed?

If not I'm mostly requesting the option to add a basename to the context passed to RAS, in order for us to continue to use the Link component from remix and not to have our custom one that appends potential basename.

Also, if I keep state in the url, I'd like to keep current locale in the url aswell (which is alot like what I'm requesting). Thanks!

[owlyowl]

Hi I was wondering if there were any further thoughts/development on this. I'm looking to deploy an app on the url
https://www.mydomain.com/my-remix-app/ and haven't seen a way to cleanly do this and have root links map through cleanly.

I also found remix-mount-routes but was wondering if that is still the preferred solution?

[kiliman]

You can check out my project https://github.com/kiliman/remix-proxy-basename

Another option is remix-flat-routes. This is preferred over remix-mount-routes as it supports the new v2 routing convention. I've incorporated basePath support as an option.

https://github.com/kiliman/remix-flat-routes#api

[rafegoldberg]

Remix is pretty slick. 💙 Major props on the ease of custom SSR setup, and mad brownie points for, ya know, not being Vercel! But…

For a framework that makes a big deal of being backed by React Router and claims that “you can use all [of its] features…in your Remix app”, this issue is a showstopper. We use the basename prop to allow for dynamic subpathing, and had seriously been considering Remix as our future front end framework of choice. But this two and a half year old issue makes it pretty clear that these types of advanced usecases are not a priority for the framework, and gives me pause about what other gotchyas we might find down the line.

Honestly, it’s too bad; I’d’ve loved to use Remix! 😭

[kiliman]

Support for custom basename has been merged as part of the Vite plugin.

#8145

[rafegoldberg]

Thanks for the pointer @kiliman; I'll make sure to explore that before closing my remix branch!

[markdalgleish]

This has been added to our Vite plugin in #8145. It'll be out in the next release.

[lb-]

Awesome