Load ReactJS App from another server and execute

"Micro frontends":

https://medium.com/@tomsoderlund/micro-frontends-a-microservice-approach-to-front-end-web-development-f325ebdadc16

I came across this idea only recently. So, I don't have much to tell you regarding your requirements. But it looks promising. But also may be an overkill.

And by following links you'll be able to find some code examples.

E.g. https://single-spa.js.org/docs/examples/

simple example without iframe

<script>
(function(window,document, id, scriptUrl, appId){

    //  create container where to render app
    var containerDiv = document.createElement("DIV");   
    containerDiv.id=appId           
    document.getElementById(id).appendChild(node);


    //  add script tag
    var scriptTag = document.createElement('script');
    scriptTag.type = 'text/javascript';
    scriptTag.src = scriptUrl;
    document.body.appendChild(scriptTag);

    //  also you may need to send you app info about where should render (id)
    window.MY_WIDGET_ID = appId

    })(window,document, 'where-to-render-app-id', 'script-url', 'app-id');</script>
<script >

// inside your react app you should add

render( document.getElementById(window.MY_WIDGET_ID ))

A regular React application is a set of JS(let's ignore the CSS, images, other assets this time) files. And there is a file called the entry which mounts the entire application to a specific dom. You might be familiar with the below code.

ReactDOM.render(<App/>, document.getElementById('app'))

The above code is auto executed usually once the entry is loaded onto a predefined dom. We can expose it as an initial handler of the application.

window.apps = {} // This better be executed in a script hosted by the website
window.apps['my-app'] = dom => ReactDOM.render(<App/>, dom)

The script hosted by the website then is able to start the application by calling the function above.

window.apps['my-app'](document.getElementById('root'))

In this way, the website takes the control of initial a React application, at any time, onto any dom, or even any instance.

ps. Ignore type checks, null checks. You should add it as you need to make sure no runtime error happens.

As an other option, you could wrap your react app into web component. Here's the example. But it could be overengineering, from case to case, mpc's approach could be more reasonable easily.

you can create a shell app that will load your remote code and run it.

btw, check out fronty, it is a micro-frontend tool that can help you with that with no hassle.

This is one of the feature React offers. If you take the Basic files provided by React it is an HTML page with a <div id="root"></div>. By default, React is built as a single page App. In fact, you can edit directly this HTML file (located in Public folder) and the React will still run.

So to achieve what you are looking for, build your React project include it to your HTML project (The same include present in the public/index.html -> <script src="/static/js/main.******.chunk.js"></script>.

In the React project, you add the same render condition:

if (document.getElementById("root")) {
    ReactDOM.render(
            <App />
        document.getElementById("root")
    );
}

Wrapping the ReactDom.render in an if is to make sure the desired ID is present in your dom.

That's it, it should be working. Have fun.