Microfrontends With React

React Microfrontends

Create React Applications -

Let’s create three react application,

Blogs Application -

Let’s create Constant add array of blogs,

Header Application -

Here, We simply add header div to demonstrate Header Application. So, let’s add all required dependencies.

Container Application -

Now, it’s time to setup our Container Application which actually use/merge both Header and Blogs Application into our Container Application (Our Main Website)

SetUp Micro Frontends -

Think, how my Container app knows about Header Application and Blogs Application. Let’s set it up one by one.

SetUp Web Application Port -

Container Application — Port 3000

SetUp Micro Frontends for Blogs Application -

Let’s install react-app-rewired package which overrides the build config without ejecting the app.

SetUp Microfrontends for Header Application -

  1. Install react-app-rewired
  2. Update package.json
  3. Update index.js file

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store