The code for this article on Github…
A lot of Micro Frontend frameworks expect you to eject React or build the application in “their way”. Some frameworks change state management, others require a certain folder structure, … Podium does not expect you to change your app.
In this article, we’ll look at how to create 2 basic react application using the create-react-app command and combine them on a single page. As a bonus, I will use the Podium event bus to send messages from one Micro Frontend to the other.
To follow this article, some knowledge of React and Podium is required…
Here’s an article about server-side composition with Podium.
The React applications can be developed and tested in complete isolation.
This article won't go in-depth at developing and testing a React application… If you want to have confidence in your code through testing, I highly recommend Kent C. Dodds “testing javascript”.
The React Micro Frontends (Podlets)
Create 3 folders… 1 for the base application and 2 for the react micro frontends. In each of the micro frontend folder, run the create-react-app command.
Create React App is an officially supported way to create single-page React applications. It offers a modern build setup with no configuration.
After creating both React application, we’ll need some small changes so both our React Micro Frontends will play nicely together. There are some consequences of rendering multiple React apps on 1 page and I learned them the hard way…
Render div
First of all the div where React renders the application should be unique.
In a standard installation, both React applications render the App-component in de ‘div’-element with ID “root”. When we will combine both React applications on 1 page, we can’t have 2 divs with the same ID.
In each React application in public/index.html
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="react-message"></div>
</body>Change the ID of the div (initially “root”) to something else.
And then open the src/index.js file
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById(‘react-message')
);Change the ID in the getElementById function to match the div ID in the public/index.html file.
That’s it… Now, you can develop the React application in isolation the way you like.
Tip: CSS Modules & CSS methodology
When 2 or more applications come together, the CSS of the application are also added and loaded. Component CSS will be overwritten if the same CSS class names are used in different applications.
CSS-modules are standard in a react application created with the ‘create-react-app’ command. Use it, and save yourself a lot of headaches.
It’s recommended to use the BEM methodology or using an extra prefix for each CSS class. The prefix can be the name of the application and serves to ‘scope’ of ‘namespace’ the CSS classes.
Creating the Podium podlets
A Podium layout (page) requires 3 things to combine Micro Frontends:
- HTML
- CSS files
- JS files
The Podlet generates a manifest.json file which stipulates where the layout can get the files.
First, add the required packages…
yarn add express @podium/podletNext, create a file in the root of the project (I call mine podlet.js), and import the necessary packages and start with the definition of the Podlet.
const express = require("express");
const Podlet = require("@podium/podlet");
const fs = require("fs");const app = express();// Basic definition of the podlet
const podlet = new Podlet({
name: "reactMessagePod", // required
version: "0.1.0", // required
pathname: "/", // required
manifest: "/manifest.json", // optional
development: true, // optional, defaults to false
});
React spoils their developers because after building the React application, it creates an asset-manifest.json file. In our Podlet-file, we can read that file. In other words, we can create a Podlet-file that is almost generic for each React application.
// Read the asset manifest using the node filesystem
let rawdata = fs.readFileSync("build/asset-manifest.json");
let assets = JSON.parse(rawdata);// All entrypoint files css and js should be added to the podlet definition.
// Ideally should a CDN host allvstatic files...
// For demonstration purposes, the files are served through the podlet process.assets.entrypoints.forEach((element, index) => {
if (element.indexOf(".css") !== -1) {
podlet.css({ value: "http://localhost:7100/" + element });
} else if (element.indexOf(".js") !== -1) {
podlet.js({ value: "http://localhost:7100/" + element, defer: true });
}
});
The script ends with the definition of the HTML and generation of the manifest.
// add HTML to send. This is the div ID in public/index.html
app.get(podlet.content(), (req, res) => {
res.status(200).podiumSend('<div id="react-message"></div>');
});// generate the podlet manifest
app.get(podlet.manifest(), (req, res) => {
res.status(200).send(podlet);
});//start the app at port 7100
app.listen(7100);
Podium Layout — Combining the React applications
Combining the React applications is not React specific… It’s just the Podium-way of creating a layout (page containing micro frontends).
Docs for creating a layout: https://podium-lib.io/docs/layout/getting_started
Here’s the NodeJS code that registers both React Podlets and renders them on a single page.
(base-app/layout.js)
Conclusion
Without a lot of changes, we can develop React application in complete isolation from each other.
The Podium Podlet layer is completely independent of the application. As a developer, you keep all the freedom to create your React Micro Frontend the way you like.
Some takeaways
When working with multiple teams, you should communicate a bit:
- Name of your app / Podlet
- Namespace CSS (prevent overwriting)
- Folder static files
- Shared component library
- Basic project structure
- Basic packages
To have a consistent UI across all Micro Frontends, be prepared to invest in a design system or at least the use of an open-source component library.
Discussing the basic packages and project structure is very important.
Each Micro Frontend should try to use a similar folder structure (component folders) and there should be some understanding of the basic packages. When all teams agree, document it.
Example questions:
State management with Redux or Hooks? Global state through LocalStorage or cookies? Redux folder structure? Component folder structure? CSS methodology?
This article is a part of a series of articles…
Here are the other articles:
An introduction to Podium
Svelte server-side Micro Frontends with Podium
VueJS Micro Frontends with Podium
Micro Frontends with Podium (React, Svelte & VueJS)
