Manage feature flags for free with FeatureHub — practical guide

1. Installation

It is easy to install FeatureHub as it is built as a Docker container and here is the simplest way to install:

1. First of all you need to grab the latest version of FeatureHub tagged release, e.g.

curl -sL https://github.com/featurehub-io/featurehub-install/tarball/main/docker-compose-options | tar -xvz

2. Make sure you have your docker running. There are multiple installation options available for FeatureHub. You can find more info on it here.

I will choose “all-separate-postgres” option to demonstrate in this article and I will use Postgres db which comes together with this docker option. However, I recommend in real life to connect to your own db.

In a nutshell “all-separate-postgres” option is suitable for “low volume deployment”. Our load test showed that it can handle at least 3000 connections with 30–50ms response times.

To install this option, run the following commands:

cd docker-compose-options/all-separate-postgres
docker compose up

This will install all the necessary components including FeatureHub Admin Console. You can now load it on http://localhost:8085/#/

FeatureHub Setup

3. Fill in the initial setup fields, enter some details, like organisation and portfolio (department) name and you should be ready to go. You will be the Super Admin of FeatureHub with all the permissions to invite other users, create portfolios, applications, environments and so on. You can also switch to dark mode.

Applications setup progress

Once you are registered, you can use “Application setup progress” helper to guide you through the setup.

Note, you will have one “team group” created by default — this is your portfolio admin group which has privileges to create and modify users, applications and features in the given portfolio.

2. Add your application to FeatureHub

Let’s assume we have a sample React app with a simple functionality to display a list of to-do’s and an ability to add a to-do item with an “Add” button. Below I will describe how to implement features in your code using the sample ToDo app (React js) and FeatureHub Javascript/Typescript SDK.

1. Let’s give a name and a description to our React sample app:

FeatureHub — Create Application

Note, once you create an application — there will be one environment created by default called “production”. You can rename it at any time.

2. Create a service account, you will need it later for your sample application to connect to your FeatureHub instance.

FeatureHub — Create Service Account

3. Give access to your service account so the application has permission to read feature values. In production we recommend to only have READ permissions to protect your app.

FeatureHub Service Account permissions

4. Time to setup a feature! Go to the Features page and setup your first feature. For example, let’s create a feature of type String with the following key:

SUBMIT_COLOR_BUTTON

We will use this feature to toggle a colour of the “Add” button in our sample Todo app. For example, we can set it to “red”, “blue”, “green” etc..

FeatureHub — Create Feature

Switch to the Feature Values tab and find your new feature

3. Implement feature flag in the code

1. Go to the Service Accounts tab and copy the Server eval key, you will need to use it in your code (see next steps).

FeatureHub — Copy SDK Url

2. Add the following dependency to your package.json file

"featurehub-javascript-client-sdk": "^1.0.8"

3. Do the imports into your App.tsx file:

4. Create a function to initialize FeatureHub:

async initializeFeatureHub() {}

and add all the below methods to it:

• initialise FeatureHub config, pass FeatureHub edge server URL and Server eval API Key from step 1

Note, the port number of the edge server will depend on which FeatureHub installation you are running. In this case because we are running “all-separate-postgres” option — it will default to 8553.

• create FeatureHub client
• check if the repository is ready for us to call the feature states. As soon as it is ready we can set the current state for our feature:

Note that API key is always per an environment which allows you to easily parametrise your config and use it with the CI/CD pipelines where you separate your environment config from the app code.

• Finally let’s react to the feature flag updates. Note, we are using the listener that will send updates immediately to your web page.

Add the following to initializeFeatureHub() method:

Now let’s see it in action, everything is connected and ready to roll. Watch how the colour of the “Add” button gets updated in real-time while you change the feature value.

FeatureHub in Action

For the full Typescript/React example please visit this repo.

If you would like to contribute or check our main FeatureHub Git repository please visit here.

For the docs please visit FeatureHub Docs page.

Conclusion

FeatureHub platform is easy to install, configure and use with your apps. We made sure that FeatureHub caters for the needs of developers, testers, business users and anyone who would like to have visibility on the product features developed by engineering teams. The cloud-native aspect also makes it easy to host and scale FeatureHub in any cloud or on-premise and run it with Docker and Kubernetes. If you are looking for an open-source feature management software for your agile or DevOps team, give FeatureHub a go.

Read more articles about FeatureHub

Test automation with feature flags

Client-side feature flags with React, FeatureHub and Catch & Release mode

Introducing percentage split in version 1.0

Introducing targeting rules support in version 1.1