React + Webpack + Nx

Special thanks to Colum at Nx for his feedback on using Nx generators with Module Federation.

Prerequisites

If you don't have nvm to manage your node version yet, head to the official nvm guide to install it.

1nvm use 20

Generating a New Nx Workspace

Nx, a leading Monorepo and CI tool, offers an extensive array of generators that facilitate various development needs.

Terminal
1npx create-nx-workspace@latest myorg

For those preferring Rspack, replace the command with the following:

Terminal
1npx create-nx-workspace@latest myorg --preset=@nx/rspack

Selecting a Frontend Framework

At this stage, select 'None' for the frontend framework to keep the setup minimal.

Terminal
1NX   Let's create a new workspace [https://nx.dev/getting-started/intro]
2
3? Which stack do you want to use? …
4None:          Configures a TypeScript/JavaScript project with minimal structure.
5React:         Configures a React application with your framework of choice.
6Vue:           Configures a Vue application with your framework of choice.
7Angular:       Configures a Angular application with modern tooling.
8Node:          Configures a Node API application with your framework of choice.

Monorepo Type Configuration

We opt for the Integrated configuration as it allows us to house all remotes and the shell within a single repository:

Terminal
1? Package-based monorepo, integrated monorepo, or standalone project? …
2Package-based Monorepo:     Nx makes it fast, but lets you run things your way.
3Integrated Monorepo:        Nx creates a monorepo that contains multiple projects.
4Standalone:                 Nx creates a single project and makes it fast.

Nx Setup

While any Nx Cloud setup option is valid, "Skipping for Now" is chosen in our example, though activating Nx Cloud can significantly enhance local and CI build speeds:

Terminal
1? Do you want Nx Cloud to make your CI fast? …
2(it's free and can be disabled any time)
3Yes, enable Nx Cloud
4Yes, configure Nx Cloud for GitHub Actions
5Yes, configure Nx Cloud for Circle CI
6Skip for now

Post-Setup Steps

Change into the directory of the newly created workspace:

Terminal
1cd myorg

Adding Framework / Library Support

At this stage, we will use Nx to integrate React support. While our example specifically uses React, you may choose to use a different framework according to your project needs:

Terminal
1npx nx add @nx/react

Installing Zephyr

Install the zephyr-edge-contract and zephyr-webpack-plugin using npm with the following commands:

1npm install zephyr-edge-contract@latest
2npm install zephyr-webpack-plugin@latest

Once installed, ensure these packages are listed in your package.json under dependencies:

package.json
1"dependencies": {
2  "zephyr-edge-contract": "^0.0.2",
3  "zephyr-webpack-plugin": "^0.0.2"
4}

Generate Module Federation Shell and Remotes

Use Nx to structure your application with a host shell and remote apps:

Terminal
1npx nx g @nx/react:host shell --remotes=remote1,remote2 --directory=apps/shell

For those using Rspack, append the command accordingly:

Terminal
1npx nx g @nx/react:host shell --remotes=remote1,remote2 --directory=apps/shell --preset=@nx/rspack

Style Configuration

When prompted, choose your preferred stylesheet format. Options include CSS, SASS, LESS, and others:

Terminal
1? Which stylesheet format would you like to use? …
2CSS
3SASS(.scss)       [ https://sass-lang.com                    ]
4LESS              [ https://lesscss.org                      ]
5tailwind          [ https://tailwindcss.com/                 ]
6styled-components [ https://styled-components.com            ]
7emotion           [ https://emotion.sh                       ]
8styled-jsx        [ https://www.npmjs.com/package/styled-jsx ]
9None

End-to-End Testing Setup

Select an E2E test runner, though for demo purposes, 'none' is selected:

Terminal
1? Which E2E test runner would you like to use? …
2cypress
3playwright
4none

Project Structure Confirmation

Select "As Provided" for project names, as no adjustments are necessary:

Terminal
1? What should be the project name and where should it be generated? …
2❯ As provided:
3    Name: shell
4    Root: apps/shell
5  Derived:
6    Name: shell-shell
7    Root: apps/shell/shell

Final Adjustments

To accommodate Zephyr Cloud support, we need to make certain modifications to the generated projects.

Adding Package JSON Files

Zephyr Cloud requires a package.json file in each application to resolve names. Create a package.json for each application, specifying a unique name for each:

myorg/apps/shell/package.json
1{
2"name": "shell"
3}
myorg/apps/remote1/package.json
1{
2"name": "remote1"
3}
myorg/apps/remote2/package.json
1{
2"name": "remote2"
3}

Updating Webpack Configuration

Update both the webpack.config.ts and webpack.config.prod.ts files for shell and webpack.config.ts for both remotes.

INFO

Rspackis also supported however this example uses Webpack

shell/webpack.config.ts
1import { composePlugins, withNx, ModuleFederationConfig } from '@nx/webpack';
2import { withReact } from '@nx/react';
3import { withModuleFederation } from '@nx/react/module-federation';
4
5import baseConfig from './module-federation.config';
6import { withZephyr } from 'zephyr-webpack-plugin';
7
8const config: ModuleFederationConfig = {
9  ...baseConfig,
10};
11
12// Nx plugins for webpack to build config object from Nx options and context.
13export default composePlugins(
14  withNx(),
15  withReact(),
16  withModuleFederation(config),
17  withZephyr(),
18  (config) => {
19    return config;
20  }
21);
shell/webpack.config.prod.ts
1import { composePlugins, withNx } from '@nx/webpack';
2import { withReact } from '@nx/react';
3import { withModuleFederation } from '@nx/react/module-federation';
4import { ModuleFederationConfig } from '@nx/webpack';
5
6import baseConfig from './module-federation.config';
7import { withZephyr } from 'zephyr-webpack-plugin';
8
9const prodConfig: ModuleFederationConfig = {
10  ...baseConfig,
11  /*
12   * Remote overrides for production.
13   * Each entry is a pair of a unique name and the URL where it is deployed.
14   *
15   * e.g.
16   * remotes: [
17   *   ['app1', 'http://app1.example.com'],
18   *   ['app2', 'http://app2.example.com'],
19   * ]
20   *
21   * You can also use a full path to the remoteEntry.js file if desired.
22   *
23   * remotes: [
24   *   ['app1', 'http://example.com/path/to/app1/remoteEntry.js'],
25   *   ['app2', 'http://example.com/path/to/app2/remoteEntry.js'],
26   * ]
27   */
28  remotes: [
29    ['remote1', 'http://localhost:4201/'],
30    ['remote2', 'http://localhost:4202/'],
31  ],
32};
33
34// Nx plugins for webpack to build config object from Nx options and context.
35export default composePlugins(
36  withNx(),
37  withReact(),
38  withModuleFederation(prodConfig),
39  withZephyr(),
40  (config) => {
41    return config;
42  }
43);
remote1/webpack.config.ts
1import { composePlugins, withNx } from '@nx/webpack';
2import { withReact } from '@nx/react';
3import { withModuleFederation } from '@nx/react/module-federation';
4
5import baseConfig from './module-federation.config';
6import { withZephyr } from 'zephyr-webpack-plugin';
7
8const config = {
9  ...baseConfig,
10};
11
12// Nx plugins for webpack to build config object from Nx options and context.
13export default composePlugins(
14  withNx(),
15  withReact(),
16  withModuleFederation(config),
17  withZephyr(),
18  (config) => {
19    return config;
20  }
21);
remote2/webpack.config.prod.ts
1import { composePlugins, withNx } from '@nx/webpack';
2import { withReact } from '@nx/react';
3import { withModuleFederation } from '@nx/react/module-federation';
4
5import baseConfig from './module-federation.config';
6import { withZephyr } from 'zephyr-webpack-plugin';
7
8const config = {
9  ...baseConfig,
10};
11
12// Nx plugins for webpack to build config object from Nx options and context.
13export default composePlugins(
14  withNx(),
15  withReact(),
16  withModuleFederation(config),
17  withZephyr(),
18  (config) => {
19    return config;
20  }
21);

Building the App

With all preparations complete, you can now build the applications and start utilizing Zephyr Cloud.

Building the Shell

To build the shell application, execute the following command, which uses watch mode for ongoing updates:

Terminal
1npx nx build shell -- --watch
INFO

Ensure you have created package.json files in each project directory as outlined earlier. Failure to do so may result in errors like the ones below, indicating unresolved remote entry points:

1[zephyr] Could not resolve 'remote1.zephyr-examples.zephyrcloudio' with version 'http://localhost:4201/remoteEntry.js'
2[zephyr] Could not resolve 'remote2.zephyr-examples.zephyrcloudio' with version 'http://localhost:4202/remoteEntry.js'

Shell Build Output

Terminal
1nx run shell:build:production --watch
2
3✔ You are already logged in
4[shell.zephyr-examples.zephyrcloudio](valorkin)[3016]: local build started
5[shell.zephyr-examples.zephyrcloudio](valorkin)[3016]: started uploading of local snapshot to zephyr
6[shell.zephyr-examples.zephyrcloudio](valorkin)[3016]: uploaded local snapshot in 805ms
7[shell.zephyr-examples.zephyrcloudio](valorkin)[3016]: uploading missing assets to zephyr (queued 11 out of 14)
8[shell.zephyr-examples.zephyrcloudio](valorkin)[3016]: file main.93e9078aa7b6c830.js uploaded in 126ms (8.31kb)
9[shell.zephyr-examples.zephyrcloudio](valorkin)[3016]: file 913.026a13b340471b7f.js.LICENSE.txt uploaded in 139ms (0.66kb)
10[shell.zephyr-examples.zephyrcloudio](valorkin)[3016]: file 943.a0a6b971d9115018.js uploaded in 150ms (27.19kb)
11[shell.zephyr-examples.zephyrcloudio](valorkin)[3016]: file 41.b26ddec4260a2e36.js uploaded in 156ms (6.43kb)
12[shell.zephyr-examples.zephyrcloudio](valorkin)[3016]: file index.html uploaded in 150ms (0.48kb)
13[shell.zephyr-examples.zephyrcloudio](valorkin)[3016]: file 144.3652843fc7a12189.js.LICENSE.txt uploaded in 158ms (0.47kb)
14[shell.zephyr-examples.zephyrcloudio](valorkin)[3016]: file 41.b26ddec4260a2e36.js.LICENSE.txt uploaded in 160ms (0.23kb)
15[shell.zephyr-examples.zephyrcloudio](valorkin)[3016]: file styles.ecbc7c8fef0c436e.js uploaded in 169ms (5.84kb)
16[shell.zephyr-examples.zephyrcloudio](valorkin)[3016]: file 943.a0a6b971d9115018.js.LICENSE.txt uploaded in 174ms (0.24kb)
17[shell.zephyr-examples.zephyrcloudio](valorkin)[3016]: file 913.026a13b340471b7f.js uploaded in 217ms (63.79kb)
18[shell.zephyr-examples.zephyrcloudio](valorkin)[3016]: file 144.3652843fc7a12189.js uploaded in 222ms (129.66kb)
19[shell.zephyr-examples.zephyrcloudio](valorkin)[3016]: uploaded missing assets to zephyr (11 assets in 1821ms, 243.31kb)
20[shell.zephyr-examples.zephyrcloudio](valorkin)[3016]: started deploying local build to edge
21[shell.zephyr-examples.zephyrcloudio](valorkin)[3016]: deployed to https://valorkin_3016-shell-zephyr-examples-zephyrcloudio-ze.valorkin.dev
22[shell.zephyr-examples.zephyrcloudio](valorkin)[3016]: deployed to https://t_main_zack_zephyr-cloud_io-pe4ufnqhxd-shell-zephyr-e-80bb4d-ze.valorkin.dev
23[shell.zephyr-examples.zephyrcloudio](valorkin)[3016]: deployed to https://shell-zephyr-examples-zephyrcloudio-ze.valorkin.dev
24[shell.zephyr-examples.zephyrcloudio](valorkin)[3016]: local build deployed to edge in 188ms
25[shell.zephyr-examples.zephyrcloudio](valorkin)[3016]: build deployed in 1634ms
26Entrypoint main 8.31 KiB = main.93e9078aa7b6c830.js
27Entrypoint styles 5.92 KiB = styles.5f4524c1fa820eae.css 81 bytes styles.ecbc7c8fef0c436e.js 5.84 KiB
28chunk (runtime: main, styles) 41.b26ddec4260a2e36.js 6.94 KiB [rendered]
29chunk (runtime: main, styles) 144.3652843fc7a12189.js (id hint: vendors) 134 KiB [rendered] reused as split chunk (cache group: defaultVendors)
30chunk (runtime: main, styles) 42 bytes reused as split chunk (cache group: default)
31chunk (runtime: main) 6 bytes (remote) 6 bytes (share-init)
32chunk (runtime: main) 42 bytes
33chunk (runtime: main) 42 bytes
34chunk (runtime: main) main.93e9078aa7b6c830.js (main) 139 bytes (javascript) 126 bytes (share-init) 21.1 KiB (runtime) [entry] [rendered]
35chunk (runtime: main) 6 bytes (remote) 6 bytes (share-init)
36chunk (runtime: styles) styles.5f4524c1fa820eae.css, styles.ecbc7c8fef0c436e.js (styles) 50 bytes (javascript) 80 bytes (css/mini-extract) 126 bytes (share-init) 19 KiB (runtime) [entry] [rendered]
37chunk (runtime: main, styles) 913.026a13b340471b7f.js (id hint: vendors) 228 KiB [rendered] reused as split chunk (cache group: defaultVendors)
38chunk (runtime: main) 943.a0a6b971d9115018.js 37.4 KiB (javascript) 84 bytes (consume-shared) [rendered]
39webpack compiled successfully (533e09796edd0232)
40[shell.zephyr-examples.zephyrcloudio](valorkin)[3016]: local build finished in 3265ms
INFO

The build process generates a series of URLs for each deployment. For a comprehensive understanding of these build outputs, please consult our versioning documentation.

Terminal
1[shell.zephyr-examples.zephyrcloudio](valorkin)[3016]: deployed to https://valorkin_3016-shell-zephyr-examples-zephyrcloudio-ze.valorkin.dev
2[shell.zephyr-examples.zephyrcloudio](valorkin)[3016]: deployed to https://t_main_zack_zephyr-cloud_io-pe4ufnqhxd-shell-zephyr-e-80bb4d-ze.valorkin.dev
3[shell.zephyr-examples.zephyrcloudio](valorkin)[3016]: deployed to https://shell-zephyr-examples-zephyrcloudio-ze.valorkin.dev

Remote 1 Build

Terminal
1npx nx build remote1 --watch

Remote 1 Build Output

Terminal
1> nx run remote1:build:production --watch
2
3✔ You are already logged in
4[_create-nx-workspace-mf_source.zephyr-examples.zephyrcloudio](valorkin)[3015]: local build started
5[_create-nx-workspace-mf_source.zephyr-examples.zephyrcloudio](valorkin)[3015]: started uploading of local snapshot to zephyr
6[_create-nx-workspace-mf_source.zephyr-examples.zephyrcloudio](valorkin)[3015]: uploaded local snapshot in 589ms
7[_create-nx-workspace-mf_source.zephyr-examples.zephyrcloudio](valorkin)[3015]: uploading missing assets to zephyr (queued 12 out of 15)
8[_create-nx-workspace-mf_source.zephyr-examples.zephyrcloudio](valorkin)[3015]: file remoteEntry.js uploaded in 126ms (5.72kb)
9[_create-nx-workspace-mf_source.zephyr-examples.zephyrcloudio](valorkin)[3015]: file 41.9a449c58de22ab6b.js uploaded in 145ms (6.43kb)
10[_create-nx-workspace-mf_source.zephyr-examples.zephyrcloudio](valorkin)[3015]: file main.42dbf49433954a69.js uploaded in 138ms (5.45kb)
11[_create-nx-workspace-mf_source.zephyr-examples.zephyrcloudio](valorkin)[3015]: file 41.9a449c58de22ab6b.js.LICENSE.txt uploaded in 141ms (0.23kb)
12[_create-nx-workspace-mf_source.zephyr-examples.zephyrcloudio](valorkin)[3015]: file index.html uploaded in 147ms (0.49kb)
13[_create-nx-workspace-mf_source.zephyr-examples.zephyrcloudio](valorkin)[3015]: file 589.505424fc93ec3072.js uploaded in 154ms (0.14kb)
14[_create-nx-workspace-mf_source.zephyr-examples.zephyrcloudio](valorkin)[3015]: file 404.86591e41fe4977b8.js.LICENSE.txt uploaded in 155ms (0.24kb)
15[_create-nx-workspace-mf_source.zephyr-examples.zephyrcloudio](valorkin)[3015]: file 404.86591e41fe4977b8.js uploaded in 157ms (26.42kb)
16[_create-nx-workspace-mf_source.zephyr-examples.zephyrcloudio](valorkin)[3015]: file 144.e8b8368c4463d4f1.js.LICENSE.txt uploaded in 164ms (0.47kb)
17[_create-nx-workspace-mf_source.zephyr-examples.zephyrcloudio](valorkin)[3015]: file styles.2c6709042aaf4268.js uploaded in 167ms (4.92kb)
18[_create-nx-workspace-mf_source.zephyr-examples.zephyrcloudio](valorkin)[3015]: file 510.705b2055194c71b8.js uploaded in 192ms (0.30kb)
19[_create-nx-workspace-mf_source.zephyr-examples.zephyrcloudio](valorkin)[3015]: file 144.e8b8368c4463d4f1.js uploaded in 197ms (129.66kb)
20[_create-nx-workspace-mf_source.zephyr-examples.zephyrcloudio](valorkin)[3015]: uploaded missing assets to zephyr (12 assets in 1883ms, 180.47kb)
21[_create-nx-workspace-mf_source.zephyr-examples.zephyrcloudio](valorkin)[3015]: started deploying local build to edge
22[_create-nx-workspace-mf_source.zephyr-examples.zephyrcloudio](valorkin)[3015]: deployed to https://valorkin_3015-_create-nx-workspace-mf_source-zephyr-e-66be25-ze.valorkin.dev
23[_create-nx-workspace-mf_source.zephyr-examples.zephyrcloudio](valorkin)[3015]: deployed to https://t_main_zack_zephyr-cloud_io-pe4ufnqhxd-_create-nx-wor-b959ef-ze.valorkin.dev
24[_create-nx-workspace-mf_source.zephyr-examples.zephyrcloudio](valorkin)[3015]: deployed to https://_create-nx-workspace-mf_source-zephyr-examples-zephyr-262fe7-ze.valorkin.dev
25[_create-nx-workspace-mf_source.zephyr-examples.zephyrcloudio](valorkin)[3015]: local build deployed to edge in 169ms
26[_create-nx-workspace-mf_source.zephyr-examples.zephyrcloudio](valorkin)[3015]: build deployed in 1446ms
27Entrypoint main 5.45 KiB = main.42dbf49433954a69.js
28Entrypoint styles 5 KiB = styles.5f4524c1fa820eae.css 81 bytes styles.2c6709042aaf4268.js 4.92 KiB
29Entrypoint remote1 5.72 KiB = remoteEntry.js
30chunk (runtime: main, remote1, styles) 41.9a449c58de22ab6b.js 6.94 KiB [rendered]
31chunk (runtime: main, remote1, styles) 144.e8b8368c4463d4f1.js (id hint: vendors) 134 KiB [rendered] reused as split chunk (cache group: defaultVendors)
32chunk (runtime: main, remote1, styles) 42 bytes reused as split chunk (cache group: default)
33chunk (runtime: main, remote1) 404.86591e41fe4977b8.js 35.4 KiB [rendered] split chunk (cache group: default)
34chunk (runtime: main) 510.705b2055194c71b8.js 934 bytes (javascript) 42 bytes (consume-shared) [rendered]
35chunk (runtime: remote1) 589.505424fc93ec3072.js 36 bytes [rendered]
36chunk (runtime: remote1) remoteEntry.js (remote1) 42 bytes (javascript) 84 bytes (share-init) 17.3 KiB (runtime) [entry] [rendered]
37chunk (runtime: main) main.42dbf49433954a69.js (main) 22 bytes (javascript) 84 bytes (share-init) 17.7 KiB (runtime) [entry] [rendered]
38chunk (runtime: styles) styles.5f4524c1fa820eae.css, styles.2c6709042aaf4268.js (styles) 50 bytes (javascript) 80 bytes (css/mini-extract) 84 bytes (share-init) 16.7 KiB (runtime) [entry] [rendered]
39webpack compiled successfully (6bdf66978d6c6278)
40[_create-nx-workspace-mf_source.zephyr-examples.zephyrcloudio](valorkin)[3015]: local build finished in 3229ms

Remote 2 Build

Terminal
1npx nx build remote2 -- --watch

Remote 2 Build Output

Terminal
1> nx run remote2:build:production --watch
2
3✔ You are already logged in
4[_create-nx-workspace-mf_source.zephyr-examples.zephyrcloudio](valorkin)[3017]: local build started
5[_create-nx-workspace-mf_source.zephyr-examples.zephyrcloudio](valorkin)[3017]: started uploading of local snapshot to zephyr
6[_create-nx-workspace-mf_source.zephyr-examples.zephyrcloudio](valorkin)[3017]: uploaded local snapshot in 612ms
7[_create-nx-workspace-mf_source.zephyr-examples.zephyrcloudio](valorkin)[3017]: uploading missing assets to zephyr (queued 12 out of 15)
8[_create-nx-workspace-mf_source.zephyr-examples.zephyrcloudio](valorkin)[3017]: file remoteEntry.js uploaded in 128ms (5.72kb)
9[_create-nx-workspace-mf_source.zephyr-examples.zephyrcloudio](valorkin)[3017]: file styles.1571ea7a783778ba.js uploaded in 128ms (4.92kb)
10[_create-nx-workspace-mf_source.zephyr-examples.zephyrcloudio](valorkin)[3017]: file 404.2971a24285c7bbe6.js.LICENSE.txt uploaded in 131ms (0.24kb)
11[_create-nx-workspace-mf_source.zephyr-examples.zephyrcloudio](valorkin)[3017]: file main.2e27878c29b4811c.js uploaded in 148ms (5.45kb)
12[_create-nx-workspace-mf_source.zephyr-examples.zephyrcloudio](valorkin)[3017]: file index.html uploaded in 154ms (0.49kb)
13[_create-nx-workspace-mf_source.zephyr-examples.zephyrcloudio](valorkin)[3017]: file 404.2971a24285c7bbe6.js uploaded in 163ms (26.42kb)
14[_create-nx-workspace-mf_source.zephyr-examples.zephyrcloudio](valorkin)[3017]: file 144.ca505f105bb1b446.js.LICENSE.txt uploaded in 165ms (0.47kb)
15[_create-nx-workspace-mf_source.zephyr-examples.zephyrcloudio](valorkin)[3017]: file 510.2a6e58595f33f0b5.js uploaded in 178ms (0.30kb)
16[_create-nx-workspace-mf_source.zephyr-examples.zephyrcloudio](valorkin)[3017]: file 41.641d6a5a1b771f6b.js uploaded in 188ms (6.43kb)
17[_create-nx-workspace-mf_source.zephyr-examples.zephyrcloudio](valorkin)[3017]: file 589.8fb6a268ace3b111.js uploaded in 190ms (0.14kb)
18[_create-nx-workspace-mf_source.zephyr-examples.zephyrcloudio](valorkin)[3017]: file 41.641d6a5a1b771f6b.js.LICENSE.txt uploaded in 221ms (0.23kb)
19[_create-nx-workspace-mf_source.zephyr-examples.zephyrcloudio](valorkin)[3017]: file 144.ca505f105bb1b446.js uploaded in 269ms (129.66kb)
20[_create-nx-workspace-mf_source.zephyr-examples.zephyrcloudio](valorkin)[3017]: uploaded missing assets to zephyr (12 assets in 2063ms, 180.47kb)
21[_create-nx-workspace-mf_source.zephyr-examples.zephyrcloudio](valorkin)[3017]: started deploying local build to edge
22[_create-nx-workspace-mf_source.zephyr-examples.zephyrcloudio](valorkin)[3017]: deployed to https://valorkin_3017-_create-nx-workspace-mf_source-zephyr-e-a00e91-ze.valorkin.dev
23[_create-nx-workspace-mf_source.zephyr-examples.zephyrcloudio](valorkin)[3017]: deployed to https://t_main_zack_zephyr-cloud_io-pe4ufnqhxd-_create-nx-wor-b959ef-ze.valorkin.dev
24[_create-nx-workspace-mf_source.zephyr-examples.zephyrcloudio](valorkin)[3017]: deployed to https://_create-nx-workspace-mf_source-zephyr-examples-zephyr-262fe7-ze.valorkin.dev
25[_create-nx-workspace-mf_source.zephyr-examples.zephyrcloudio](valorkin)[3017]: local build deployed to edge in 190ms
26[_create-nx-workspace-mf_source.zephyr-examples.zephyrcloudio](valorkin)[3017]: build deployed in 1531ms
27Entrypoint main 5.45 KiB = main.2e27878c29b4811c.js
28Entrypoint styles 5 KiB = styles.5f4524c1fa820eae.css 81 bytes styles.1571ea7a783778ba.js 4.92 KiB
29Entrypoint remote2 5.72 KiB = remoteEntry.js
30chunk (runtime: main, remote2, styles) 41.641d6a5a1b771f6b.js 6.94 KiB [rendered]
31chunk (runtime: main, remote2, styles) 144.ca505f105bb1b446.js (id hint: vendors) 134 KiB [rendered] reused as split chunk (cache group: defaultVendors)
32chunk (runtime: main, remote2, styles) 42 bytes reused as split chunk (cache group: default)
33chunk (runtime: remote2) remoteEntry.js (remote2) 42 bytes (javascript) 84 bytes (share-init) 17.3 KiB (runtime) [entry] [rendered]
34chunk (runtime: main, remote2) 404.2971a24285c7bbe6.js 35.4 KiB [rendered] split chunk (cache group: default)
35chunk (runtime: main) 510.2a6e58595f33f0b5.js 934 bytes (javascript) 42 bytes (consume-shared) [rendered]
36chunk (runtime: remote2) 589.8fb6a268ace3b111.js 36 bytes [rendered]
37chunk (runtime: main) main.2e27878c29b4811c.js (main) 22 bytes (javascript) 84 bytes (share-init) 17.7 KiB (runtime) [entry] [rendered]
38chunk (runtime: styles) styles.5f4524c1fa820eae.css, styles.1571ea7a783778ba.js (styles) 50 bytes (javascript) 80 bytes (css/mini-extract) 84 bytes (share-init) 16.7 KiB (runtime) [entry] [rendered]
39webpack compiled successfully (ba7bd784fa780a37)
40[_create-nx-workspace-mf_source.zephyr-examples.zephyrcloudio](valorkin)[3017]: local build finished in 3363ms

Next Steps

Now that the initial setup is complete, you can proceed to add remote modules and start developing your federated application as planned.