https://github.com/tanben/reactnative-microfrontend
Sample LaunchDarkly React native micro frontend application
https://github.com/tanben/reactnative-microfrontend
launchdarkly micro-frontend microapps module-federation react-native repack superapp
Last synced: 5 months ago
JSON representation
Sample LaunchDarkly React native micro frontend application
- Host: GitHub
- URL: https://github.com/tanben/reactnative-microfrontend
- Owner: tanben
- Created: 2023-08-20T00:49:06.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2025-04-22T20:16:18.000Z (about 1 year ago)
- Last Synced: 2025-04-22T21:24:49.163Z (about 1 year ago)
- Topics: launchdarkly, micro-frontend, microapps, module-federation, react-native, repack, superapp
- Language: JavaScript
- Homepage:
- Size: 9.4 MB
- Stars: 5
- Watchers: 1
- Forks: 3
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](https://developer.apple.com/documentation/xcode/installing-additional-simulator-runtimes)
## Setup
1. Clone the repository:
```
git clone https://github.com/tanben/sample-reactnative-mfe
cd sample-reactnative-mfe
```
2. Install dependencies:
```
npm run install
```
3. 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.
4. 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',
},
};
```
5. In host/Config.js, set the mobileKey from app1 in the secondaryMobileKeys object:
```
const ldConfig = {
mobileKey: ldProjects.MFE2.mobileKey,
secondaryMobileKeys: {
'app1': ''
},
...
}
```
## Running the app
1. Run host and remote app.
```
npm run start:app1
npm run start:host
```
2. Run Host IOS app
```
npm run ios:host
```
3. Run App1 IOS app
```
npm run ios:app1
```