Current Process:

I am using Webpack in a React app to enable Module Federation. I have two apps: App1 (the main application) and App2 (the remote application).

I have configured App1 to run on port 3000 and App2 on port 3001. Inside webpack.config.js, I have set the remote URI for App2 as http://localhost:3001. I build my React app, I test it, and everything works as expected. Now, I want to deploy the build/dist folder and using NGINX to configure the domain. domain: - App1 will be redirected to this URI.

Problem:

The problem is that the remote URI is hardcoded inside the build/dist folder by Webpack. Since I am now planning to use a domain, I need to update the remote URI to something like [ on /app2 the 3001 port will be redirected].

What I want is a way to make the remote URI dynamic so that I can build the app once and update the remote URI at any time to use it anywhere.

Please let me know if you need any further details.