Skip to content

Sample LaunchDarkly React native micro frontend application

Notifications You must be signed in to change notification settings

tanben/reactnative-microfrontend

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

43 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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