Example React application for CloudBees Unify feature management

Use this example application to integrate with CloudBees Unify and test feature management. After integrating, observe changes in the application UI as you update flag values in CloudBees Unify.

In this example, the Rox SDK is already set up, and feature flags are implemented in the code.

Get started with the React project

To get started with the react-fm-example project, follow these steps:

Clone the example repository to your local machine:

git clone git@github.com:cloudbees-io/react-fm-example.git▼

Open the project in your IDE (for example, Visual Studio Code, WebStorm, or IntelliJ IDEA).

Locate and copy the SDK key:

Navigate to Feature management Flags.
Select an application.

Select next to the SDK key on the page.

If no SDK key is available:

Navigate to Feature management Flags.
Select on the upper-right.
Follow the installation steps. The SDK key appears once an application is linked to an environment.
Close the installation instructions and copy the SDK key.

Add the SDK key to the application:

Open the file:
```
src/feature-management/FeatureFlagsProvider.tsx▼
```
Locate the SDK key placeholder and replace it with your environment-specific SDK key. For example:
```
const sdkKey = "<YOUR-SDK-KEY>";▼
```
Save the updated file.
Run the example application using your preferred package manager.
YARN
```
yarn install
yarn dev▼
```
NPM
```
npm install
npm run dev▼
```
After the application starts, open the URL displayed in the terminal in your browser to view the running application.

Once your application is running, return to the SDK installation panel in CloudBees Unify UI and select Test integration to verify a successful setup.

View the imported flags

Now that your application is running:

In CloudBees Unify, select Feature management.
Select your example application to display the available flags as shown in the table below.

Table 1. Feature flags in the example application
Flag name	Flag type	Description
showMessage	Boolean	Turns the message on or off.
message	String	Sets the message text.
fontSize	Number	Sets the font size in pixels. Values: `12`, `16`, or `24`.
fontColor	String	Sets the message font color. Values: `red`, `green`, or `blue`.

If no flags are displayed, verify that the environment-specific SDK key is correctly added in src/feature-management/FeatureFlagsProvider.tsx. Save the file, and restart the application.

Update flag values in CloudBees Unify UI

To update flags in CloudBees Unify UI:

Select Feature management.
Select the application.
Select next to the flag you want to configure.
Select Configure.
Select the Environment associated with your SDK key.
Update the flag value and save your changes.
Set the Configuration status to On.

The updated flag value is reflected in the application display shortly.

Documentation reference

For SDK installation instructions, refer to: JavaScript SDK installation.
For more information about using Feature Management, refer to: Configure feature flags.