Skip to content

Beginner Guide for Easier

As a total beginner in 2025, here’s the clear, honest answer:

Start with Module Federation (the “host” style) — it is dramatically easier, faster, and less frustrating for beginners than single-spa.

Criteria (important for beginners) Module Federation Host single-spa Shell Winner for Beginners
Time to see a working 2-MFE app 15–30 minutes 2–6 hours (or a full day if you get stuck) Module Federation
Number of new concepts you must learn 2 (host + remote) 7+ (lifecycles, parcels, import maps, activity functions, etc.) Module Federation
Copy-paste working example Yes, one command scaffolds everything Very few truly beginner-friendly templates in 2025 Module Federation
Error messages Usually clear Webpack errors Cryptic “bootstrap is not a function” etc. Module Federation
Community tutorials & YouTube videos Hundreds of fresh 2024–2025 tutorials Mostly 2019–2022, many outdated Module Federation
Works out-of-the-box with Create React App / Vite Yes (official plugins) Requires ejecting or complex config Module Federation

Step 1: One-command setup (takes < 3 minutes)

Use the official template that literally everyone recommends in 2025:

# Option A — Vite + React (fastest dev server)
npm create vite@latest my-mfe-app -- --template react
cd my-mfe-app
npm i @originjs/vite-plugin-federation   # the beginner-friendly plugin

# Option B — Webpack 5 (still very popular)
npx create-mf-app
# → choose “host” for the first app, “remote” for the second

create-mf-app is the #1 beginner tool in 2025 (made by the Module Federation core team).

It asks you 3 questions and gives you a perfectly working host + remote.

Step 2: Run two apps (15 seconds)

# Terminal 1 — the host (shell)
cd host-app
npm start    # → opens http://localhost:3000

# Terminal 2 — the remote micro frontend
cd remote-app
npm start    # → opens http://localhost:3001

Go to localhost:3000 → you instantly see the remote app magically appear inside the host. That “wow” moment keeps beginners motivated.

Step 3: Add a second remote (copy-paste 5 lines)

That’s it — you now understand 80% of what big companies do.

Why single-spa is a bad first choice for beginners in 2025

Problem You Will Hit in the First Hour Example Error You’ll Google for Hours
You need to export bootstrap/mount/unmount exactly right “Application X died in status LOADING_SOURCE_CODE”
SystemJS vs import maps confusion “single-spa: application X failed to bootstrap”
Activity functions & routing logic Infinite loops or nothing ever mounts
Very few up-to-date beginner tutorials Most videos still use the old single-spa-register syntax

Real quote from beginners on Discord (2024–2025):

“I spent 3 days trying to make single-spa work → switched to Module Federation and had it running in 20 minutes.”

Exact Learning Roadmap I Give Every Junior / Bootcamp Student in 2025

Week What to Do Tool
1 Module Federation with create-mf-app or Vite Easiest possible setup
2 Add a second and third remote Same tool
3 Shared React + React-DOM (singleton) Learn version handling
4 Deploy host + remotes separately (Vercel/Netlify) Real independent deployment
5–6 Now switch to single-spa (or single-spa + import maps) when you hit Module Federation limits You’ll understand why it exists

Bottom Line for You Right Now

Start with Module Federation host/remote

(it is the training wheels version of micro frontends)

You will:

  • Have a working app today
  • Learn real concepts that companies actually use
  • Not hate your life

After you’re comfortable (usually 1–2 weeks), then learn single-spa if you need true framework independence.

One-liner command to start right now:

npx create-mf-app@latest
# → name: mfe-beginner
# → choose “host” for first app, “remote” for second
# → pick React + TypeScript if you want

You’ll be smiling in 15 minutes. Promise.