0

We have a react projects that are deployed in azure using azure devops. Recently, we are planning to implement a new concept into our existing react projects. As, it will take almost 3 months to complete the concept, we want to implement some flagging opportunity so that our code can be integrated with production code base but will not be available to customer for use.We will also have some A/B testing with one of our pilot customer when the MVP is done. So, in that case, what would be best way of enabling some feature flag into our projects. Does anybody have thoughts about that. Any ideas will be highly appreciated.

saon
  • 591
  • 1
  • 7
  • 19
  • Without knowing anything about your project structure: I'm assuming your projects are connected to some sort of database. 1) Have a database table or equivalent to store accounts. 2) Have a database table or equivalent to store users. 3) Create an entry in the two above tables for each customer account and user, and also another account for internal (employee) usage. 4) Create a features table or equivalent for the features you want. 5) Conditionally gate access to features based on those in the database for the account. 6) Create a UI so only employees can grant features to accounts. – jnchaba Apr 29 '22 at 00:58

1 Answers1

0

Due to the scale of the concept you’d like to implement, I’d suggest using a Feature Flag tool that supports React, such as Flagsmith or DevCycle. A lot of solutions allow you to integrate your code into production while hiding them from customer use until you’re ready.

For example, one way to implement a Feature Flag is with DevCycle's React SDK. You can install the sdk by running the following command:

npm install --save @devcycle/devcycle-react-sdk

You can then implement a feature flag on your code, which would look something like this:

import { useVariable } from '@devcycle/devcycle-react-sdk'

const App = () => {
    const variableKey = 'show-new-feature'
    const defaultValue = 'false'
    const featureVariable = useVariable(variableKey, defaultValue)

    return (
        <div>
           { featureVariable ? <div>Flag on!</div> : <div>Flag off</div>
        </div>
    )
}

'show-new-feature' in the code above is a variable created on devcycle.com. It's referenced in the code so you can toggle the flag remotely from the Feature Management Dashboard on DevCycle.

As for A/B testing, you can use a feature management tool for that as well. You can give different sets of users distinct variations of your feature by choosing who receives an enabled flag and who receives a disabled flag. DevCycle has documentation about its experimentation capabilities here.

Sandrine Adap
  • 9
  • 3