Providing remote entry URLs based on the environment at runtime?

[Billybobchops]

Currently, I am providing my remote URLs to modern.js and they are being built into the bundle like so at build time:

remotes: {
        remoteDesignSystem:
            process.env.NODE_ENV === 'production'
                ? 'remoteDesignSystem@https://starling-ui-design-system.netlify.app/static/remoteEntry.js'
                : 'remoteDesignSystem@http://localhost:3001/static/remoteEntry.js',
},

I am wondering if it is possible to inject these values at runtime via a global object defined on the window (or some other way that makes sense).

I want to be able to do something like this: (although currently getting 'window is not defined'.)

remotes: {
        remoteDesignSystem:
            process.env.NODE_ENV === 'production'
                ? `remoteDesignSystem@${window?.companyName?.configuration?.DESIGN_SYSTEM_PROD_URL}`
                : `remoteDesignSystem@${window?.companyName?.configuration?.DESIGN_SYSTEM_LOCAL_URL}`,
},

The problem I am looking to solve to move forward with this framework is to be able to build once and deploy the same bundle to many different environments (testing, dev, etc). The configuration.js file in the window scope would be dynamically created which sets the values like DESIGN_SYSTEM_PROD_URL.

Have you come across this before and can you provide any insight or help on how to solve this problem? Maybe there's a better way to do it than what I've suggested.

Thank you!

[Billybobchops]

Just following up again on this as this is likely one of the last deciding factors for us to move forward with modern.js. Thank you!!

[Billybobchops]

@zllkjc apologies - don't want to bug you but I'm wondering if you have any thoughts on how to address this problem? Is there any way we can provide URLs at runtime? We need to specify the URLs depending on the environment. I haven't been able to solve this yet.

For additional context, in a previous non-modern.js proof of concept we had utilized this plugin https://www.npmjs.com/package/external-remotes-plugin -- hoping to do something similar here if it all possible

[zllkjc]

Sorry for miss this disscussion.

In my opinion, this part is depends on module federation, not modern.js.

mf manifest.json may not support this.

[zllkjc]

But seems a interesting feature. Let me invite @2heal1 discuss together!

[Billybobchops]

I actually just got it working by utilizing it as a runtime plugin!
https://github.com/Billybobchops/payer-portal-mdrn/blob/main/src/runtime/dynamic-remotes-plugin.ts

[zllkjc]

Wow, Good job !