Skip to content

Commit bf73ca1

Browse files
andsonjosefandsonjosef
authored
Merge pull request #250 from valor-software/development
feat(article): added module federation with ssr
2 parents 9da8346 + a43b424 commit bf73ca1

4 files changed

Lines changed: 221 additions & 0 deletions

File tree

‎assets/articles/0062-module-federation-with-ssr-and-react-18/Alexey_Umanskiy.png‎

326 KB
Loading

‎assets/articles/0062-module-federation-with-ssr-and-react-18/Module-Federation-SSR.png‎

693 KB
Loading

‎assets/articles/0062-module-federation-with-ssr-and-react-18/module-federation-with-ssr-and-react-18.adoc‎

Lines changed: 209 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,209 @@
1+
=== Introduction
2+
3+
Web Development for medium to large-size projects is a tortuous road that often requires complex dependencies and components management. Module Federation is a technology solution that solves the challenges that come with large scale and creates a streamlined development process.
4+
5+
We're going to explore the combination of Server-Side-Rendering and Module Federation with React 18 and Webpack. The solutions described here are not limited to the listed technologies and can be reused in various combinations with other tools.
6+
7+
Multiple independent projects can work together as a single application using module federation. This makes it possible to design web applications more modularly, allowing several teams to work on various components of the program without having to be closely coupled. In the Module Federation, every project is a unique module that can consume and expose other modules.
8+
9+
By rendering a JavaScript application on the server, sending the finished HTML to the browser, and then adding JavaScript to the HTML to make the program interactive, SSR creates a web page. This technique typically improves JavaScript application performance, which is especially helpful for people with sluggish internet connections or outdated hardware.
10+
11+
We may use the same components and modules across various portions of the application and still keep the performance advantages of SSR when we combine Module Federation and SSR with React. This makes the development process more effective and enhances the user experience.
12+
13+
There are several potential difficulties to take into account while utilizing Module Federation with SSR and React. Making sure the modules are correctly exposed and consumed by the host and remote apps is one of the problems. Additionally, managing the application's state could be difficult, particularly if it needs to be displayed on the server before being hydrated on the client.
14+
15+
Using libraries like #@module-federation/nextjs-mf#, which offers a set of utilities to handle the configuration and setup of the host and remote applications, developers can get around these difficulties. The state of the application should be handled correctly on the server and client, and developers should make sure that the modules are exposed and consumed effectively.
16+
17+
Utilizing Module Federation with SSR and React can enhance the creation of online applications and the user experience, but it's vital to take into account the difficulties and use the proper tools and libraries to handle the setup and configuration of the host and remote applications.
18+
19+
=== Practical Sample
20+
==== Step 1: Create the host and remote applications
21+
22+
[, bash]
23+
----
24+
mkdir my-app
25+
cd ./my-app
26+
----
27+
[, bash]
28+
----
29+
npx create-next-app host
30+
cd host
31+
npm install --save @module-federation/nextjs-mf
32+
cd ../
33+
----
34+
[, bash]
35+
----
36+
npx create-react-app remote
37+
cd remote
38+
npm install --save-dev webpack webpack-cli html-webpack-plugin webpack-dev-server babel-loader
39+
----
40+
==== Step 2: Create the webpack configuration for the remote application.
41+
[, js]
42+
----
43+
const HtmlWebpackPlugin = require('html-webpack-plugin');
44+
const { ModuleFederationPlugin } = require('webpack').container;
45+
const path = require('path');
46+
module.exports = {
47+
entry: './src/index',
48+
mode: 'development',
49+
devServer: {
50+
static: {
51+
directory: path.join(__dirname, 'dist'),
52+
},
53+
port: 3001,
54+
},
55+
output: {
56+
publicPath: 'http://localhost:3001/',
57+
},
58+
module: {
59+
rules: [
60+
{
61+
test: /\.jsx?$/,
62+
loader: 'babel-loader',
63+
exclude: /node_modules/,
64+
options: {
65+
presets: ['@babel/preset-react'],
66+
},
67+
},
68+
],
69+
},
70+
plugins: [
71+
new ModuleFederationPlugin({
72+
name: 'remote',
73+
library: { type: 'var', name: 'remote' },
74+
filename: 'remote.js',
75+
exposes: {
76+
'./Nav': './src/Nav',
77+
},
78+
shared: {
79+
react: {
80+
singleton: true,
81+
version: '0',
82+
requiredVersion: false,
83+
},
84+
'react-dom': {
85+
requiredVersion: false,
86+
singleton: true,
87+
version: '0',
88+
},
89+
},
90+
}),
91+
new HtmlWebpackPlugin({
92+
template: './public/index.html',
93+
}),
94+
],
95+
};
96+
----
97+
==== Step 3: Create the next.config.js file for the host application.
98+
[, js]
99+
----
100+
// host/next.config.js
101+
const { NextFederationPlugin } = require('@module-federation/nextjs-mf');
102+
module.exports = {
103+
webpack(config, options) {
104+
if (!options.isServer) {
105+
config.plugins.push(
106+
new NextFederationPlugin({
107+
name: 'host',
108+
remotes: {
109+
remote: 'remote@http://localhost:3001/remote.js',
110+
},
111+
filename: 'static/chunks/remoteEntry.js',
112+
}),
113+
);
114+
}
115+
return config;
116+
},
117+
};
118+
----
119+
==== Step 4: Create a remote component.
120+
[, js]
121+
----
122+
//remote/src/Nav.js
123+
import React from 'react';
124+
const Nav = () => {
125+
return (
126+
<div>
127+
This is my remote nav
128+
<nav>
129+
<a href="#">Home</a>
130+
<a href="#">About</a>
131+
<a href="#">Contact</a>
132+
</nav>
133+
</div>
134+
)
135+
}
136+
export default Nav;
137+
----
138+
==== Step 5: Create an entry point for the remote app
139+
[, js]
140+
----
141+
//remote/index.js
142+
import('./bootstrap');
143+
//remote/bootstrap.js
144+
import React from 'react';
145+
import App from './App';
146+
import { createRoot } from 'react-dom/client';
147+
const container = document.getElementById('root');
148+
const root = createRoot(container);
149+
root.render(<App />);
150+
//remote/App.js
151+
import React from 'react';
152+
import Nav from './Nav';
153+
function App() {
154+
return (
155+
<div className="App">
156+
<header className="App-header">
157+
<Nav />
158+
</header>
159+
</div>
160+
);
161+
}
162+
export default App;
163+
----
164+
165+
==== Step 6: Start the host application
166+
[, bash]
167+
----
168+
npm run build
169+
npm run start
170+
----
171+
=== Step 7:Edit remote package.json
172+
[, bash]
173+
----
174+
. . .
175+
"scripts": {
176+
"start": "webpack-dev-server --config webpack.config.js",
177+
"build": "webpack --mode production",
178+
"clean": "rm -rf dist"
179+
},
180+
. . .
181+
----
182+
==== Step 8: Build and start the remote application
183+
[, bash]
184+
----
185+
npm run start
186+
----
187+
==== Step 9: Import the remote component using next/dynamic
188+
[, js]
189+
----
190+
// host/pages/index.js
191+
import dynamic from 'next/dynamic';
192+
const Nav = dynamic(() => import('remote/Nav'), { ssr: false });
193+
export default function HomePage() {
194+
return (
195+
<div>
196+
This is my ssr host
197+
<Nav />
198+
</div>
199+
);
200+
}
201+
----
202+
With these steps, we have set up a basic application that uses Module Federation with SSR and React 18. The above code samples can be modified to match your specific use case. With Module Federation, it's easy to share and reuse components across different parts of the application, making the development process more efficient.
203+
204+
This project is available https://github.com/lexasq/ssr-react-18[here, window=_blank].
205+
206+
=== About Valor Software
207+
Official Module Federation(MF) partner, Valor is actively contributing to the MF ecosystem and unlocking new possibilities.
208+
​
209+
Valor is also providing enterprise support, consulting, and team augmentation email us at mailto:sales@valor-software.com[sales@valor-software.com, window=_blank] to learn how we can help.

‎assets/articles/0062-module-federation-with-ssr-and-react-18/module-federation-with-ssr-and-react-18.json‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"title": "Module Federation with SSR and React 18",
3+
"order": 62,
4+
"domains": ["dev_quality_assurance"],
5+
"authorImg": "assets/articles/module-federation-with-ssr-and-react-18/Alexey_Umanskiy.png",
6+
"language": "en",
7+
"bgImg": "assets/articles/module-federation-with-ssr-and-react-18/Module-Federation-SSR.png",
8+
"author": "Alexey Umanskiy",
9+
"position": "JS developer",
10+
"date": "Thu Jan 24 2021 10:45:55 GMT+0000 (Coordinated Universal Time)",
11+
"seoDescription": "Explore combining Server-Side-Rendering and Module Federation with React 18"
12+
}

0 commit comments

Comments
 (0)