DEV Community

The Complete Guide to Micro Frontend with React.js for 2025

Rahul Sharma on March 17, 2022

What is a micro frontend? The Micro Frontend style of architecture design does for the frontend of an application what microservices d...

Read full post

Luke • Jan 15 '23

Just testing this out and found it a lot easier than I expected, thank you this is a very neat article.

How would you address security concerns like seamlessly managing authentication & access control across multiple distributed apps?

How would you control/restrict who can add your export as a remote?

Rahul Sharma • Jan 17 '23

content security policy you can use.

Taye • Jan 17 '23

Thank you very much for the article, was really helpful

José María CL • Jun 30 '23

Simple, Easy, Useful. Than you a lot!

Alex • Oct 3 '23 • Edited

Out of curiosity:

exposes: All the component names that you want to expose to the container app.

How to expose multiple components from the same "remote" app? And what if the "container" would be on Angular?

Rahul Sharma • Oct 4 '23 • Edited

// React app => inject.js

const toReactApp = (el) => ReactDOM.render(<Counter />, el);
export default toReactApp;

// webpack.config.js

exposes: {
        "./Counter": "./src/components/Counter",
        "./Counter1": "./src/components/Counter1",
        './toReactApp': './src/inject.js',
}

// Angular

import toReactApp from './<path>/toReactApp'

@Component({
    selector: 'app',
    template: ` <div #myDiv>Some text</div>`,
})
export class AppComponent implements AfterViewInit {
    @ViewChild('myDiv') myDiv: ElementRef;

    ngAfterViewInit() {
        toReactApp(this.myDiv.nativeElement);
    }
}