From dd4f6d903a10453ecd24e95aafb8210fbb6c8382 Mon Sep 17 00:00:00 2001 From: "Denis.Belotrserkovets" Date: Mon, 5 May 2025 17:48:31 +0300 Subject: [PATCH 01/15] feat: adds release mode docs to repack doc --- .../zephyr/repack/start-from-scratch.mdx | 57 ++++++++++++++++++- 1 file changed, 56 insertions(+), 1 deletion(-) diff --git a/components/zephyr/repack/start-from-scratch.mdx b/components/zephyr/repack/start-from-scratch.mdx index a7ae024..27922f1 100644 --- a/components/zephyr/repack/start-from-scratch.mdx +++ b/components/zephyr/repack/start-from-scratch.mdx @@ -536,4 +536,59 @@ You should see the applicaiton running in the iOS emulator: Zephyr Cloud Minimal example running in iOS emulator -The process should be the same for Android. \ No newline at end of file +The process should be the same for Android. + +## Running the application in release mode without Zephyr + +By default, the HostApp loads miniapp bundles from a local development server (e.g. localhost). To run the app in production/release mode without using the Zephyr development environment, you must replace those local URLs with the Zephyr Cloud URLs for each miniapp. This ensures the HostApp fetches the miniapp bundles directly from the Zephyr-hosted endpoints. The process involves configuring your Zephyr environment, retrieving the correct remote URLs, and updating the HostApp’s module federation configuration. Once completed, you can build and launch the app in release mode normally (e.g. via Xcode or react-native release build), and it will load miniapps from the Zephyr Cloud URLs instead of localhost. + +To successfully run the HostApp in release mode using Zephyr-hosted miniapps, you need to have a Zephyr environment configured for your project (such as production or staging). Each miniapp (remote module), along with the HostApp itself, must be registered within this environment. For step-by-step setup guidance, refer to the [Zephyr Environment Guide](../../how-to/environments.mdx) + +### Steps + +Follow these steps to configure and run the HostApp in release mode without Zephyr: + +Configure the Zephyr environment: + +1. Configure the Zephyr environment: + + - In the Zephyr Cloud dashboard, create or select the target environment (for example, production or staging). + +2. Retrieve the remote URLs: + + - After the environment is configured, open its details page in the Zephyr dashboard for each platform. Zephyr will display the hosted URLs for the HostApp and each miniapp. + + - Copy the provided HostApp URL. It usually follows this pattern: + `https://{platform}-{appname}-{yourusername}-ze.zephyrcloud.app/` + +3. Update the HostApp configuration: + + - In your HostApp project directory, open the HostApp/rspack.config.mjs file. Locate the remotes object, which defines how to load each miniapp remotely. + + - Replace each remote’s localhost URL with the Zephyr Cloud URL. For example: + + ```js title="HostApp/rspack.config.mjs" + const remotes = { + MiniApp: `MiniApp@https://android-miniapp-yourusername-ze.zephyrcloud.app/MiniApp.container.js.bundle`, + }; + ``` + + - In the example above, replace MiniApp with your actual miniapp name (used both as the object key and inside the URL path), and replace yourusername with your Zephyr username/organization. The ${platform} placeholder will be replaced by Rspack with android or ios at build time. Ensure the URL has a trailing slash before ${platform} as shown. + + - If you have multiple miniapps, add each one to the remotes object in the same way, using its own name and Zephyr URL. For example: + + ```js title="HostApp/rspack.config.mjs" + const remotes = { + MiniApp1: `MiniApp1@https://ios-miniapp1-yourusername-ze.zephyrcloud.app/MiniApp1.container.js.bundle`, + MiniApp2: `MiniApp2@https://ios-miniapp2-yourusername-ze.zephyrcloud.app/MiniApp2.container.js.bundle`, + // add more miniapps as needed + }; + ``` + +4. Build and run the HostApp in release mode: + + - With the configuration updated, build and launch the HostApp using your normal release process. + + - The HostApp will now load each miniapp bundle from the specified Zephyr Cloud URLs instead of localhost. Verify that the app launches correctly and that each miniapp is fetched successfully from the remote URL. + +By following these steps, you can run your HostApp in production mode without the Zephyr development environment, using the remote module bundles hosted on Zephyr Cloud. From 4abd054f524db06de49cd654ab43d9f8f7185ed0 Mon Sep 17 00:00:00 2001 From: "Denis.Belotrserkovets" Date: Mon, 5 May 2025 18:37:12 +0300 Subject: [PATCH 02/15] fix: changes without to with --- components/zephyr/repack/start-from-scratch.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/zephyr/repack/start-from-scratch.mdx b/components/zephyr/repack/start-from-scratch.mdx index 27922f1..50ebdf2 100644 --- a/components/zephyr/repack/start-from-scratch.mdx +++ b/components/zephyr/repack/start-from-scratch.mdx @@ -546,7 +546,7 @@ To successfully run the HostApp in release mode using Zephyr-hosted miniapps, yo ### Steps -Follow these steps to configure and run the HostApp in release mode without Zephyr: +Follow these steps to configure and run the HostApp in release mode with Zephyr: Configure the Zephyr environment: From 44dd5af78c995f5aff5215bbb8dedaa62c67036d Mon Sep 17 00:00:00 2001 From: Denis Belotserkovets <38587958+Thegrep01@users.noreply.github.com> Date: Tue, 6 May 2025 15:42:53 +0300 Subject: [PATCH 03/15] Update start-from-scratch.mdx --- components/zephyr/repack/start-from-scratch.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/zephyr/repack/start-from-scratch.mdx b/components/zephyr/repack/start-from-scratch.mdx index 50ebdf2..ec5d419 100644 --- a/components/zephyr/repack/start-from-scratch.mdx +++ b/components/zephyr/repack/start-from-scratch.mdx @@ -538,7 +538,7 @@ You should see the applicaiton running in the iOS emulator: The process should be the same for Android. -## Running the application in release mode without Zephyr +## Running the application in release mode with Zephyr By default, the HostApp loads miniapp bundles from a local development server (e.g. localhost). To run the app in production/release mode without using the Zephyr development environment, you must replace those local URLs with the Zephyr Cloud URLs for each miniapp. This ensures the HostApp fetches the miniapp bundles directly from the Zephyr-hosted endpoints. The process involves configuring your Zephyr environment, retrieving the correct remote URLs, and updating the HostApp’s module federation configuration. Once completed, you can build and launch the app in release mode normally (e.g. via Xcode or react-native release build), and it will load miniapps from the Zephyr Cloud URLs instead of localhost. From 18ef207e69bed01e0f3da6eb6468b10d58d08ddc Mon Sep 17 00:00:00 2001 From: theGrep01 Date: Tue, 6 May 2025 17:22:05 +0300 Subject: [PATCH 04/15] feat: re-works flow --- .../zephyr/repack/start-from-scratch.mdx | 211 +++++++++++++++--- 1 file changed, 186 insertions(+), 25 deletions(-) diff --git a/components/zephyr/repack/start-from-scratch.mdx b/components/zephyr/repack/start-from-scratch.mdx index ec5d419..a8229ce 100644 --- a/components/zephyr/repack/start-from-scratch.mdx +++ b/components/zephyr/repack/start-from-scratch.mdx @@ -550,44 +550,205 @@ Follow these steps to configure and run the HostApp in release mode with Zephyr: Configure the Zephyr environment: -1. Configure the Zephyr environment: - - - In the Zephyr Cloud dashboard, create or select the target environment (for example, production or staging). +1. Change your configs to divide debug builds and release builds: + + - In the HostApp and MiniApp, change the `rspack.config.mjs` file to add a `ZC` variable: + + ```js title="HostApp/rspack.config.mjs"{9,17,72} + import path from 'node:path'; + import {fileURLToPath} from 'node:url'; + import * as Repack from '@callstack/repack'; + import {withZephyr} from 'zephyr-repack-plugin'; + const __filename = fileURLToPath(import.meta.url); + const __dirname = path.dirname(__filename); + + + const USE_ZEPHYR = Boolean(process.env.ZC); + /** + * Rspack configuration enhanced with Re.Pack defaults for React Native. + * + * Learn about Rspack configuration: https://rspack.dev/config/ + * Learn about Re.Pack configuration: https://re-pack.dev/docs/guides/configuration + */ + + const config = env => { + const { platform, mode } = env + return { + context: __dirname, + entry: './index.js', + resolve: { + // 1. Understand the file path of ios and android file extensions + // 2. Configure the output to be as close to Metro as possible + ...Repack.getResolveOptions(), + }, + output: { + // Unsure - for module federation HMR and runtime? + uniqueName: 'react-native-host-app', + }, + module: { + rules: [ + ...Repack.getJsTransformRules(), + ...Repack.getAssetTransformRules(), + ], + }, + plugins: [ + new Repack.RepackPlugin({ + platform, + }), + new Repack.plugins.ModuleFederationPluginV2({ + name: 'HostApp', + filename: 'HostApp.container.js.bundle', + dts: false, + remotes: { + MiniApp: `MiniApp@http://localhost:9001/${platform}/MiniApp.container.js.bundle`, + }, + shared: { + react: { + singleton: true, + version: '19.0.0', + eager: true, + }, + 'react-native': { + singleton: true, + version: '0.78.0', + eager: true, + } + }, + }), + // Supports for new architecture - Hermes can also use JS, it's not a requirement, it will still work the same but it's for performance optimization + new Repack.plugins.HermesBytecodePlugin({ + enabled: mode === 'production', + test: /\.(js)?bundle$/, + exclude: /index.bundle$/, + }), + ], + } + }; -2. Retrieve the remote URLs: + export default USE_ZEPHYR ? withZephyr()(config) : config; + ``` - - After the environment is configured, open its details page in the Zephyr dashboard for each platform. Zephyr will display the hosted URLs for the HostApp and each miniapp. + ```js title="MiniApp/rspack.config.mjs"{9,19,68} + import path from 'node:path'; + import {fileURLToPath} from 'node:url'; + import * as Repack from '@callstack/repack'; + import {withZephyr} from 'zephyr-repack-plugin'; + + const __filename = fileURLToPath(import.meta.url); + const __dirname = path.dirname(__filename); + + const USE_ZEPHYR = Boolean(process.env.ZC); + const STANDALONE = Boolean(process.env.STANDALONE); + + /** + * Rspack configuration enhanced with Re.Pack defaults for React Native. + * + * Learn about Rspack configuration: https://rspack.dev/config/ + * Learn about Re.Pack configuration: https://re-pack.dev/docs/guides/configuration + */ + + const config = env => { + const {platform, mode} = env; + return { + mode, + context: __dirname, + entry: './index.js', + resolve: { + ...Repack.getResolveOptions(), + }, + output: { + uniqueName: 'react-native-mini-app', + }, + module: { + rules: [ + ...Repack.getJsTransformRules(), + ...Repack.getAssetTransformRules({inline: true}), + ], + }, + plugins: [ + new Repack.RepackPlugin(), + new Repack.plugins.ModuleFederationPluginV2({ + name: 'MiniApp', + filename: 'MiniApp.container.js.bundle', + dts: false, + exposes: { + './App': './App.tsx', + }, + shared: { + react: { + singleton: true, + version: '19.0.0', + eager: STANDALONE, + }, + 'react-native': { + singleton: true, + version: '0.78.0', + eager: STANDALONE, + }, + }, + }), + new Repack.plugins.HermesBytecodePlugin({ + enabled: mode === 'production', + test: /\.(js)?bundle$/, + exclude: /index.bundle$/, + }), + ], + }; + }; + + export default USE_ZEPHYR ? withZephyr()(config) : config; + + ``` + + - `ZC` is used to indicate that the bundles are for Zephyr Cloud. + +2. Add bundle scripts to the HostApp and MiniApp: + + - In the HostApp and MiniApp, add the following scripts to the package.json files: + + ```json title="HostApp/package.json" + "scripts": { + "bundle": "pnpm run bundle:ios && pnpm run bundle:android", + "bundle:ios": "react-native bundle --platform ios --dev false --entry-file index.js", + "bundle:android": "react-native bundle --platform android --dev false --entry-file index.js" + } + ``` - - Copy the provided HostApp URL. It usually follows this pattern: - `https://{platform}-{appname}-{yourusername}-ze.zephyrcloud.app/` + ```json title="MiniApp/package.json" + "scripts": { + "bundle": "pnpm run bundle:ios && pnpm run bundle:android", + "bundle:ios": "react-native bundle --platform ios --dev false --entry-file index.js", + "bundle:android": "react-native bundle --platform android --dev false --entry-file index.js" + } + ``` -3. Update the HostApp configuration: +2. Bundle HostApp and MiniApps, and upload to Zephyr Cloud: - - In your HostApp project directory, open the HostApp/rspack.config.mjs file. Locate the remotes object, which defines how to load each miniapp remotely. + - Bundle the MiniApp: - - Replace each remote’s localhost URL with the Zephyr Cloud URL. For example: + ```bash + ZC=1 pnpm --filter MiniApp bundle + ``` + + - Bundle the HostApp: - ```js title="HostApp/rspack.config.mjs" - const remotes = { - MiniApp: `MiniApp@https://android-miniapp-yourusername-ze.zephyrcloud.app/MiniApp.container.js.bundle`, - }; + ```bash + ZC=1 pnpm --filter HostApp bundle ``` - - In the example above, replace MiniApp with your actual miniapp name (used both as the object key and inside the URL path), and replace yourusername with your Zephyr username/organization. The ${platform} placeholder will be replaced by Rspack with android or ios at build time. Ensure the URL has a trailing slash before ${platform} as shown. + - Command run with `ZC=1` will upload the bundles to Zephyr Cloud. - - If you have multiple miniapps, add each one to the remotes object in the same way, using its own name and Zephyr URL. For example: - ```js title="HostApp/rspack.config.mjs" - const remotes = { - MiniApp1: `MiniApp1@https://ios-miniapp1-yourusername-ze.zephyrcloud.app/MiniApp1.container.js.bundle`, - MiniApp2: `MiniApp2@https://ios-miniapp2-yourusername-ze.zephyrcloud.app/MiniApp2.container.js.bundle`, - // add more miniapps as needed - }; - ``` +3. Build and run the HostApp in release mode: + + - For Android, you can use the following command from the HostApp android directory: -4. Build and run the HostApp in release mode: + ```bash + ZC=1 ./gradlew assembleRelease + ``` - - With the configuration updated, build and launch the HostApp using your normal release process. + {/* TODO: set ZC for iOS */} + {/* - For iOS, you can use the following command: */} - The HostApp will now load each miniapp bundle from the specified Zephyr Cloud URLs instead of localhost. Verify that the app launches correctly and that each miniapp is fetched successfully from the remote URL. From 1e882000a9e0f89d848be2db7e09e0688e954e28 Mon Sep 17 00:00:00 2001 From: Denis Belotserkovets <38587958+Thegrep01@users.noreply.github.com> Date: Tue, 6 May 2025 23:37:24 +0300 Subject: [PATCH 05/15] Update components/zephyr/repack/start-from-scratch.mdx Co-authored-by: Lois <79988376+zmzlois@users.noreply.github.com> --- components/zephyr/repack/start-from-scratch.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/zephyr/repack/start-from-scratch.mdx b/components/zephyr/repack/start-from-scratch.mdx index a8229ce..189bc5e 100644 --- a/components/zephyr/repack/start-from-scratch.mdx +++ b/components/zephyr/repack/start-from-scratch.mdx @@ -540,7 +540,7 @@ The process should be the same for Android. ## Running the application in release mode with Zephyr -By default, the HostApp loads miniapp bundles from a local development server (e.g. localhost). To run the app in production/release mode without using the Zephyr development environment, you must replace those local URLs with the Zephyr Cloud URLs for each miniapp. This ensures the HostApp fetches the miniapp bundles directly from the Zephyr-hosted endpoints. The process involves configuring your Zephyr environment, retrieving the correct remote URLs, and updating the HostApp’s module federation configuration. Once completed, you can build and launch the app in release mode normally (e.g. via Xcode or react-native release build), and it will load miniapps from the Zephyr Cloud URLs instead of localhost. +By default, the HostApp loads miniapp bundles from a local development server (e.g. localhost). To run the app in production/release mode without using the Zephyr development environment, you must replace those local URLs with the Zephyr Cloud URLs for each miniapp. This ensures the HostApp fetches the miniapp bundles directly from the Zephyr-hosted endpoints. The process involves configuring your Zephyr environment - and zephyr will auto-retrieving the correct remote URLs as well as updating the HostApp’s module federation configuration. Once completed, you can build and launch the app in release mode normally (e.g. via Xcode or react-native release build), and it will load miniapps from the Zephyr Cloud URLs instead of localhost. To successfully run the HostApp in release mode using Zephyr-hosted miniapps, you need to have a Zephyr environment configured for your project (such as production or staging). Each miniapp (remote module), along with the HostApp itself, must be registered within this environment. For step-by-step setup guidance, refer to the [Zephyr Environment Guide](../../how-to/environments.mdx) From b2b4d8ceb34d7b5584df32b621d469b264396ad3 Mon Sep 17 00:00:00 2001 From: Denis Belotserkovets <38587958+Thegrep01@users.noreply.github.com> Date: Tue, 6 May 2025 23:37:44 +0300 Subject: [PATCH 06/15] Update components/zephyr/repack/start-from-scratch.mdx Co-authored-by: Lois <79988376+zmzlois@users.noreply.github.com> --- components/zephyr/repack/start-from-scratch.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/zephyr/repack/start-from-scratch.mdx b/components/zephyr/repack/start-from-scratch.mdx index 189bc5e..6b4107c 100644 --- a/components/zephyr/repack/start-from-scratch.mdx +++ b/components/zephyr/repack/start-from-scratch.mdx @@ -542,7 +542,7 @@ The process should be the same for Android. By default, the HostApp loads miniapp bundles from a local development server (e.g. localhost). To run the app in production/release mode without using the Zephyr development environment, you must replace those local URLs with the Zephyr Cloud URLs for each miniapp. This ensures the HostApp fetches the miniapp bundles directly from the Zephyr-hosted endpoints. The process involves configuring your Zephyr environment - and zephyr will auto-retrieving the correct remote URLs as well as updating the HostApp’s module federation configuration. Once completed, you can build and launch the app in release mode normally (e.g. via Xcode or react-native release build), and it will load miniapps from the Zephyr Cloud URLs instead of localhost. -To successfully run the HostApp in release mode using Zephyr-hosted miniapps, you need to have a Zephyr environment configured for your project (such as production or staging). Each miniapp (remote module), along with the HostApp itself, must be registered within this environment. For step-by-step setup guidance, refer to the [Zephyr Environment Guide](../../how-to/environments.mdx) +To successfully run the HostApp in release mode using Zephyr-hosted MiniApps, you need to have a Zephyr environment configured for your project (such as production or staging). Each MiniApps (remote module), along with the HostApp itself, must be registered within this environment. For step-by-step setup guidance, refer to the [Zephyr Environment Guide](../../how-to/environments.mdx) ### Steps From 414e9293ac3d6fb738c01d1df171dfa76278e336 Mon Sep 17 00:00:00 2001 From: Denis Belotserkovets <38587958+Thegrep01@users.noreply.github.com> Date: Tue, 6 May 2025 23:37:55 +0300 Subject: [PATCH 07/15] Update components/zephyr/repack/start-from-scratch.mdx Co-authored-by: Lois <79988376+zmzlois@users.noreply.github.com> --- components/zephyr/repack/start-from-scratch.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/zephyr/repack/start-from-scratch.mdx b/components/zephyr/repack/start-from-scratch.mdx index 6b4107c..a915f64 100644 --- a/components/zephyr/repack/start-from-scratch.mdx +++ b/components/zephyr/repack/start-from-scratch.mdx @@ -750,6 +750,6 @@ Configure the Zephyr environment: {/* TODO: set ZC for iOS */} {/* - For iOS, you can use the following command: */} - - The HostApp will now load each miniapp bundle from the specified Zephyr Cloud URLs instead of localhost. Verify that the app launches correctly and that each miniapp is fetched successfully from the remote URL. + - The HostApp will now load each miniapp bundle from the specified Zephyr Cloud URLs instead of localhost. Verify that the app launches correctly and that each MiniApp is fetched successfully from the remote URL. By following these steps, you can run your HostApp in production mode without the Zephyr development environment, using the remote module bundles hosted on Zephyr Cloud. From c6cd96ddb2ba2123e78766343961f082c379f3de Mon Sep 17 00:00:00 2001 From: theGrep01 Date: Tue, 6 May 2025 23:40:28 +0300 Subject: [PATCH 08/15] fix: changes ending --- components/zephyr/repack/start-from-scratch.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/zephyr/repack/start-from-scratch.mdx b/components/zephyr/repack/start-from-scratch.mdx index a915f64..d90b14d 100644 --- a/components/zephyr/repack/start-from-scratch.mdx +++ b/components/zephyr/repack/start-from-scratch.mdx @@ -752,4 +752,4 @@ Configure the Zephyr environment: - The HostApp will now load each miniapp bundle from the specified Zephyr Cloud URLs instead of localhost. Verify that the app launches correctly and that each MiniApp is fetched successfully from the remote URL. -By following these steps, you can run your HostApp in production mode without the Zephyr development environment, using the remote module bundles hosted on Zephyr Cloud. +By following these steps, you can run your HostApp in production mode with the Zephyr, using the remote bundles hosted on Zephyr Cloud. \ No newline at end of file From bf84dc5f38a2a5bb68b2e6cb83cf3f7668caa12a Mon Sep 17 00:00:00 2001 From: theGrep01 Date: Tue, 6 May 2025 23:42:41 +0300 Subject: [PATCH 09/15] feat: adds extra explanation to ZC --- components/zephyr/repack/start-from-scratch.mdx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/components/zephyr/repack/start-from-scratch.mdx b/components/zephyr/repack/start-from-scratch.mdx index d90b14d..2a30127 100644 --- a/components/zephyr/repack/start-from-scratch.mdx +++ b/components/zephyr/repack/start-from-scratch.mdx @@ -702,6 +702,8 @@ Configure the Zephyr environment: - `ZC` is used to indicate that the bundles are for Zephyr Cloud. + - Now, when you run or bundle with `ZC=1`, the bundles will be uploaded to Zephyr Cloud. + 2. Add bundle scripts to the HostApp and MiniApp: - In the HostApp and MiniApp, add the following scripts to the package.json files: From dcc78d9467278c0ea3845c2acf0dfae8e2bf528c Mon Sep 17 00:00:00 2001 From: Denis Belotserkovets <38587958+Thegrep01@users.noreply.github.com> Date: Wed, 7 May 2025 17:22:31 +0300 Subject: [PATCH 10/15] Update components/zephyr/repack/start-from-scratch.mdx Co-authored-by: Lois <79988376+zmzlois@users.noreply.github.com> --- components/zephyr/repack/start-from-scratch.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/zephyr/repack/start-from-scratch.mdx b/components/zephyr/repack/start-from-scratch.mdx index 2a30127..fc531fb 100644 --- a/components/zephyr/repack/start-from-scratch.mdx +++ b/components/zephyr/repack/start-from-scratch.mdx @@ -724,7 +724,7 @@ Configure the Zephyr environment: } ``` -2. Bundle HostApp and MiniApps, and upload to Zephyr Cloud: +2. Bundle HostApp and MiniApps, and deploy to Zephyr Cloud: - Bundle the MiniApp: From 7f2734579742c7f5b9c2b44e592f422af816e03b Mon Sep 17 00:00:00 2001 From: Denis Belotserkovets <38587958+Thegrep01@users.noreply.github.com> Date: Wed, 7 May 2025 17:22:43 +0300 Subject: [PATCH 11/15] Update components/zephyr/repack/start-from-scratch.mdx Co-authored-by: Lois <79988376+zmzlois@users.noreply.github.com> --- components/zephyr/repack/start-from-scratch.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/zephyr/repack/start-from-scratch.mdx b/components/zephyr/repack/start-from-scratch.mdx index fc531fb..5520fc8 100644 --- a/components/zephyr/repack/start-from-scratch.mdx +++ b/components/zephyr/repack/start-from-scratch.mdx @@ -754,4 +754,4 @@ Configure the Zephyr environment: - The HostApp will now load each miniapp bundle from the specified Zephyr Cloud URLs instead of localhost. Verify that the app launches correctly and that each MiniApp is fetched successfully from the remote URL. -By following these steps, you can run your HostApp in production mode with the Zephyr, using the remote bundles hosted on Zephyr Cloud. \ No newline at end of file +By following these steps, you can run your HostApp in production mode with Zephyr, using the remote bundles (MiniApps) deployed on Zephyr Cloud. \ No newline at end of file From 4fcbd5662f8ae21b38307d6a716ba243ca46928e Mon Sep 17 00:00:00 2001 From: Denis Belotserkovets <38587958+Thegrep01@users.noreply.github.com> Date: Wed, 7 May 2025 17:22:51 +0300 Subject: [PATCH 12/15] Update components/zephyr/repack/start-from-scratch.mdx Co-authored-by: Lois <79988376+zmzlois@users.noreply.github.com> --- components/zephyr/repack/start-from-scratch.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/zephyr/repack/start-from-scratch.mdx b/components/zephyr/repack/start-from-scratch.mdx index 5520fc8..f3e5016 100644 --- a/components/zephyr/repack/start-from-scratch.mdx +++ b/components/zephyr/repack/start-from-scratch.mdx @@ -752,6 +752,6 @@ Configure the Zephyr environment: {/* TODO: set ZC for iOS */} {/* - For iOS, you can use the following command: */} - - The HostApp will now load each miniapp bundle from the specified Zephyr Cloud URLs instead of localhost. Verify that the app launches correctly and that each MiniApp is fetched successfully from the remote URL. + - The HostApp will now load each MiniApp's bundle from the specified Zephyr Cloud URLs instead of localhost. Verify that the app launches correctly and that each MiniApp is fetched successfully from the remote URL. By following these steps, you can run your HostApp in production mode with Zephyr, using the remote bundles (MiniApps) deployed on Zephyr Cloud. \ No newline at end of file From 8f7317547ad0a568498f7b5a784e0c956e53a6ed Mon Sep 17 00:00:00 2001 From: Denis Belotserkovets <38587958+Thegrep01@users.noreply.github.com> Date: Wed, 7 May 2025 17:23:50 +0300 Subject: [PATCH 13/15] Update components/zephyr/repack/start-from-scratch.mdx Co-authored-by: Lois <79988376+zmzlois@users.noreply.github.com> --- components/zephyr/repack/start-from-scratch.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/zephyr/repack/start-from-scratch.mdx b/components/zephyr/repack/start-from-scratch.mdx index f3e5016..02876c3 100644 --- a/components/zephyr/repack/start-from-scratch.mdx +++ b/components/zephyr/repack/start-from-scratch.mdx @@ -702,7 +702,7 @@ Configure the Zephyr environment: - `ZC` is used to indicate that the bundles are for Zephyr Cloud. - - Now, when you run or bundle with `ZC=1`, the bundles will be uploaded to Zephyr Cloud. + - Now, when you run or bundle with `ZC=1`, the bundles will be deployed to Zephyr Cloud. 2. Add bundle scripts to the HostApp and MiniApp: From 8219f55140f95efe6fd864bc6d0b85f988fc616f Mon Sep 17 00:00:00 2001 From: Denis Belotserkovets <38587958+Thegrep01@users.noreply.github.com> Date: Wed, 7 May 2025 17:26:53 +0300 Subject: [PATCH 14/15] Update components/zephyr/repack/start-from-scratch.mdx Co-authored-by: Lois <79988376+zmzlois@users.noreply.github.com> --- components/zephyr/repack/start-from-scratch.mdx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/components/zephyr/repack/start-from-scratch.mdx b/components/zephyr/repack/start-from-scratch.mdx index 02876c3..1c0d13e 100644 --- a/components/zephyr/repack/start-from-scratch.mdx +++ b/components/zephyr/repack/start-from-scratch.mdx @@ -540,7 +540,9 @@ The process should be the same for Android. ## Running the application in release mode with Zephyr -By default, the HostApp loads miniapp bundles from a local development server (e.g. localhost). To run the app in production/release mode without using the Zephyr development environment, you must replace those local URLs with the Zephyr Cloud URLs for each miniapp. This ensures the HostApp fetches the miniapp bundles directly from the Zephyr-hosted endpoints. The process involves configuring your Zephyr environment - and zephyr will auto-retrieving the correct remote URLs as well as updating the HostApp’s module federation configuration. Once completed, you can build and launch the app in release mode normally (e.g. via Xcode or react-native release build), and it will load miniapps from the Zephyr Cloud URLs instead of localhost. +When you are using Zephyr with Re.Pack, the HostApp auto-loads MiniApps' bundles from Zephyr. To run the app in production/release mode with Zephyr, the process involves configuring your Zephyr environment - and `zephyr-repack-plugin` will auto-retrieving the latest deployed remote URLs as well as updating the HostApp’s module federation configuration during the bundling. Once completed, you can build and launch the app in release mode normally (e.g. via Xcode or react-native release build), and it will load MiniApps from the Zephyr Cloud URLs instead of localhost. + +We will soon launch `react-native-zephyr-sdk` to auto-rollback, roll-forward MiniApps during runtime. To use `react-native-zephyr-sdk`, you must use `zephyr-repack-plugin` during build time. To successfully run the HostApp in release mode using Zephyr-hosted MiniApps, you need to have a Zephyr environment configured for your project (such as production or staging). Each MiniApps (remote module), along with the HostApp itself, must be registered within this environment. For step-by-step setup guidance, refer to the [Zephyr Environment Guide](../../how-to/environments.mdx) From dfd8b01baaacdaf72735b23a2cd51e6726f3adb7 Mon Sep 17 00:00:00 2001 From: theGrep01 Date: Wed, 7 May 2025 17:30:29 +0300 Subject: [PATCH 15/15] feat: moves doc to repack-mf --- .../zephyr/repack/start-from-scratch.mdx | 220 +----------------- docs/recipes/repack-mf.mdx | 220 +++++++++++++++++- 2 files changed, 220 insertions(+), 220 deletions(-) diff --git a/components/zephyr/repack/start-from-scratch.mdx b/components/zephyr/repack/start-from-scratch.mdx index 02876c3..a7ae024 100644 --- a/components/zephyr/repack/start-from-scratch.mdx +++ b/components/zephyr/repack/start-from-scratch.mdx @@ -536,222 +536,4 @@ You should see the applicaiton running in the iOS emulator: Zephyr Cloud Minimal example running in iOS emulator -The process should be the same for Android. - -## Running the application in release mode with Zephyr - -By default, the HostApp loads miniapp bundles from a local development server (e.g. localhost). To run the app in production/release mode without using the Zephyr development environment, you must replace those local URLs with the Zephyr Cloud URLs for each miniapp. This ensures the HostApp fetches the miniapp bundles directly from the Zephyr-hosted endpoints. The process involves configuring your Zephyr environment - and zephyr will auto-retrieving the correct remote URLs as well as updating the HostApp’s module federation configuration. Once completed, you can build and launch the app in release mode normally (e.g. via Xcode or react-native release build), and it will load miniapps from the Zephyr Cloud URLs instead of localhost. - -To successfully run the HostApp in release mode using Zephyr-hosted MiniApps, you need to have a Zephyr environment configured for your project (such as production or staging). Each MiniApps (remote module), along with the HostApp itself, must be registered within this environment. For step-by-step setup guidance, refer to the [Zephyr Environment Guide](../../how-to/environments.mdx) - -### Steps - -Follow these steps to configure and run the HostApp in release mode with Zephyr: - -Configure the Zephyr environment: - -1. Change your configs to divide debug builds and release builds: - - - In the HostApp and MiniApp, change the `rspack.config.mjs` file to add a `ZC` variable: - - ```js title="HostApp/rspack.config.mjs"{9,17,72} - import path from 'node:path'; - import {fileURLToPath} from 'node:url'; - import * as Repack from '@callstack/repack'; - import {withZephyr} from 'zephyr-repack-plugin'; - const __filename = fileURLToPath(import.meta.url); - const __dirname = path.dirname(__filename); - - - const USE_ZEPHYR = Boolean(process.env.ZC); - /** - * Rspack configuration enhanced with Re.Pack defaults for React Native. - * - * Learn about Rspack configuration: https://rspack.dev/config/ - * Learn about Re.Pack configuration: https://re-pack.dev/docs/guides/configuration - */ - - const config = env => { - const { platform, mode } = env - return { - context: __dirname, - entry: './index.js', - resolve: { - // 1. Understand the file path of ios and android file extensions - // 2. Configure the output to be as close to Metro as possible - ...Repack.getResolveOptions(), - }, - output: { - // Unsure - for module federation HMR and runtime? - uniqueName: 'react-native-host-app', - }, - module: { - rules: [ - ...Repack.getJsTransformRules(), - ...Repack.getAssetTransformRules(), - ], - }, - plugins: [ - new Repack.RepackPlugin({ - platform, - }), - new Repack.plugins.ModuleFederationPluginV2({ - name: 'HostApp', - filename: 'HostApp.container.js.bundle', - dts: false, - remotes: { - MiniApp: `MiniApp@http://localhost:9001/${platform}/MiniApp.container.js.bundle`, - }, - shared: { - react: { - singleton: true, - version: '19.0.0', - eager: true, - }, - 'react-native': { - singleton: true, - version: '0.78.0', - eager: true, - } - }, - }), - // Supports for new architecture - Hermes can also use JS, it's not a requirement, it will still work the same but it's for performance optimization - new Repack.plugins.HermesBytecodePlugin({ - enabled: mode === 'production', - test: /\.(js)?bundle$/, - exclude: /index.bundle$/, - }), - ], - } - }; - - export default USE_ZEPHYR ? withZephyr()(config) : config; - ``` - - ```js title="MiniApp/rspack.config.mjs"{9,19,68} - import path from 'node:path'; - import {fileURLToPath} from 'node:url'; - import * as Repack from '@callstack/repack'; - import {withZephyr} from 'zephyr-repack-plugin'; - - const __filename = fileURLToPath(import.meta.url); - const __dirname = path.dirname(__filename); - - const USE_ZEPHYR = Boolean(process.env.ZC); - const STANDALONE = Boolean(process.env.STANDALONE); - - /** - * Rspack configuration enhanced with Re.Pack defaults for React Native. - * - * Learn about Rspack configuration: https://rspack.dev/config/ - * Learn about Re.Pack configuration: https://re-pack.dev/docs/guides/configuration - */ - - const config = env => { - const {platform, mode} = env; - return { - mode, - context: __dirname, - entry: './index.js', - resolve: { - ...Repack.getResolveOptions(), - }, - output: { - uniqueName: 'react-native-mini-app', - }, - module: { - rules: [ - ...Repack.getJsTransformRules(), - ...Repack.getAssetTransformRules({inline: true}), - ], - }, - plugins: [ - new Repack.RepackPlugin(), - new Repack.plugins.ModuleFederationPluginV2({ - name: 'MiniApp', - filename: 'MiniApp.container.js.bundle', - dts: false, - exposes: { - './App': './App.tsx', - }, - shared: { - react: { - singleton: true, - version: '19.0.0', - eager: STANDALONE, - }, - 'react-native': { - singleton: true, - version: '0.78.0', - eager: STANDALONE, - }, - }, - }), - new Repack.plugins.HermesBytecodePlugin({ - enabled: mode === 'production', - test: /\.(js)?bundle$/, - exclude: /index.bundle$/, - }), - ], - }; - }; - - export default USE_ZEPHYR ? withZephyr()(config) : config; - - ``` - - - `ZC` is used to indicate that the bundles are for Zephyr Cloud. - - - Now, when you run or bundle with `ZC=1`, the bundles will be deployed to Zephyr Cloud. - -2. Add bundle scripts to the HostApp and MiniApp: - - - In the HostApp and MiniApp, add the following scripts to the package.json files: - - ```json title="HostApp/package.json" - "scripts": { - "bundle": "pnpm run bundle:ios && pnpm run bundle:android", - "bundle:ios": "react-native bundle --platform ios --dev false --entry-file index.js", - "bundle:android": "react-native bundle --platform android --dev false --entry-file index.js" - } - ``` - - ```json title="MiniApp/package.json" - "scripts": { - "bundle": "pnpm run bundle:ios && pnpm run bundle:android", - "bundle:ios": "react-native bundle --platform ios --dev false --entry-file index.js", - "bundle:android": "react-native bundle --platform android --dev false --entry-file index.js" - } - ``` - -2. Bundle HostApp and MiniApps, and deploy to Zephyr Cloud: - - - Bundle the MiniApp: - - ```bash - ZC=1 pnpm --filter MiniApp bundle - ``` - - - Bundle the HostApp: - - ```bash - ZC=1 pnpm --filter HostApp bundle - ``` - - - Command run with `ZC=1` will upload the bundles to Zephyr Cloud. - - -3. Build and run the HostApp in release mode: - - - For Android, you can use the following command from the HostApp android directory: - - ```bash - ZC=1 ./gradlew assembleRelease - ``` - - {/* TODO: set ZC for iOS */} - {/* - For iOS, you can use the following command: */} - - - The HostApp will now load each MiniApp's bundle from the specified Zephyr Cloud URLs instead of localhost. Verify that the app launches correctly and that each MiniApp is fetched successfully from the remote URL. - -By following these steps, you can run your HostApp in production mode with Zephyr, using the remote bundles (MiniApps) deployed on Zephyr Cloud. \ No newline at end of file +The process should be the same for Android. \ No newline at end of file diff --git a/docs/recipes/repack-mf.mdx b/docs/recipes/repack-mf.mdx index fbb5227..07c20f0 100644 --- a/docs/recipes/repack-mf.mdx +++ b/docs/recipes/repack-mf.mdx @@ -76,7 +76,225 @@ On the downside, this approach increased coupling, which resulted in challenges There is also a third solution: using a single NavigationContainer in the host application while exposing navigators from the mini applications. This approach reduces coupling, allowing mini applications to maintain control over their navigators. However, it can lead to undesirable navigation structures, such as deeply nested stack navigators, and a complex linking setup that requires synchronization between the host and mini applications. - +## Running the application in release mode with Zephyr + +By default, the HostApp loads miniapp bundles from a local development server (e.g. localhost). To run the app in production/release mode without using the Zephyr development environment, you must replace those local URLs with the Zephyr Cloud URLs for each miniapp. This ensures the HostApp fetches the miniapp bundles directly from the Zephyr-hosted endpoints. The process involves configuring your Zephyr environment - and zephyr will auto-retrieving the correct remote URLs as well as updating the HostApp’s module federation configuration. Once completed, you can build and launch the app in release mode normally (e.g. via Xcode or react-native release build), and it will load miniapps from the Zephyr Cloud URLs instead of localhost. + +To successfully run the HostApp in release mode using Zephyr-hosted MiniApps, you need to have a Zephyr environment configured for your project (such as production or staging). Each MiniApps (remote module), along with the HostApp itself, must be registered within this environment. For step-by-step setup guidance, refer to the [Zephyr Environment Guide](../../how-to/environments.mdx) + +### Steps + +Follow these steps to configure and run the HostApp in release mode with Zephyr: + +Configure the Zephyr environment: + +1. Change your configs to divide debug builds and release builds: + + #### HostApp's configuration + + ```js title="HostApp/rspack.config.mjs"{9,17,72} + import path from 'node:path'; + import {fileURLToPath} from 'node:url'; + import * as Repack from '@callstack/repack'; + import {withZephyr} from 'zephyr-repack-plugin'; + const __filename = fileURLToPath(import.meta.url); + const __dirname = path.dirname(__filename); + + + const USE_ZEPHYR = Boolean(process.env.ZC); + /** + * Rspack configuration enhanced with Re.Pack defaults for React Native. + * + * Learn about Rspack configuration: https://rspack.dev/config/ + * Learn about Re.Pack configuration: https://re-pack.dev/docs/guides/configuration + */ + + const config = env => { + const { platform, mode } = env + return { + context: __dirname, + entry: './index.js', + resolve: { + // 1. Understand the file path of ios and android file extensions + // 2. Configure the output to be as close to Metro as possible + ...Repack.getResolveOptions(), + }, + output: { + // Unsure - for module federation HMR and runtime? + uniqueName: 'react-native-host-app', + }, + module: { + rules: [ + ...Repack.getJsTransformRules(), + ...Repack.getAssetTransformRules(), + ], + }, + plugins: [ + new Repack.RepackPlugin({ + platform, + }), + new Repack.plugins.ModuleFederationPluginV2({ + name: 'HostApp', + filename: 'HostApp.container.js.bundle', + dts: false, + remotes: { + MiniApp: `MiniApp@http://localhost:9001/${platform}/MiniApp.container.js.bundle`, + }, + shared: { + react: { + singleton: true, + version: '19.0.0', + eager: true, + }, + 'react-native': { + singleton: true, + version: '0.78.0', + eager: true, + } + }, + }), + // Supports for new architecture - Hermes can also use JS, it's not a requirement, it will still work the same but it's for performance optimization + new Repack.plugins.HermesBytecodePlugin({ + enabled: mode === 'production', + test: /\.(js)?bundle$/, + exclude: /index.bundle$/, + }), + ], + } + }; + + export default USE_ZEPHYR ? withZephyr()(config) : config; + ``` + + #### MiniApp's configuration + + ```js title="MiniApp/rspack.config.mjs"{9,19,68} + import path from 'node:path'; + import {fileURLToPath} from 'node:url'; + import * as Repack from '@callstack/repack'; + import {withZephyr} from 'zephyr-repack-plugin'; + + const __filename = fileURLToPath(import.meta.url); + const __dirname = path.dirname(__filename); + + const USE_ZEPHYR = Boolean(process.env.ZC); + const STANDALONE = Boolean(process.env.STANDALONE); + + /** + * Rspack configuration enhanced with Re.Pack defaults for React Native. + * + * Learn about Rspack configuration: https://rspack.dev/config/ + * Learn about Re.Pack configuration: https://re-pack.dev/docs/guides/configuration + */ + + const config = env => { + const {platform, mode} = env; + return { + mode, + context: __dirname, + entry: './index.js', + resolve: { + ...Repack.getResolveOptions(), + }, + output: { + uniqueName: 'react-native-mini-app', + }, + module: { + rules: [ + ...Repack.getJsTransformRules(), + ...Repack.getAssetTransformRules({inline: true}), + ], + }, + plugins: [ + new Repack.RepackPlugin(), + new Repack.plugins.ModuleFederationPluginV2({ + name: 'MiniApp', + filename: 'MiniApp.container.js.bundle', + dts: false, + exposes: { + './App': './App.tsx', + }, + shared: { + react: { + singleton: true, + version: '19.0.0', + eager: STANDALONE, + }, + 'react-native': { + singleton: true, + version: '0.78.0', + eager: STANDALONE, + }, + }, + }), + new Repack.plugins.HermesBytecodePlugin({ + enabled: mode === 'production', + test: /\.(js)?bundle$/, + exclude: /index.bundle$/, + }), + ], + }; + }; + + export default USE_ZEPHYR ? withZephyr()(config) : config; + + ``` + + - `ZC` is used to indicate that the bundles are for Zephyr Cloud. + + - Now, when you run or bundle with `ZC=1`, the bundles will be deployed to Zephyr Cloud. + +2. Add bundle scripts to the HostApp and MiniApp: + + - In the HostApp and MiniApp, add the following scripts to the package.json files: + + ```json title="HostApp/package.json" + "scripts": { + "bundle": "pnpm run bundle:ios && pnpm run bundle:android", + "bundle:ios": "react-native bundle --platform ios --dev false --entry-file index.js", + "bundle:android": "react-native bundle --platform android --dev false --entry-file index.js" + } + ``` + + ```json title="MiniApp/package.json" + "scripts": { + "bundle": "pnpm run bundle:ios && pnpm run bundle:android", + "bundle:ios": "react-native bundle --platform ios --dev false --entry-file index.js", + "bundle:android": "react-native bundle --platform android --dev false --entry-file index.js" + } + ``` + +2. Bundle HostApp and MiniApps, and deploy to Zephyr Cloud: + + - Bundle the MiniApp: + + ```bash + ZC=1 pnpm --filter MiniApp bundle + ``` + + - Bundle the HostApp: + + ```bash + ZC=1 pnpm --filter HostApp bundle + ``` + + - Command run with `ZC=1` will upload the bundles to Zephyr Cloud. + + +3. Build and run the HostApp in release mode: + + - For Android, you can use the following command from the HostApp android directory: + + ```bash + ZC=1 ./gradlew assembleRelease + ``` + + {/* TODO: set ZC for iOS */} + {/* - For iOS, you can use the following command: */} + + - The HostApp will now load each MiniApp's bundle from the specified Zephyr Cloud URLs instead of localhost. Verify that the app launches correctly and that each MiniApp is fetched successfully from the remote URL. + +By following these steps, you can run your HostApp in production mode with Zephyr, using the remote bundles (MiniApps) deployed on Zephyr Cloud.