Example React application for CloudBees platform feature management

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

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 application

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 the platform UI and select Test integration to verify a successful setup.

View the imported flags

Now that your application is running:

In CloudBees platform, 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 the platform UI

To update flags in the platform 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.

Use the application with multiple SDK keys

Run multiple instances of the SDK in a single application, each with its own SDK key and environment. Each instance is fully isolated. Use multiple instances when you need to:

Read or compare flags across environments without redeploying.
Support multi-tenant routing with separate environments.
Combine server-side and client-side evaluations in one application.

To use multiple SDK keys in the example .NET Core application, follow these steps:

Retrieve the SDK keys for the environments you plan to use.
Initialize a separate SDK instance for each key.
Implement a routing strategy so your application knows which instance to use (for example, routing by tenant, region, or environment).
Register, fetch, and stream configurations for each instance as required by the SDK.
Evaluate flags using the appropriate instance, passing a consistent user or context object for accurate targeting.
Tag logs or metrics by instance, and shut down any instances you no longer need.

Documentation reference

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