Skip to content

Latest commit

 

History

History
78 lines (66 loc) · 1.72 KB

README.md

File metadata and controls

78 lines (66 loc) · 1.72 KB

React Native LaunchDarkly Micro Frontend Demo

This project demonstrates how to build a micro frontend application using React Native, LaunchDarkly, and Re.Pack for module federation.

Features

  • Utilizes LaunchDarkly for feature flag management
  • Implements module federation with Re.Pack
  • Returns flag variations based on evaluated context.

Prerequisites

  • LaunchDarkly account
  • React v18.2.0
  • React Native v0.71.12
  • LaunchDarkly React Native SDK v7.1.6
  • Re.pack v3.4.0
  • IOS Simulator

Setup

  1. Clone the repository:
git clone https://github.com/tanben/sample-reactnative-mfe
cd sample-reactnative-mfe
  1. Install dependencies:
npm run install
  1. Create two LaunchDarkly projects with the following feature flags:
  • color (STRING): Assign a color for the on and off states (e.g., red for ON and grey for OFF).
  • enable-dark-mode (BOOLEAN, optional): Enable or disable dark mode.
  1. Update the host/Config.js and app1/Config.js files with your LaunchDarkly project's mobileKey. Other properties are optional.
const ldProjects = {
  MFE1: {
    key: '',
    url: '',
    mobileKey: 'your mobile key',
  },
  MFE2: {
    key: '',
    url: '',
    mobileKey: 'your mobile key',
  },
};
  1. In host/Config.js, set the mobileKey from app1 in the secondaryMobileKeys object:
const ldConfig = {
  mobileKey: ldProjects.MFE2.mobileKey,
  secondaryMobileKeys: {
    'app1': '<mobile key from app1 container>'
  },
  ...
}

Running the app

  1. Run host and remote app.
npm run start:app1
npm run start:host
  1. Run Host IOS app
npm run ios:host
  1. Run App1 IOS app
npm run ios:app1