When will you use this?

Use this lesson to build something you can show in interviews and on your resume.

• Portfolio projects prove you can finish — recruiters click your demo link.
• Build one dashboard or shop end-to-end; that beats ten half-finished tutorials.

Real-world: shell + remote modules

Large corp runs shell app loading HR, Inventory, and CRM as federated remotes — shared auth in shell, independent deploys.

Production-style code

// webpack Module Federation — shell
remotes: {
  hrApp: 'hrApp@https://hr.example/remoteEntry.js',
  crmApp: 'crmApp@https://crm.example/remoteEntry.js'
}

function App() {
  return (
    <AuthShell>
      <Routes>
        <Route path="/hr/*" element={<RemoteApp name="hrApp" module="./App" />} />
        <Route path="/crm/*" element={<RemoteApp name="crmApp" module="./App" />} />
      </Routes>
    </AuthShell>
  );
}

What happens in production: Capstone architecture topic — how Flipkart-scale orgs split frontend ownership across teams.

Lesson example (start here)

Copy this smaller example first. Once it works, compare it with the real-world code above.

// Shell webpack.config — Module Federation
plugins: [
  new ModuleFederationPlugin({
    name: 'shell',
    remotes: {
      inventory: 'inventory@http://localhost:3001/remoteEntry.js'
    },
    shared: { react: { singleton: true }, 'react-dom': { singleton: true } }
  })
]

Line-by-line walkthrough

How it works (big picture)

• Shell loads remoteEntry.js at runtime.
• Shared react singleton prevents two Reacts.
• Each remote deploys independently.

Do this on your computer

1. Complete monolith modular app first.
2. Extract one feature as remote in dev.
3. Document shared dependency versions.
4. Read the real-world section and name which part of the app uses this topic.
5. Run the example locally and confirm the same behavior in the browser.
6. Change one value in the example (text, initial state, or URL) and predict what will happen before you save.

Experiments — try changing this

• Change text or labels in the example and save — watch the browser update.
• Break the code on purpose (remove a bracket), read the error message, then fix it.

Remember

Shell + remotes + shared deps. Independent deploy per remote. Only when organization scale needs it.

Common questions