Skip to content

Detailed Guide

Let's create a detailed guide on setting up a Monorepo with Module Federation for Micro Frontends using Nx. I'll break it down into simple steps, covering:

  • Project Setup with Nx
  • Creating Micro Frontend Apps
  • Setting Up Module Federation
  • Sharing Components & State
  • Running & Deploying the Micro Frontends

Let me know if you'd like this guide in canvas mode for easy editing, or if you'd prefer me to share it here directly. 😊

Short Guide

Yes, when you create a host app and remote apps using Nx, they are automatically generated inside the apps/ folder.

Note

when we create or generate using npx create-nx-workspace@latest <Workspace name>, then it will gives us list of action to perform. and if we select mono repo with js. it only then create apps/ directory or folder. otherwise it doesn't create apps folder.

Here's how the file structure looks after running the commands:

✅ Folder Structure After Generating Host and Remote Apps

my-mfe-workspace/
├── apps/
│   ├── my-host/       👈 Host App (Main Shell)
│   ├── my-remote1/    👈 Remote App 1
│   └── my-remote2/    👈 Remote App 2
├── libs/              👈 (Optional for shared code)
├── node_modules/
├── nx.json
├── package.json
└── tsconfig.base.json

📁 What’s Inside Each App Folder?

Folder Description
my-host The host app (main entry point).
my-remote1 The first remote app.
my-remote2 The second remote app.

✅ How to Check the Installed Apps

To verify that the apps are installed, run:

nx show projects
You will see an output like this:
my-host
my-remote1
my-remote2

🚀 Ready to Run the Apps?

Now that the apps are created, you can serve them by running:

nx serve my-host

This will automatically start:

  • The host app at http://localhost:4200.
  • The remote apps (my-remote1 and my-remote2) on dynamic ports.