Hackforge Academy

Explanation

The first step is to create a React host application that will act as the main container for the micro frontends.

Code:

npm create vite@latest host-app -- --template react
cd host-app
npm install
npm run dev

Explanation

Create a separate React application for a specific business feature. For example, the product application can be developed and maintained independently.

Code:

npm create vite@latest product-app -- --template react
cd product-app
npm install
npm run dev

Explanation

The micro frontend contains its own React components and business logic. It can be developed independently from the host application.

Code:

function ProductApp() {
  return (
    <div>
      <h2>Products</h2>
      <button>Add Product</button>
    </div>
  );
}

export default ProductApp;

Explanation

The host application needs a mechanism to load the micro frontend. Common approaches include Module Federation, Web Components, npm packages, or loading a remote application.

Code:

// Conceptual structure
Host App
   ↓
Load Product Micro Frontend
   ↓
Display Product UI

Explanation

The final architecture contains a host application and independently developed micro frontends. Each application can have its own development and deployment process while appearing as one application to the user.

Code:

Host App
├── Header
├── Navigation
├── Product Micro Frontend
├── Cart Micro Frontend
└── Payment Micro Frontend

Product Team  → Build → Deploy
Cart Team     → Build → Deploy
Payment Team  → Build → Deploy