Implementing Micro Frontends with CRACO: React Host and Angular Remote

Micro frontends have gained significant popularity in recent years as a way to break down large, monolithic front-end applications into smaller, more manageable parts. This architectural approach allows teams to work independently on different parts of a web application, making it easier to scale, maintain, and deploy. In this article, we’ll explore how to implement micro frontends using CRACO, with a React host and an Angular remote.

Understanding Micro Frontends

Micro frontends are an extension of the microservices concept, applied to the front-end layer of a web application. Instead of building a single, monolithic front-end codebase, micro frontends allow you to split your user interface into smaller, self-contained parts, often developed by separate teams. Each part can be developed using different technologies and deployed independently.

There are several approaches to implementing micro frontends, including:

1. iFrames: Each micro frontend is loaded as an iframe within the host application. While this approach provides strong isolation, it can lead to performance and security concerns.
2. Web Components: Micro frontends are built as web components, which can be used within the host application. This approach promotes reusability but may require some extra effort to achieve the desired level of isolation.
3. Server-Side Includes (SSI): The host application includes the micro frontends using server-side includes, where the server stitches together the different parts before rendering the final HTML. This approach provides control but may require more server-side logic.
4. In this article, we’ll focus on the iFrame approach with CRACO, which stands for “Create React App Configuration Override.” CRACO allows us to customize the configuration of a Create React App (CRA) project to integrate micro frontends.

Setting Up the React Host

To begin implementing micro frontends with CRACO, you’ll first need to set up the React host application. If you don’t already have a React project, you can create one using CRA:

npx create-react-app my-host-app cd my-host-app

Now, you can install CRACO to customize the CRA configuration:

npm install @craco/craco

Next, create a craco.config.js file in your project root to override CRA's configuration. Here's a minimal example:

// craco.config.js
module.exports = {
  webpack: {
    configure: {
      output: {
        // Ensure that the output is a single JavaScript file
        filename: 'static/js/main.js',
      },
    },
  },
};

Now, your React host is set up to load micro frontends via iframes.

Creating the Angular Remote

For the Angular remote, you’ll need to create an Angular application. If you don’t have one already, you can generate a new Angular project:

ng new my-remote-app cd my-remote-app

In the Angular remote, you’ll expose the parts you want to use in the host application as custom elements (web components). You can achieve this using the Angular Elements library, which allows you to convert Angular components into web components.

Install Angular Elements:

ng add @angular/elements

Create your Angular component and convert it into a custom element:

// src/app/my-component.component.ts
import { Component, Input, OnInit } from '@angular/core';
import { createCustomElement } from '@angular/elements';

@Component({
  selector: 'app-my-component',
  template: '<p>Hello from Angular!</p>',
})
export class MyComponentComponent implements OnInit {
  constructor() {}

  ngOnInit(): void {
    const element = createCustomElement(MyComponentComponent, {
      injector: this.injector,
    });
    customElements.define('app-my-component', element);
  }
}

Build your Angular app:

ng build --prod --output-hashing none

Integrating the Angular Remote into the React Host

Now that you have your React host and Angular remote, you can integrate them. In your React host application, you can load the Angular remote component using an iframe:

// src/App.js in your React host
import React from 'react';

function App() {
  return (
    <div className="App">
      <h1>Micro Frontends with CRACO</h1>
      <iframe title="Angular Remote" src="http://localhost:4200"></iframe>
    </div>
  );
}

export default App;

Remember to replace the iframe src with the URL of your Angular remote application.

Running the Applications

To run both applications, start the React host:

npm start

And start the Angular remote:

ng serve

With this setup, your React host will load the Angular remote component within an iframe, effectively implementing a micro frontend architecture.

Conclusion

Implementing micro frontends using CRACO with a React host and an Angular remote is a powerful way to break down large front-end applications into smaller, manageable parts. This approach enables teams to work independently on different sections of a web application, promoting scalability, maintainability, and faster development cycles. By combining the strengths of React and Angular, you can leverage the best of both worlds in your micro frontend architecture.