Skip to main content

Quickstart Feature Flags

On this page you will integrate your web application with Nblocks Feature Flags. This allows you to conditionally give access to or show / hide features or content to your users.

Some use cases for feature flags are:

  • Restrict access to premium content that just users with a certain plan can access
  • Try beta features on a selection of customers
  • Show a message to all users during a scheduled release.
  • Protect a feature with Role based access controll (RBAC).

The content of this quickstart

  1. First we'll go through how you will apply a few lines of code to conditionally show content in your app.
  2. Then we'll create the flags for the features in Nblocks Admin with conditions that should apply to it.
Prerequisites
  1. If you haven't already, sign up for Nblocks and get access to your app id
  2. Completed the Quickstart since we'll be using the magic of access tokens in this quickstart

Integrating in your code

The integration essentially consists of requesting an evaluation of a flag by providing information about the current user and then handling the evaluation response. For the purpose of this quickstart we'll attach the user access token that will have Nblocks automatically resolve all the information that's necessary for evaluating a flag.

The evaluation endpoint URL consists of your app id and the flag key you wish to evaluate.

The url can look like this: https://backendless.nblocks.cloud/flags/evaluate/APP_ID/FLAG_KEY

And the response looks like this:

{
"enabled": true
}

Now, let's integrate this into our app!

Example code
  1. If you haven't already, install the Nblocks react plugin
npx @nebulr-group/nblocks-cli setup-react
  1. Add the NblocksProvider

Add the NblocksProvider to your top most component, e.g. the App component and wrap the rest of your app as children.

import { NblocksProvider } from '@nebulr-group/nblocks-react';

export default function App() {
return (
<NblocksProvider config={{ appId: 'XXX' /* Replace this with your own APP ID */ }}>
... App components ...
</NblocksProvider>
);
}
  1. Use the FeatureFlag Component

Imagine you have a component that looks something like this:

// We just want to render this for premium customers
<span>Premium content</span>

// We just want to render this for admins
<a href="/beta">Button to admin features</a>

// We just want to render this if we're doing a release
<h1>We're currently doing a release and will be back soon</h1>

Now you can use the FeatureFlagComponent from the plugin to conditionally show these components in your React app.

import { FeatureFlagComponent } from '@nebulr-group/nblocks-react';

<FeatureFlagComponent flagKey="premium-features">
<span>Premium content</span>
</FeatureFlagComponent>
<FeatureFlagComponent flagKey="admin-features">
<a href="/beta">Button to admin features</a>
</FeatureFlagComponent>
<FeatureFlagComponent flagKey="release-announcement">
<h1>We're currently doing a release and will be back soon</h1>
</FeatureFlagComponent>

Now when we have the flag names sorted out and integrated in the code we can go ahead and create them in Nblocks Admin.

Managing flags in Nblocks Admin

When signing up for Nblocks you also got access to Nblocks Admin where you can customize and make changes to your app configuration and access other features.

Go to Nblocks Admin and login.

In this part we'll be creating a feature flag that matches your flag ID in code and define who should have access to it

Step 1. Create flag

Click the flags tab and create a new flag. Call it "beta-feature" since this is the flag we expect to evaluate in our code.

Adding a flag

Now let's add conditions to this flag so it can be evaluated when the right user tries accessing it.

Step 2. Create group

With groups we can build reusable conditions that can be attached to our different feature flags. Think of this as you'd want to target an individual tenant, user or a group of roles. That's what groups are for.

Navigate to Feature flags and click the groups tab. Click add group and name it "beta-customer" and specify to match on "Workspace ID" using the operator "Equals" and choose one of the current tenants that has signed up for your app.

Adding a group

Step 3. Attach the group to the flag

Get back to the flags tab and click edit on the "beta-feature" flag we created earlier.

Add the "beta-customer" group and make sure that "Flag is active" is set to true. This means that the flag will be evaluated to enabled: true if any of the groups match on the current user.

Adding a flag

Testing it

We can now test this by logging into your app with the tenant we selected as target in the "beta-customer" group. You should see the content that was set with the flag beta-feature. Now you can try creating flags for the other elements.

That's it, your now done with this quickstart

Can I provide other information than access token?

Instead of providing the user's access token you can send your own user context information to the evaluation api.

We recommend you to send as much information as possible from start for a flexible experience without the need for re-releases while you add more flags and conditions.

We've simplified this by defining a base structure of what information to send so you can more easily build your groups and conditions in Nblocks Admin.

The context object contains three areas, user, tenant and device. Each one of them reflect different traits and holds predefined relevant properties that you can assign.

Additionally, there's a forth property custom which is a map that allows developers to include any additional custom key-value pairs. Each key in the custom object should be a string, and the corresponding value should also be a string.

Here's an example:

{
"user": {
"id": "63d2ab029e23db0afb07a5a7",
"role": "ADMIN",
"name": "John Doe",
"email": "john@doe.com",
"key": "custom-user-trait"
},
"tenant": {
"id": "66238feb99227400774266f5",
"plan": "PREMIUM",
"name": "My Workspace",
"key": "custom-customer-trait",
},
"device": {
"key": "iphone"
},
"custom": {
"property1": "value1",
"property2": "value2",
"property3": "value2",
}
}

This context object can be that can be sent to /flags/evaluate and /flags/bulkEvaluate.

tip

Providing the access token will automatically resolve all values for user and tenant so you don't have to. Read more in the API reference

tip

Instead of making multiple requests for each flag you can evaluate all flags in bulk once for better performance. See the API reference