Support dynamic prefix on Links and Scripts

[19Qingfeng]

See: #5894.

At present, my project has some static resources whose domain names are dynamic.

So,I want to support dynamic splicing in and , such as "index.css" <Links prefix="http://google.com"> will get <link href="http://google.com/index.css".

So far I haven't found a good solution in Remix,So I realized the prefix props on my project.

I want to contribute this feature to remix and use it directly from remix-rum/react,I'm not sure if it's necessary, or there are other solutions? @sergiodxa

[19Qingfeng]

@ryanflorence I am interested in contributing my code to Remix,but I don't know what the Remix team thinks of this problem.

[19Qingfeng]

Can you provide a simple repro of how you expect it to work? I can review it and provide feedback.

@kiliman hello, Repo You can see it in this repo.

I have some dynamic domain names and addresses that are returned at the Node level, and here I'm just using www.google.com for examples, which are actually returned from other service invocation interfaces.

[19Qingfeng]

hi @kiliman , Do you have time to take a look at this function?

[HeroProtagonist]

I think this would solve the problem I am looking into of setting publicPath at runtime. Would be happy to help in anyway to see this added if this is something the framework is interested in.

[HeroProtagonist]

@kiliman Would you be able to review @19Qingfeng's approach to the problem. Even if it needs to be handled differently, I think the end result would be beneficial.

I am facing this issue when building an image of the application to be run in different environments. At build time, the application does not know where it will be running or which CDN its assets will be located at.

In working with rails applications, this is handled by setting the asset_host when the app boots up.

The only paths forward in remix currently are hacky. I am exploring rewriting the assets paths at startup or having a proxy route for assets. Neither of which are appealing.

[yuqiuw]

I am facing this issue when building an image of the application to be run in different environments. At build time, the application does not know where it will be running or which CDN its assets will be located at.

This is exactly I'm looking for at this whole afternoon!

[wesleygrimes]

hey all, just chiming in that being able to somehow set publicPath at runtime is definitely something my team needs for the app we are building. We are trying to lean into the build once , run/deploy anywhere pattern, and having the assets being set at build time prevents this.

I mean I suppose one option is leaving it a relative path and then setting <base tag might help, but then it would cause issues with all of the other links that aren't assets.

[19Qingfeng]

I think maybe if we try to provide some built-in tags or attributes, maybe we can do this more easily.

eg: <Script host="https://google.com">、<Link host="https://google.com">、<RemixImage host="https://google.com"> .

This is my current temporary solution.

[19Qingfeng]

Maybe if there is a proposal on this direction, I think we can discuss it together in the discussions? @wesleygrimes @kiliman

[vincaslt]

Any news regarding this? This would be beneficial for Shopify app development in case of app proxy. We can set the proxy to target whatever route, but the resources are being loaded relative to the root of the store not the root of the proxy URL.

[hrsh7th]

vite seems to have the api for this.

https://vitejs.dev/guide/build.html#advanced-base-options

I experimented with experimental.renderBuiltUrl in Remix SPA Mode and it seems to work for now.

My experimenting were

• Set experimental.renderBuiltUrl as { runtime: "window.__SSR_PUBLIC_PATH__ = 'https://.../path/to/assets'" }
• Build static assets with npx remix vite:build
• Modify static assets (index.html paths and manifest-***.js paths)

[vincaslt]

Would you be able to provide a code sample?

I'm not clear about what sets SSR_PUBLIC_PATH. The files would be server side rendered initially and the server has no access to window afaik. Index.html seems to be generated by vite if I'm not mistaken, and in my instance when using with app proxy, I actually don't want the complete site, as the code embeds directly into source code of the page, so I must not have html/head/body tags in there.

[hrsh7th]

Here is the demo.

https://github.com/hrsh7th/remix-spa-dynamic-public-path

This is just a workaround, so I cannot guarantee for this.

[hrsh7th]

It would be great if the vite could stabilize renderBuiltUrl and the remix could implement a corresponding feature.

[kevinisaac]

@hrsh7th I tried your vite config, but the domain change works only for the CSS paths, but not for the route bundle files (like the paths inside the manifest file). Am I missing something here?

Btw, I'm using SSRed Remix.