feat: re-works flow

Author: theGrep01

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.