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
- First we'll go through how you will apply a few lines of code to conditionally show content in your app.
- Then we'll create the flags for the features in Nblocks Admin with conditions that should apply to it.
- If you haven't already, sign up for Nblocks and get access to your app id
- 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.
Here's an example of the anatomy of a evaluation response.
Now, let's integrate this into our app!
Example code
- ReactJS
- NextJS
Imagine you have a component that looks something like this:
// 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>
// We just want to render this for premium customers
<span>This is premium content</span>
// We just want to render this for beta customers
<a href="/beta">Button to beta feature</a>
To conditionally render these different elements we can create a simple component.
Name this component FeatureFlags
.
import { useEffect, useState } from 'react';
// The component takes the prop flag.
export default function FeatureFlag({ flag, children }) {
// Replace this with your own APP ID
const APP_ID = 'XXX';
// This will be our variable telling if the feature is enabled or and we should render the component children
// Initially this variable is false
const [enabled, setEnabled] = useState(false);
useEffect(() => {
// Evaluate the flag
const accessToken = window.localStorage.getItem('access_token');
if (accessToken) {
evaluate(accessToken);
}
}, []);
const evaluate = async (accessToken) => {
const result = await fetch(
`https://backendless.nblocks.cloud/flags/evaluate/${APP_ID}/${flag}`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
accessToken,
}),
}
).then((res) => res.json());
setEnabled(result.enabled);
};
// Only if enabled should we render the component children
if (enabled) return children;
else return '';
}
Now we can use this component anywhere in your app to conditionally show content like pages or buttons in our React app. Like this, where the changes are highlighted:
<FeatureFlag flag="release-announcement">
<h1>We're currently doing a release and will be back soon</h1>
</FeatureFlag>
<FeatureFlag flag="premium">
<span>This is premium content</span>
</FeatureFlag>
<FeatureFlag flag="beta-feature">
<a href="/beta">Button to beta feature</a>
</FeatureFlag>
Imagine you have a NextJS page component that contains elements like this:
// 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>
// We just want to render this for premium customers
<span>This is premium content</span>
// We just want to render this for beta customers
<a href="/beta">Button to beta feature</a>
To conditionally render these different elements we can create a simple component.
Name this component FeatureFlags
.
'use client'
import React, { useEffect, useState } from 'react';
// The component takes the prop flag.
export default function FeatureFlag({ flag, children}) {
// Replace this with your own APP ID
const APP_ID = 'XXX';
// This will be our variable telling if the feature is enabled or and we should render the component children
// Initially this variable is false
const [enabled, setEnabled] = useState(false);
useEffect(() => {
// Evaluate the flag
const accessToken = window.localStorage.getItem('access_token');
if (accessToken) {
evaluate(accessToken);
}
}, []);
const evaluate = async (accessToken) => {
const result = await fetch(
`https://backendless.nblocks.cloud/flags/evaluate/${APP_ID}/${flag}`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
accessToken,
}),
}
).then((res) => res.json());
setEnabled(result.enabled);
};
// Only if enabled should we render the component children
if (enabled) return children;
else return '';
}
Now we can use this component anywhere in your app to conditionally show content like pages or buttons in our app. Like this, where the changes are highlighted:
<FeatureFlag flag="release-announcement">
<h1>We're currently doing a release and will be back soon</h1>
</FeatureFlag>
<FeatureFlag flag="premium">
<span>This is premium content</span>
</FeatureFlag>
<FeatureFlag flag="beta-feature">
<a href="/beta">Button to beta feature</a>
</FeatureFlag>
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.
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.
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 "Enabled if match" 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.
Step 4. Activate the flag
Flags are inactive by default protect you from making misstakes. Click on the Inactive status and toggle it to Active and click save.
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?
You can send whatever context information you want to the evaluation api. But we've simplified it using a base structure so you can build groups in Nblocks Admin more easily.
The context object contains three areas, user
, org
and device
.
- Each one of them contains the property
key
. You can assign any value to this property. - You can also assign any values you want to the other properties.
- When building the group targets you can define is the value should be equal (
==
), contain, beginWith or endWith the value.
Structure of the body that can be sent to /flags/evaluate
{
context: {
user: {
key: "useThisAsYouWant",
id: "63d2ab029e23db0afb07a5a7",
role: "ADMIN",
name: "John Doe";
}
org: {
key: "useThisAsYouWant",
id: "63d2ab029e23db0afb07a5a7",
plan: "PREMIUM",
name: "My Workspace"
}
device: {
key: "iphone"
}
},
accessToken: "XXXXXX"
}
Providing the access token will automatically resolve all values for user
and org
so you don't have to. Read more in the API reference
Instead of making multiple requests for each flag you can evaluate all flags in bulk once for better performance. See the API reference