Host and Remote Applications
Learn the distinction between host and remote applications in a federated setup and their roles.
Host and Remote Applications is a free Micro Frontends Architecture with Module Federation lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Micro Frontends Architecture with Module Federation learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
What are Hosts & Remotes?
In Module Federation, applications play distinct roles: some are hosts, and others are remotes. Think of it like a main stage (host) that invites guest performers (remotes) to share their acts.
This setup allows large applications to be broken down into smaller, independently developed and deployed pieces.
The Host: Your Main App
The Host application is the primary application that boots up first. Its main job is to consume (or load) modules that are exposed by other applications, called Remotes.
It's like the main website that pulls in different widgets or sections from other services.
Host's Key Responsibilities
The Host application has a few crucial responsibilities:
- Loading Remotes: It tells Webpack which remote applications it needs to load.
- Providing Context: It often provides the overall application shell, routing, and shared dependencies.
- Integrating Modules: It renders components or uses functions provided by the remote applications.
The Remote: A Shared Piece
A Remote application is a separate, self-contained application that exposes specific parts of its code for others to consume. It can also consume modules from other remotes (or even act as a host itself!).
These exposed parts could be components, utility functions, or even entire pages.
Remote's Key Responsibilities
The Remote application focuses on:
- Developing Features: It builds specific features or UI components independently.
- Exposing Modules: It explicitly defines which parts of its codebase can be shared with host applications.
- Independent Deployment: It can be built and deployed without affecting the host or other remotes, as long as its exposed interfaces remain consistent.
ModuleFederationPlugin: The Link
Webpack's ModuleFederationPlugin is the magic behind this interaction. Both host and remote applications use this plugin in their Webpack configurations.
It orchestrates how modules are exposed by remotes and consumed by hosts, making them available at runtime.
Remote: Exposing Modules
On the Remote side, you use the exposes property in the ModuleFederationPlugin configuration.
This tells Webpack which files or modules from your remote application should be made available to others.
// webpack.config.js (remote app)
new ModuleFederationPlugin({
name: 'remoteApp',
exposes: {
'./Button': './src/Button.js',
'./Header': './src/Header.js'
}
})Host: Consuming Remotes
On the Host side, you use the remotes property to declare which remote applications you want to consume from.
You specify a unique name for the remote and its entry point URL.
// webpack.config.js (host app)
new ModuleFederationPlugin({
name: 'hostApp',
remotes: {
remoteApp: 'remoteApp@http://localhost:3001/remoteEntry.js'
}
})How They Interact
When the Host application loads, it fetches the remoteEntry.js file from the configured remote URL. This entry file contains a manifest of all modules the remote exposes.
The Host can then dynamically import and use these exposed modules as if they were part of its own codebase.
Quick Check
Which of the following best describes the primary role of a Host application in a Module Federation setup?
Host & Remote Recap
We've learned about the fundamental roles of Host and Remote applications in Module Federation.
- Host apps are the main integrators, consuming functionality.
- Remote apps are independent units that expose specific modules.
Understanding these roles is key to building scalable micro frontends. Next, we'll dive deeper into setting up your first federated application!
Frequently asked questions
Is the “Host and Remote Applications” lesson free?
Yes — the full text of “Host and Remote Applications” is free to read here on the web, and the Micro Frontends Architecture with Module Federation course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Micro Frontends Architecture with Module Federation course, upgrade to CoddyKit PRO.
What will I learn in “Host and Remote Applications”?
Learn the distinction between host and remote applications in a federated setup and their roles. You practise Micro Frontends Architecture with Module Federation with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Micro Frontends Architecture with Module Federation?
No prior experience is required. Micro Frontends Architecture with Module Federation on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Host and Remote Applications” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Micro Frontends Architecture with Module Federation lesson?
Yes. Every Micro Frontends Architecture with Module Federation lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Webpack Fundamentals Review
- Introducing Module Federation
- Host and Remote Applications
- Configuring Shared Dependencies