LD-React
Simple app from create-react-app
modified to showcase a red light / green light Feature Flag setup with LaunchDarkly. This can be further enhanced by leveraging targeting and a more compelling feature to easily do A/B testing, send specific users through specific code paths, etc.
How to use
In order to test this repostiory out locally, you can follow the following steps. Note: This guide assumes you have installed tooling such as git
, node
, and know how to clone a repository and make basic edits in code.
- Clone the repository locally
- Go to your LaunchDarkly Feature Flag Dashboard
- Create a new flag named
trafficLight
and enter the following information (see image below for reference)key
:trafficLight
- Check the box for
SDKs using Client-side ID
Flag variations
:Boolean
- Variation 1 -
value:
true
,Name
:Green Light
- Variation 2 -
value:
false
,Name
:Red Light
- Click
Save flag
- Within your local version of the repository, open the
src/App.js
file and edit theclientSideID
value fromYOUR-CLIENT-SIDE-ID
to your actual client side SDK ID.- From your LaunchDarkly Account Settings page, select the project you created the flag in, then copy the
Client-side ID
and replace theYOUR-CLIENT-SIDE-ID
string accordingly.
- From your LaunchDarkly Account Settings page, select the project you created the flag in, then copy the
Note: The React SDK uses the Client-side ID
, not the SDK key
or the Mobile key
.
- Ensure your terminal is in the root directory of the project and run
npm install
to install the repository dependencies, including theLaunchDarkly React SDK
. - Ensure your changes are saved, then run
npm start
- Open your browser to localhost:3000
- You should notice the text stating "The flag is off" and a red circle below.
- From your LaunchDarkly Feature Flag Dashboard toggle the flag on and save your changes in the pop-up that appears. Note the app now has the text "The flag is on" and a green circle below.