Skip to content

Commit 606cec2

Browse files
manfredsteyermanfredsteyer
committed
add brain dump for adding SSR
1 parent 1979bfc commit 606cec2

File tree

7 files changed

+119
-30
lines changed

7 files changed

+119
-30
lines changed

‎libs/mf-runtime/package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
"name": "@angular-architects/module-federation-runtime",
33

44
"license": "MIT",
5-
"version": "12.2.0",
5+
"version": "12.4.0",
66
"peerDependencies": {
7-
"@angular/common": ">=12.0.0",
8-
"@angular/core": ">=12.0.0"
7+
"@angular/common": ">=12.4.0",
8+
"@angular/core": ">=12.4.0"
99
},
1010
"dependencies": {
1111
"tslib": "^2.0.0"

‎libs/mf-tools/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@angular-architects/module-federation-tools",
3-
"version": "12.2.1",
3+
"version": "12.4.0",
44
"license": "MIT",
55
"peerDependencies": {
66
"@angular/common": ">=11.0.0",

‎libs/mf/README.md

Lines changed: 76 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -276,8 +276,83 @@ shared: {
276276

277277
The options passed to shareAll are applied to all dependencies found in your ``package.json``.
278278

279-
This might come in handy in an monorepo scenario and when doing some experiments/ trouble shooting.
279+
This might come in handy in an mono repo scenario and when doing some experiments/ trouble shooting.
280280

281+
### Angular Universal (Server Side Rendering)
282+
283+
Since Version 12.4.0 of this plugin, we support the new _jsdom_-based Angular Universal API for Server Side Rendering (SSR). Please note that SSR *only* makes sense in specific scenarios, e. g. for customer-facing apps that need SEO.
284+
285+
To make use of SSR, you should enable SSR for **all** of your federation projects (e. g. the shell and the micro frontends).
286+
287+
#### Adding Angular Universal BEFORE adding Module Federation
288+
289+
If you start with a new project, you should add Angular Universal BEFORE adding Module Federation:
290+
291+
```
292+
ng add @nguniversal/common --project yourProject
293+
ng add @angular-architects/module-federation --project yourProject
294+
```
295+
296+
Then, adjust the port in the generated ``server.ts``:
297+
298+
```typescript
299+
const PORT = 5000;
300+
```
301+
302+
After this, you can compile and run your application:
303+
304+
```
305+
ng build yourProject && ng run yourProject:server
306+
node dist/yourProject/server/main.js
307+
```
308+
309+
#### Adding Angular Universal to an existing Module Federation project
310+
311+
If you already use ``@angular-architects/module-federation``, you can add Angular Universal this way:
312+
313+
1. Update ``@angular-architects/module-federation`` to the latest version (>= 12.4).
314+
315+
```
316+
npm i @angular-architects/module-federation@latest
317+
```
318+
319+
2. Now, we need to disable asynchronous bootstrapping temporarily. While it's needed for Module Federation, the schematics provided by Angular Universal assume that Angular is bootstrapped in an traditional (synchronous) way. After using these Schematics, we have to enable asynchronous bootstrapping again:
320+
321+
```
322+
ng g @angular-architects/module-federation:boot-async false --project yourProject
323+
324+
ng add @nguniversal/common --project yourProject
325+
326+
ng g @angular-architects/module-federation:boot-async true --project yourProject
327+
```
328+
329+
3. As now we have both, Module Federation and Angular Universal, in place, we can integrate them with each other:
330+
331+
```
332+
ng g @angular-architects/module-federation:nguniversal --project yourProject
333+
```
334+
335+
4. Adjust the used port in the generated ``server.ts`` file:
336+
337+
```typescript
338+
const PORT = 5000;
339+
```
340+
341+
5. Now, you can compile and run your application:
342+
343+
```
344+
ng build yourProject && ng run yourProject:server
345+
node dist/yourProject/server/main.js
346+
```
347+
348+
#### Example
349+
350+
Please find an [example](https://github.com/manfredsteyer/module-federation-plugin-example/tree/ssr
351+
) here in the branch ``ssr``.
352+
353+
#### Trying it out
354+
355+
To try it out, you can checkout the ``main`` branch of our [example](https://github.com/manfredsteyer/module-federation-plugin-example). After installing the dependencies (``npm i``), you can repeat the steps for adding Angular Universal to an existing Module Federation project described above twice: Once for the _project shell and the port 5000_ and one more time for the _project mfe1 and port 3000_.
281356

282357
### Pitfalls when sharing libraries of a Monorepo
283358

‎libs/mf/package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@angular-architects/module-federation",
3-
"version": "12.3.0-beta.9",
3+
"version": "12.4.0",
44
"license": "MIT",
55
"repository": {
66
"type": "GitHub",
@@ -17,8 +17,8 @@
1717
"schematics": "./collection.json",
1818
"builders": "./builders.json",
1919
"dependencies": {
20-
"ngx-build-plus": "^12.1.0-beta.3",
21-
"@angular-architects/module-federation-runtime": "^12.2.0",
20+
"ngx-build-plus": "^12.2.0",
21+
"@angular-architects/module-federation-runtime": "^12.4.0",
2222
"word-wrap": "^1.2.3",
2323
"callsite": "^1.0.0",
2424
"node-fetch": "^2.6.1"

‎libs/mf/src/schematics/mf/schematic.ts

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -211,7 +211,6 @@ export default function config (options: MfSchematicSchema): Rule {
211211
projectConfig.architect['extract-i18n'].options.extraWebpackConfig = configPath;
212212
}
213213

214-
updateServerBuilder(projectConfig, configPath);
215214
const ssrMappings = generateSsrMappings(workspace, projectName);
216215

217216
tree.overwrite(workspaceFileName, JSON.stringify(workspace, null, '\t'));
@@ -227,21 +226,6 @@ export default function config (options: MfSchematicSchema): Rule {
227226
}
228227
}
229228

230-
export function updateServerBuilder(projectConfig: any, configPath: string) {
231-
232-
if (projectConfig?.architect?.server) {
233-
projectConfig.architect.server.builder = 'ngx-build-plus:server';
234-
}
235-
236-
if (projectConfig?.architect?.server?.options) {
237-
projectConfig.architect.server.options.extraWebpackConfig = configPath;
238-
}
239-
240-
if (projectConfig?.architect?.server?.configurations?.production) {
241-
projectConfig.architect.server.configurations.production.extraWebpackConfig = configPath;
242-
}
243-
}
244-
245229
function generateRemoteConfig(workspace: any, projectName: string) {
246230
let remotes = '';
247231
for (const p in workspace.projects) {

‎libs/mf/src/schematics/nguniversal/schematic.ts

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { NgUniversalSchema } from "./schema";
22
import { Rule, chain, externalSchematic } from '@angular-devkit/schematics';
3-
import path = require("path");
4-
import { generateSsrMappings, getWorkspaceFileName, updateServerBuilder, adjustSSR } from "../mf/schematic";
3+
import { generateSsrMappings, getWorkspaceFileName, adjustSSR } from "../mf/schematic";
54

65
export default function nguniversal (options: NgUniversalSchema): Rule {
76

@@ -23,15 +22,11 @@ export default function nguniversal (options: NgUniversalSchema): Rule {
2322
const projectConfig = workspace.projects[projectName];
2423

2524
const projectSourceRoot: string = projectConfig.sourceRoot;
26-
const projectRoot: string = projectConfig.root;
27-
28-
const configPath = path.join(projectRoot, 'webpack.config.js').replace(/\\/g, '/');
2925

3026
if (!projectConfig?.architect?.server) {
3127
console.error('No server target found. Did you add Angular Universal? Try ng add @nguniversal/common');
3228
}
3329

34-
updateServerBuilder(projectConfig, configPath);
3530
const ssrMappings = generateSsrMappings(workspace, projectName);
3631

3732
tree.overwrite(workspaceFileName, JSON.stringify(workspace, null, '\t'));

‎libs/mf/tutorial/braindump-ssr.md

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
## Adding Angular Universal to an Module Federation Project
2+
3+
This brain dump shows how to add Angular Universal to our [example](https://github.com/manfredsteyer/module-federation-plugin-example).
4+
5+
```
6+
npm i @angular-architects/module-federation@latest --registry http://localhost:4873
7+
8+
9+
ng g @angular-architects/module-federation:boot-async false --project shell
10+
ng add @nguniversal/common --project shell
11+
ng g @angular-architects/module-federation:boot-async true --project shell
12+
ng g @angular-architects/module-federation:nguniversal --project shell
13+
14+
15+
ng g @angular-architects/module-federation:boot-async false --project mfe1
16+
ng add @nguniversal/common --project mfe1
17+
ng g @angular-architects/module-federation:boot-async true --project mfe1
18+
ng g @angular-architects/module-federation:nguniversal --project mfe1
19+
20+
21+
Adjust projects\shell\src\server.ts
22+
const PORT = 5000;
23+
24+
Adjust projects\mfe1\src\server.ts
25+
const PORT = 3000;
26+
27+
28+
ng build mfe1 && ng run mfe1:server
29+
node dist/mfe1/server/main.js
30+
31+
ng build shell && ng run shell:server
32+
node dist/shell/server/main.js
33+
```
34+
35+

0 commit comments

Comments
 (0)