This time we take a look at how to set up your project using the Appknobs console. This web application allows you to create new users, register your applications, set features and define the conditions when these features will be visible in your app.
Not sure how feature flags can help you? Read our quick introduction!
After reading this tutorial, you'll understand the core concepts such as Features, Conditions and Payload. Then you'll be ready to start implementing feature flags using our React library and client package.
We'll explain how to
- Create a new user
- Register your application
- Grab your API key
- Add a managed feature (so you can decide when it is visible)
- Define the specific conditions for the feature
TIP: You can do steps 1 to 4 using our CLI tool if you prefer.
Registering a new user
This one couldn't be simpler: head over to https://console.appknobs.io/register, type your email and a strong password - that's it, your in! Nice 👏
Create an application
Appknobs allows you to work with multiple applications, either independent ones or different versions of the same offering, e.g. a website and a mobile app. All feature flags live under a specific app.
You have no apps defined by default, so let's remedy that: on https://console.appknobs.io/project click "Add app manually":
Enter a name like
My First App and save.
Each application is assigned an
appId that you will reference in the client implementation. Grab it by clicking "Copy appId".
The other piece of information you'll need is your API key, so let's find it now.
Grab your API key
Hop over to https://console.appknobs.io/apikey and click "Copy API key".
Add a managed feature
It's time to define your first managed feature!
Features are sections or behaviours of your application that you'd like to hide from some users but reveal to others, without having the decision in your codebase. These toggles are usually short-lived and allow you to deploy and evaluate changes and get feedback on them without making it available to all your customers. Without the need for dedicated environments, you can release new sections behind a managed feature flag and then open them up without code changes to select users: developers, testers, stakeholders, select clients - or everyone.
First, visit https://console.appknobs.io/project then click "Edit Features" under the application you have just created.
Since you haven't defined any feature flags, you'll see instructions on how to add them using the Appknobs CLI.
For now, let's focus on the Web Console. Click on "Add feature manually" button and enter a name like
My First Feature:
Click save, so you get the list of feature flags assigned to the particular application - a single one yet.
The state of a toggle in any application instance is determined by the conditions you set on the Console. By default, features are turned off: without conditions, they are
false (turned off) for everyone, every time. So let's add a simple one to your first feature.
By the way, an application instance is a user session: a visitor using your website or an install of your mobile app.
Define the conditions
Let's continue on the Feature page. To assign conditions to the feature, click "Edit conditions".
You have no conditions set yet, so let's click "Add condition":
A simple condition definition form is displayed next:
Let's understand what we're dealing with here.
Each condition you define will look at this same payload and then
- Read the value of a given property from the payload - as defined in the property field
- Read the value you set in the argument field
- Compare the two values using the selected predicate
As an example, let's define the following condition:
Once you're happy, click save.
Features in action
With the above setup, your
My First Feature will be displayed in your app if the email in your payload ends with
And that's it! You've defined your first feature toggle, and you're ready to implement feature switching using our React library and client package.
Looking at the implementation code examples is a great way to start coding!