Skip to content

Latest commit

 

History

History
127 lines (99 loc) · 4.89 KB

README.md

File metadata and controls

127 lines (99 loc) · 4.89 KB

Zephyr Repack Plugin

zephyr-repack-plugin is a plugin to deploy cross-platform application built with React Native, Rspack and Re.Pack and enable Over-The-Air updates capablities for federated applications.

Installation

Installing the zephyr-repack-plugin for your cross-platform application:

# npm
npm install --save-dev zephyr-repack-plugin
# yarn
yarn add --dev zephyr-repack-plugin
# pnpm
pnpm add --dev zephyr-repack-plugin
# bun
bun add --dev zephyr-repack-plugin

Usage

Using zephyr-repack-plugin by wrapping the Rspack configuration:

const { withZephyr } = require('zephyr-repack-plugin');

const config = {
  /** ...rspack configuration */
};

module.exports = withZephyr()(config);

With zephyr-repack-plugin you can continue to use the previous configuration from Module Federation configuration (note that just the configuration, not the plugin). We recommend using the new Re.Pack Module Federation as it has better runtime support for cross-platform applications for usage with rspack and react native.

Using Re.Pack

For usage with Re.Pack you can check out Re.Pack's docs - another reference of how to use it is Callstack's Super App Showcase and our Repack Example.

Configuration for Module Federation

Continuation

  1. You can continue to use previous configuration from Module Federation configuration (note that just the configuration, not the plugin). We recommend using the new Re.Pack Module Federation as it has better runtime support for cross-platform applications for usage with rspack and react native.
// rspack.config.js
plugins: [
  new Repack.plugins.ModuleFederationPluginV2({
    // your configuration
  }),
];

Host app/Consumer example

// rspack.config.js
...
 new Repack.plugins.ModuleFederationPluginV2({
        /**
         * The name of the module is used to identify the module in URLs resolver and imports.
         */
        name: 'MobileHost',
        dts: false,
        remotes: {
          MobileCart: `MobileCart@http://localhost:9000/${platform}/MobileCart.container.js.bundle`,
          MobileInventory: `MobileInventory@http://localhost:9001/${platform}/MobileInventory.container.js.bundle`,
          MobileCheckout: `MobileCheckout@http://localhost:9002/${platform}/MobileCheckout.container.js.bundle`,
          MobileOrders: `MobileOrders@http://localhost:9003/${platform}/MobileOrders.container.js.bundle`,
        },
        /**
         * Shared modules are shared in the share scope.
         * React, React Native and React Navigation should be provided here because there should be only one instance of these modules.
         * Their names are used to match requested modules in this compilation.
         */
        shared: getSharedDependencies({eager: true}),
      }),
...

MiniApp/Provider example

// rspack.config.js
...
   new Repack.plugins.ModuleFederationPluginV2({
        /**
         * The name of the module is used to identify the module in URLs resolver and imports.
         */
        name: 'MobileCheckout',
        filename: 'MobileCheckout.container.js.bundle',
        dts: false,
        /**
         * This is a list of modules that will be shared between remote containers.
         */
        exposes: {
          './CheckoutSection': './src/components/CheckoutSection',
          './CheckoutSuccessScreen': './src/screens/CheckoutSuccessScreen',
        },
        /**
         * Shared modules are shared in the share scope.
         * React, React Native and React Navigation should be provided here because there should be only one instance of these modules.
         * Their names are used to match requested modules in this compilation.
         */
        shared: getSharedDependencies({eager: STANDALONE}),
      }),
      ...

Creation command

To create a complete example of a React Native application, with Zephyr enabled, configured, you can use our creation command where you can find most of our examples.

npx create-zephyr-apps@latest

This will create a new React Native application with Zephyr enabled, configured, and ready to use. Read more about what this command would create here.