Image for post
Image for post

Micro Frontends — Integrate React with other applications and frameworks.

Allow a react application to be part of a micro frontends architecture

Originally posted on my personal blog debuggr.io

Lets Code

To make it easy to start and not waste time on building the “widget” and main application, i published a repository that will save you the time and hassle.

Clone

clone the repository to your local drive

git clone https://github.com/sag1v/react-external-integration-starter.git

Install And Run

main-app

cd main-app
npm install
npm start
cd counter-app
npm install
npm start
Image for post
Image for post
a message of “Something is already running on port 3000”
Image for post
Image for post
main app starter page
Image for post
Image for post
counter app starter page
const el = document.getElementById('counter-app');
ReactDOM.render(<Counter />, el);
npm run build
main-app/public/counter_dist
-main-app
-public
-counter_dist
-static
-css
react-counter.css
-js
react-counter.js
main-app/public/index.html
<div id="counter-app"></div>
Image for post
Image for post
<div id="counter-app"></div>
const el = document.getElementById('counter-app');
ReactDOM.render(<Counter />, el);

Our First Real Challenge

So this is the first challenge we need to solve, we want to control the order of the scripts or moreover the order of the function calls.
Of course this is one of the oldest challenges we have in JavaScript and the solution to that is modules, bundlers etc.
Our script tag is at the end of the body block but the problem here is that webpack is injecting the main-app scripts in run-time to the end of the body block as well. This is why we can’t run Counter after the main-app scripts.
We could hack around with the async / defer attributes of the script tag but that won’t solve our problem, even if it did solve the ordering, it won’t solve our real problem: get data in and out of the Counter and control it.

First Part Of The Solution

Maybe, instead of just running this code

const el = document.getElementById('counter-app');
ReactDOM.render(<Counter />, el);
npm run build
Image for post
Image for post
Image for post
Image for post

Passing props

While this is nice, we also want to pass data to our Counter . if we look at our mount function, there’s nothing stopping us to pass it parameters and it will pass parameters to the <Counter/> component.
In counter-app/src/index.js you should change your code to this:

Image for post
Image for post

It’s like the render you know and love!

Now lets revisit a quote from my tweet above:

Image for post
Image for post

Get data back

Well, we also wanted to get data back from our widget, if you remember we can pass onCountUpdate callback to get the current count . So if we can pass props as an object, nothing is stopping us from passing functions inside that object.

Image for post
Image for post

The multiple instances challenge

Looking at our Counter’s API in index.js :

Image for post
Image for post

The imperative code challenge

One of the core concepts and methodology of react is a Declarative way to write UI’s. we do it with Components.
If we look at our code in App.js we see a mess, its an imperative hell (i remind you that this is only a simple Counter and not a real world app!).
What if we wrap this entire code in a reusable component, lets say we call it… <ReactCounter /> so its easy to distinguish it from the real Counter.js.

Wrapping up

We observed on how we can interact with a separate and isolated react application, i chose to use another react application to interact with it but this is not limited only to react. you can call our mount function and pass it the props object with any framework you work with, these are just JavaScript functions.
As i mentioned at the top, this may solve a specific problem. This is not the “normal” way we write our applications, but it’s good to know we can do that when we need it, thanks to the flexible and solid API of react and ReactDOM.

References

It’s highly recommended to read Integrating with Other View Libraries from the react DOCS.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store