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]23? 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.
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.
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
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:
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
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
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:
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';45import baseConfig from'./module-federation.config';6import{ withZephyr }from'zephyr-webpack-plugin';78const config: ModuleFederationConfig ={9...baseConfig,10};1112// Nx plugins for webpack to build config object from Nx options and context.13exportdefaultcomposePlugins(14withNx(),15withReact(),16withModuleFederation(config),17withZephyr(),18(config)=>{19return 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';56import baseConfig from'./module-federation.config';7import{ withZephyr }from'zephyr-webpack-plugin';89const 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};3334// Nx plugins for webpack to build config object from Nx options and context.35exportdefaultcomposePlugins(36withNx(),37withReact(),38withModuleFederation(prodConfig),39withZephyr(),40(config)=>{41return 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';45import baseConfig from'./module-federation.config';6import{ withZephyr }from'zephyr-webpack-plugin';78const config ={9...baseConfig,10};1112// Nx plugins for webpack to build config object from Nx options and context.13exportdefaultcomposePlugins(14withNx(),15withReact(),16withModuleFederation(config),17withZephyr(),18(config)=>{19return 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';45import baseConfig from'./module-federation.config';6import{ withZephyr }from'zephyr-webpack-plugin';78const config ={9...baseConfig,10};1112// Nx plugins for webpack to build config object from Nx options and context.13exportdefaultcomposePlugins(14withNx(),15withReact(),16withModuleFederation(config),17withZephyr(),18(config)=>{19return config;20}21);
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'
1nx run shell:build:production --watch
23✔ You are already logged in4[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]: file913.026a13b340471b7f.js.LICENSE.txt uploaded in 139ms (0.66kb)10[shell.zephyr-examples.zephyrcloudio](valorkin)[3016]: file943.a0a6b971d9115018.js uploaded in 150ms (27.19kb)11[shell.zephyr-examples.zephyrcloudio](valorkin)[3016]: file41.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]: file144.3652843fc7a12189.js.LICENSE.txt uploaded in 158ms (0.47kb)14[shell.zephyr-examples.zephyrcloudio](valorkin)[3016]: file41.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]: file943.a0a6b971d9115018.js.LICENSE.txt uploaded in 174ms (0.24kb)17[shell.zephyr-examples.zephyrcloudio](valorkin)[3016]: file913.026a13b340471b7f.js uploaded in 217ms (63.79kb)18[shell.zephyr-examples.zephyrcloudio](valorkin)[3016]: file144.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