Skip to content

Commit 37e611c

Browse files
committed
[Blog] [Ajay]: Module federation demo - Add remote file load description
1 parent 070f7fa commit 37e611c

File tree

1 file changed

+5
-2
lines changed

1 file changed

+5
-2
lines changed

TestArena/Blog/React/ModuleFederationDemo.razor

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,8 +51,9 @@
5151
</ul>
5252
</p>
5353

54-
<BlogImage Number="1" Description="Module Federation Integration architecture"
55-
ImagePath="/images/blog/react/module-federation/module federation.svg" />
54+
<BlogImage Number="1"
55+
Description="Module Federation Integration architecture"
56+
ImagePath="/images/blog/react/module-federation/module federation.svg" />
5657

5758
<blockquote>
5859
🧩 <strong>Micro Frontends</strong>: An architectural approach where frontend applications are broken down into smaller, independently deployable apps that work together.<br>
@@ -173,6 +174,7 @@ npm start
173174
<h4>🧲 Step 2: Consume in the Host App</h4>
174175

175176
<h5>host-app/webpack.config.js</h5>
177+
176178
<CodeSnippet Number="4" Language="js" Description="Module Federation Plugin setup in webpack config">
177179
new ModuleFederationPlugin({
178180
name: "host_app",
@@ -215,6 +217,7 @@ npm start
215217

216218
<BlogImage Number="3" Description="Remote component loading in host component"
217219
ImagePath="/images/blog/react/module-federation/Remote component loading in host component.png" />
220+
<p><b>Notice</b> the network tab in above image to see <code>remoteEntry.js</code> file being loaded from <code>http://localhost:3001</code></p>
218221
<p class="tip">💡 And the best part? You can update the remote app independently, and the host will always fetch the latest version at runtime.</p>
219222

220223
<h3>🧠 Key Concepts at a Glance</h3>

0 commit comments

Comments
 (0)