Creating Micro Frontends with React
As web applications grow in complexity, so does the need for efficient architecture that allows teams to work simultaneously without stepping on each other’s toes. Enter micro frontends: a paradigm shift in frontend development that breaks up monolithic applications into smaller, manageable pieces. In this blog, we’ll explore how to create micro frontends using React, a popular JavaScript library for building user interfaces.
What Are Micro Frontends?
Micro frontends extend the microservices approach to the frontend world. Instead of one large application, micro frontends involve multiple self-contained applications (or “micro frontends”) that can be developed, tested, and deployed independently. Each team can choose its own technologies, allowing greater flexibility and scalability.
Benefits of Using Micro Frontends
The micro frontend architecture offers several advantages:
- Scalability: Teams can add or update functionalities independently without affecting the entire application.
- Flexibility: Different teams can use different tools and libraries, making it easier to adopt new technologies.
- Improved Deployment: Smaller applications can be deployed more frequently and with less risk of breaking the entire system.
- Enhanced team autonomy: Teams can operate independently, which can speed up development and reduce dependencies.
Challenges of Micro Frontends
Despite their advantages, micro frontends come with their own set of challenges:
- Integration: Combining different frontend technologies can lead to inconsistencies.
- Complex Build Process: Managing the lifecycle and dependencies of multiple applications can be complex.
- Performance: Loading multiple micro frontends can contribute to slower performance if not handled correctly.
Getting Started with Micro Frontends and React
To create a micro frontend using React, we can use a few modern techniques and tools. The following steps illustrate how to create a simple micro frontend system:
1. Project Setup
Start by setting up a new React application for your micro frontend. You can use Create React App (CRA) for this purpose. Run the following command:
npx create-react-app my-micro-frontend
Once your project is set up, navigate into the project directory:
cd my-micro-frontend
2. Define Your Micro Frontends
Let’s assume we are creating a simple e-commerce web application with two micro frontends:
- Shopping Cart
- Product Catalog
Create separate directories for your micro frontends:
mkdir shopping-cart product-catalog
Now, initialize a new React application in each of these directories:
cd shopping-cart
npx create-react-app .
cd ../product-catalog
npx create-react-app .
3. Building the Micro Frontends
Let’s add simple components to each micro frontend application.
Shopping Cart Micro Frontend
Open the `shopping-cart/src/App.js` file and replace its contents with the following:
import React from 'react';
function App() {
return (
Shopping Cart
Your items will appear here.
);
}
export default App;
Product Catalog Micro Frontend
Next, update the `product-catalog/src/App.js` file with this content:
import React from 'react';
function App() {
return (
Product Catalog
List of products goes here.
);
}
export default App;
4. Combining Micro Frontends
To integrate these micro frontends into a single application, we need a shell application. This will load the micro frontends dynamically. Create another React app in a new directory:
npx create-react-app shell-app
In your shell application, install a library for importing applications remotely. We’ll use an npm package called “single-spa-react”:
npm install single-spa-react
Next, create a simple setup in the `shell-app` to render your micro frontends. Open the `src/index.js` file and add the following code:
import React from 'react';
import ReactDOM from 'react-dom';
import { registerApplication, start } from 'single-spa';
import { mountRootParcel } from 'single-spa-react';
const loadApp = (name) => () => import(`http://localhost:3000/${name}/main.js`);
registerApplication('shopping-cart', loadApp('shopping-cart'), location => location.pathname.startsWith('/cart'));
registerApplication('product-catalog', loadApp('product-catalog'), location => location.pathname.startsWith('/products'));
start();
ReactDOM.render(Micro Frontend Shell, document.getElementById('app'));
5. Serving the Micro Frontends
To serve each application, you can use a simple HTTP server. A common choice is `http-server`, which can be installed globally:
npm install -g http-server
Run this command in each micro frontend’s directory to serve them:
http-server build -p 3000
Replace `3000` with different port numbers for each micro frontend to avoid conflicts.
6. Navigating Between Micro Frontends
You can navigate to your micro frontends through respective URLs. For example:
When you navigate to these URLs, you should see the respective micro frontends render their content correctly.
Conclusion
In this blog, we explored how to create micro frontends using React, utilizing both separate application architectures and a shell application to bring them together. Micro frontends allow teams to build and deploy applications independently, leading to increased productivity and flexibility in technology choices. While micro frontends may introduce some complexity in integration and management, the benefits they bring to large-scale applications are worth considering.
As you embark on your journey with micro frontends, remember to assess your team’s needs, goals, and the expected scale of the application to decide if this architecture is the right fit for you. Happy coding!
Further Reading
If you’re interested in diving deeper into micro frontends or related architecture patterns, consider these resources:
