Introduction
Understanding organizationsUnderstanding componentsManage organizationsManage componentsManage component Jira integrations
Set up your first organizationUnderstanding users and teamsUnderstanding role-based access controlManage usersManage teamsConfigure role-based access controlRBAC permissions reference
Understanding authentication in CloudBees UnifySet up multifactor authenticationConfigure SAML single sign-onConfigure OIDC authenticationConfigure network security policiesNetwork security reference
Understanding platform configurationUnderstanding environmentsManage properties and secretsManage environmentsTrack environment inventoryConfigure containersSet up preconfigured actionsConfigure notifications
Accessibility policy referenceShared responsibility model referenceSubscription and services agreementSupport policiesSupported browsers and external tools
Introduction
Understanding feature managementUnderstanding Configuration as CodeGet started with feature managementCreate and manage feature flagsConfigure feature flag targetingOrganize feature flagsImplement feature flag governanceConfiguration as Code reference
Understanding flag impressions and activity statusUnderstanding flag healthUnderstanding code referencesReview and clean up feature flagsSet up code references
Understanding Jira integration for feature flagsSet up the Jira integrationLink Jira tickets to feature flags
Understanding multiple SDK keysBuild your first mobile app with feature flagsBuild your first feature-flagged web applicationBuild your first feature-flagged backend serviceInstall client-side SDKsInstall server-side SDKsConfigure multiple SDK keysMobile SDK referenceWeb SDK referenceBackend SDK referenceClient SDK referenceFlag implementation reference
Introduction
Understanding CI workflowsCreate a build workflowCreate and manage workflowsCreate reusable workflowsTest and validate containers in workflowsCheck out source codeTrigger workflows remotelyWorkflow syntax referenceJobs syntax referenceSteps syntax referenceServices syntax reference
Monitor workflow runsView test results in runsView evidence in runsView deployments in runsManage workflow artifactsPublish test resultsPublish evidence itemsGenerate a software bill of materialsManage ServiceNow change requests
Configure workflow credentialsConfigure AWS credentialsConfigure container registry credentialsConfigure Git credentialsIntegrate external secret providers
Understanding GitHub Actions integrationSet up GitHub Actions integrationDisplay GitHub Actions workflows and runsRegister GHA build artifactsPublish GHA deployed artifactsPublish GHA test resultsPublish GHA evidence itemsTrigger CloudBees workflows from GitHub ActionsScan with GitHub Actions
Understanding CloudBees CI and Jenkins® integrationConnect CI and Jenkins controllersMonitor CI and Jenkins buildsRegister CI build artifactsRegister CI deployed artifactsPublish CI test resultsConfigure CI security scanningCI and Jenkins integration reference
Build and publish container imagesUnderstanding external CI/CD integrationsRun external CI/CD jobsExternal CI/CD action reference
Introduction
Understanding release orchestrationManage applicationsCreate deployer workflowsCreate staged workflowsCreate and manage releasesOrchestrate multi-workflow releasesRelease management reference
Understanding artifact managementRegister and track artifactsStore and retrieve artifactsPromote artifactsGenerate a software bill of materialsArtifact management reference
Deploy with HelmDeploy to KubernetesContainer deployment reference
Deploy to AWSAWS deployment reference
Deploy with enterprise platformsExecute remote deployment commandsEnterprise deployment reference
Verify deployments with New RelicDeployment verification reference

Build your first feature-flagged web application

4 minute read

In this tutorial we will build a working web application that connects to CloudBees Unify Feature Management and demonstrates how feature flags control UI elements in real-time. Along the way we will encounter SDK integration, the CloudBees Unify Feature Management interface, and different types of feature flags working together.

By the end, you will have a running application that responds immediately to feature flag changes and experience with the core workflow of feature-driven development.

Before we begin

Before we begin, ensure you have:

  • Completed Get started with feature management.

  • Node.js and npm installed on your local machine.

  • Git installed for cloning repositories.

  • A code editor such as VS Code or WebStorm.

Choose and set up your web application framework

We will start by setting up a pre-built example application that already has feature flag integration configured. You can choose between an Angular or React application: both demonstrate the same feature flag concepts.

  1. Choose your preferred framework and clone the corresponding repository:

    Angular application
    git clone https://github.com/cloudbees-io/angular-fm-example.git
cd angular-fm-example
    ▼
    React application
    git clone https://github.com/cloudbees-io/react-fm-example.git
cd react-fm-example
    ▼

  2. Open the project in your code editor. You will see a typical web application structure with components, configuration files, and build scripts.

Notice that the CloudBees Unify SDK is already integrated into the project structure. This means we can focus on seeing feature flags in action rather than configuring the integration from scratch.

Connect your application to CloudBees Unify Feature Management

Now we need to connect our local application to your CloudBees Unify Feature Management environment using an SDK key. The SDK key tells the application which feature flag configuration to use.

  1. Navigate to Feature management  Flags in CloudBees Unify.

  2. Select your application from the list. If you don’t see an application, you may need to create one following the getting started tutorial.

  3. Select Copy next to the SDK key to copy it to your clipboard. The SDK key is a long string that uniquely identifies your feature management environment.

  4. Add the SDK key to your application configuration:

    Angular application

    Open the file src/app/app.component.ts and locate this line:

    sdkKey = "<Your CloudBees SDK key>";
    ▼

    Replace <Your CloudBees SDK key> with the SDK key you copied.

    React application

    Open the file src/feature-management/FeatureFlagsProvider.tsx and locate this line:

    const sdkKey = "<YOUR-SDK-KEY>";
    ▼

    Replace <YOUR-SDK-KEY> with the SDK key you copied.

  5. Save the file.

Your application is now configured to communicate with your CloudBees Unify Feature Management environment. The SDK will automatically connect and sync feature flag values when we start the application.

Run your application locally

Let’s start the development server and see our application running with its default configuration.

  1. Install the project dependencies:

    npm install
    ▼

    This will download all the libraries and tools needed to run the application.

  2. Start the development server:

    Angular application
    ng serve
    ▼
    React application
    npm run dev
    ▼

  3. Open your web browser and navigate to the URL shown in the terminal output. For Angular this is typically http://localhost:4200, for React it varies but will be displayed clearly.

You will see the example application running with a message displayed on the page. Notice the current message content, size, and color - we are about to take control of all these properties using feature flags.

Verify the feature flag connection

Now that our application is running and connected to CloudBees Unify, let’s confirm that the feature flags have been automatically imported and are ready for configuration.

  1. Return to CloudBees Unify and navigate to Feature management  Flags.

  2. Select your application. You should now see four feature flags that were automatically detected from your running application:

Table 1. Feature flags in the example application
Flag name Flag type Description

showMessage

Boolean

Turns the message display on or off completely.

message

String

Controls the text content of the message.

fontSize

Number

Sets the message font size in pixels (12, 16, or 24).

fontColor

String

Sets the message color (red, green, or blue).

Notice how each flag serves a different purpose and uses a different data type. This demonstrates how feature flags can control various aspects of application behavior beyond simple on/off switches.

If you don’t see these flags, the SDK connection may need a moment to establish. Refresh the page in CloudBees Unify and ensure your application is still running locally.

Control your application with feature flags

Now comes the exciting part: we will modify feature flag values in CloudBees Unify and watch our application change in real-time without any code deployments or application restarts.

  1. In CloudBees Unify, select Menu next to the showMessage flag.

  2. Select Configure.

  3. Select your environment from the list.

  4. Change the flag value from its current setting to the opposite (if it’s currently true, set it to false).

  5. Select Save.

  6. Set the Configuration status to On if it isn’t already.

  7. Return to your browser tab with the running application. Within a few seconds, you will see the message either appear or disappear completely.

Let’s try controlling the message appearance:

  1. Configure the message flag and change its value to "Hello from feature flags!".

  2. Configure the fontSize flag and set it to 24.

  3. Configure the fontColor flag and set it to blue.

  4. Save each change and set the configuration status to On.

Watch your application as you make each change. The message text, size, and color will update automatically without refreshing the browser or restarting the application.

This immediate feedback loop is what makes feature flags so powerful for both development and production use. You can safely test changes, roll them out gradually, or instantly revert if something goes wrong.

Conclusion

We have built a web application that responds to feature flags in real-time, giving us complete control over the user interface through the CloudBees Unify Feature Management console. Along the way we encountered SDK integration, automatic flag detection, and the immediate feedback loop that makes feature flags valuable for development teams.

You now have hands-on experience with how feature flags work in practice and a foundation for implementing them in your own applications.

From here, you might want to:

Related pages

Build your first mobile app with feature flags
Build your first feature-flagged backend service