Micro front end asset loading issue on base app

Question

I've created two micro apps using Angular & React Js and base/container app in Angular. Micro apps are running on different ports and base app importing the main.js file from specific ports. I've achieved this functionality by following this article- https://medium.com/javascript-in-plain-english/create-micro-frontends-using-web-components-with-support-for-angular-and-react-2d6db18f557a. Here he has copied assets of each micro apps into base app but is there any better approach by which i can independently load the asset into base app on run time and access base app server can access.

Answer 1

I have solved it by passing the host to the render function. So basically I use the variable host near each image and it will have full URL. If you load the microfrontend separate host will be empty so it should load from same host.

window.renderHeader = (containerId, history, host) => {
    ReactDOM.render(
        <App history={history} host={host} />,        
        document.getElementById(containerId),
    );
};

In the container I then do

const renderMicroFrontend = () => {
    window[`render${name}`](`${name}-container`, history, host);
};

And in the HTML

function App({history, host}) {
    return (
        <div className="header">
            <div className="logo">
                <img src={host + "/logo.png"} alt="logo" />
            </div>
        </div>
    );
}