I'm trying to build a micro-frontend app with Qiankun. I'm using create-react-app as main-app and vite-react as sub-app. It was working fine locally. The main-app is running on port 8080 and child-app on 8083.
But when I test it on docker, I'm getting errors when navigating to child app route.
After sometime, I noticed that the child-app's js file is trying to load from port :8080 (main-app's port) instead of child app. But the css was loaded correctly from child-app's port. To tackle this I added base in vite-config.js and now it works correctly.
export default defineConfig(({ mode }) => {
return {
base: "http://localhost:8083",
plugins: [qiankun("child-app-1")],
server: {
port: 8083,
},
};
});
My question is how to do this with different environments. For ex: if I want to add for dev, staging and prod envs? I cannot pass env option to npm build command as I'm using circleci to do builds (where the circleci config just has npm run build).