This is an example application using react (and webpack/rspack) as a host, and create react application as remotes. These are dynamically resolved in each page route.
Microfrontend architecture is an approach to breaking up your front-end into a set of independently deploy-able, loosely coupled applications and/or components. These applications are then assembled together to act as a single user experience, once deployed.
When we talk microfrontends, we generally need to load applications individually asynchronously only when requested. We do this by using a feature known as Module Federation to create a single deployable artifact of an application, which can be loaded on demand.
More Information: Documentation
When we talk about micro-frontends or micro-sites, we often use words like HOST and REMOTE. A remote is a single page react application. A host is a parent application that ties all remotes together.
Often time a host can extend configuration, security, types, routing, and many other features to remotes, so that each remote does not have to implement them individually.
Lets take a quick look at the folder structure before we get too deep.
For now we will keep the structure loose and simple:
├─── 📁 host > React Host
│ ├─── 📁 layout > Shared layout
│ └─── 📁 pages > Routing
│
└─── 📁 remotes
├─── 📁 home > React Remote using JSX
├─── 📁 profile > React Remote using Typescript
└─── 📁 sample > React Remote using JSX
## Getting started
Ive really worked hard to keep this extremely simple to stand up.
First we need to install PNPM..
```bash
npm install -g pnpm
Now we are ready to start!
$ pnpm install
$ pnpm startNow you may visit http://localhost:3000 in a browser.