5 Steps to Turn a Random React Application Into a Micro Front-End

Get started with micro front-ends, a novel way to run multiple applications, that feel like just one application

Photo by Duminda Perera on Unsplash

What is a micro front-ends approach? The term micro front-ends first came up in the ThoughtWorks Technology Radar in November 2016. It extends the concepts of microservices to front-end development.

The approach is to split the browser-based code into micro front-ends by breaking down application features. By making smaller and feature-centered codebases, we achieve the software development goal of decoupling.

Although the codebases are decoupled, the user experiences are coherent. In addition, each codebase can be implemented, upgraded, updated, and deployed independently.

Here is the paradise of micro front-ends. JavaScript applications, regardless of frameworks and versions, are launched by a container. These applications, legacy and new, work together seamlessly, and act like one application.

Image by Author

In our example, we will tackle the simpler case of React micro front-ends.