docs: How to Implement Feature Flags in React using Unleash
rishi-raj-jain opened this issue ยท 2 comments
Outline ๐๐ป
How to Implement Feature Flags in React using Unleash
Some additional information
In this tutorial, you will learn how to use feature flags in a [React](https://reactjs.org/) application that shows different content based on the current time and set the time new content shall be shown, using Unleash. We will use the @unleash/proxy-client-react
and unleash-proxy-client
packages, which provides easy integration of Unleash feature flags in a React application.
What weโll be using
Mention:
What youโll need
Setting up the project
To set up, just clone the app repo and follow this tutorial to learn everything that's in it. To fork the project, run:
git clone https://github.com/rishi-raj-jain/repo-slug
# Some additional information
Scaffolding a React app
Creating an React app is as easy as a single command:
# command
Setup Unleash
- Run the following commands in the terminal to fetch the
docker-compose.yml
for creating an Unleash instance:
wget getunleash.io/docker-compose.yml
docker-compose up -d
This will start Unleash in the background. Once Unleash is running, you can access it at http://localhost:4242/.
- Now use the default credentials to log into the instance:
Username: admin
Password: unleash4all
Exploring Unleash's currentTime strategy constraint
To display different contents based on the time it's being accessed, we'll be use an existing strategy constraint named currentTime
in Unleash. This will help us decide whether the new content shall be shown, and use that flag in our app.
Screenshots
Create a New Feature
Create a new feature flag in your Unleash instance named timebased-content
.
Steps to use the exisiting constraint
currentTime
Screenshots
Integrating Unleash in React app
Installation
To get started with React and Unleash, you need to install @unleash/proxy-client-react
and unleash-proxy-client
packages as dependencies.
You can run the following commands in your terminal to do this:
npm install @unleash/proxy-client-react unleash-proxy-client
Set up Environment Variables
By default, the following values are setup in your local Unleash instance
# .env
UNLEASH_API_URL="http://localhost:4242/api"
UNLEASH_AUTHORIZATION_KEY="default:development.unleash-insecure-api-token"
Initialise Unleash SDK
Some additional information
// some code
Use Unleash SDK to fetch the feature flag value
Some additional information
// some code
Scenarios
Some additional information
Screenshots
Revert: Scenarios
Some additional information
Screenshots
Using Unleash in Production
To setup Unleash for production, please follow the steps below:
- Self-host Unleash, or run an instance on [Unleash Cloud](https://www.getunleash.io/pricing).
- Get an [API key](/reference/api-tokens-and-client-keys) from the Unleash dashboard.
- Store the API key in your Environment Variables of your hosting, which secures it and makes it accessible in your code.
Conclusion
Some additional information
Timed Based Content demo with Unleash and React
React.Timed.Content.Unleash.mp4
we have a guide for react written by @nnennandukwe here: https://docs.getunleash.io/feature-flag-tutorials/react