Remotes url changing by enviroment

[kod-man]

I tried to make some investigation to change 'http://localhost:5173/assets/remoteEntry.js', by env.

QA env: the link should be https// qa.sth.example.com
Test env: the link should be https// test.sth.example.com

How can I manage it?

Ps: we use Octopus for deploying the app

import federation from '@originjs/vite-plugin-federation';
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    react(),
    federation({
      name: 'adminPortal',
      remotes: {
        mainApp:
          '{linkToBeChanged}/assets/remoteEntry.js',
      },
      shared: ['react', 'react-dom'],
    }),
  ],
  build: {
    modulePreload: false,
    target: 'esnext',
    minify: false,
    cssCodeSplit: false,
    outDir: 'build/children1',
  },
  test: {
    environment: 'jsdom',
    globals: true,
    css: true,
    setupFiles: './src/tests/setup.js',
  },
});

[shivangi-sinha-maersk]

You can try this approach:

1. update scripts in package.json to pass env as mode during build
   "build:<env>": "vite build --mode <env>" // env=test
2. In your vite config, read the mode
   const env = loadEnv(mode, process.cwd(), "");
3. Maintain a map of all urls agianst the env keys

{
   <env>: {
        spot: {
             remoteApp: "app1",
             url: "<app1_Url>/assets/remoteEntry.js"
       }
   }
}

4. pass the remote urls using a utility function, that returns the url map based on env:

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), "");
  return {
    base: "/",
    server: {
      port: 8080
    },
    plugins: [
      federation({
        name: "adminPortal",
        remotes: getRemotes(env),
        shared: ['react', 'react-dom'],
      }),
      
// other configs