Example React application for CloudBees platform feature management

Use this example application to integrate with the CloudBees platform and test out feature management. After integrating, watch the application display change in response to any updates you make to flag values in the platform.

In the example application, the ROX package is already set up, and feature flags are already coded in.

Integrate the example application with the platform

Your SDK key is a unique environment identifier. The SDK key is displayed in the SDK installation instructions in the platform UI. To successfully install the SDK, you must copy the SDK key for that environment into your application at the Rox setup call, save the file, and run the application.

To save your SDK key in the example application:

Go to Feature management Installation in the platform UI.
Select an environment (or create a new one).
Select the appropriate SDK.

Copy the environment-specific SDK key located within the Rox.setup call. Refer to the table below for the location of the SDK key placeholder in your chosen example app.

Table 1. Location of SDK key placeholders in example apps
Example app repository	File path	Line number	Line
angular-fm-example	src/app/app.component.ts	21	`sdkKey = '<YOUR-SDK-KEY>'`
django-fm-example	demo/fm_init.py	22	`sdk_key = '<YOUR-SDK-KEY>'`
dotnetCore-fm-example	Demo/Program.cs	34	`var sdkKey = "<YOUR-SDK-KEY>";`
gin-fm-example	main.go	25	`sdkKey := "<YOUR-SDK-KEY>"`
react-fm-example	src/feature-management/FeatureFlagsProvider.tsx	7	`const sdkKey = '<YOUR-SDK-KEY>'`
springboot-fm-example	src/main/resources/application.yaml	6	`key: "<YOUR-SDK-KEY>"`

In the example below, the SDK key is 1234abcd-ef56-78gh-90ij-klmnop123456.

Figure 1. JavaScript SDK installation UI with the SDK key highlighted.

Replace the example app placeholder (<YOUR-SDK-KEY>) with your copied key.
Save the file in the repository.

The SDK key is generated for your environment, and copied into the example application. To learn more, refer to the SDK installation instructions in the platform UI or in the documentation.

Run the application

After saving your SDK key in the example application, run the example application.

Choose a package manager and run the appropriate commands in the terminal.

For Yarn package manager:
```
yarn install
yarn dev▼
```
For NPM package manager:
```
npm install
npm run dev▼
```

Then go to the provided URL to display the running application.

After you have the example application running, select TEST INTEGRATION in Step 5 of the SDK installation in the platform UI to check if your integration is successful.

Use the platform to update flag values

Now that your application is running, go to your environment in Feature management to display the flags available in the example application:

Table 2. 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 (Int for Python)	Sets the message font size in pixels. The flag value has the following variations: `12`, `16`, or `24`.
`fontColor`	String	Sets the message font color. The flag value has the following variations: `red`, `green`, or `blue`.

Figure 2. Platform flag list after integrating with an example app.

If no flags are displayed, check that the environment-specific SDK key is correctly added to the example application.

To update flags in the platform UI:

Select Feature management from the left pane.
Select the next to the flag you want to configure.
Select Configure.
Select the same Environment you used when you copied the SDK key.
Update a flag value and save your changes.
Switch the Configuration status to On.

Figure 3. Updating a number flag value with configuration status on.

The updated flag value is soon reflected in the display of the application. For more information on setting flag values, refer to the flag configuration documentation.