2 Minute Use Cases: Unlocking Early Access with Feature Flags

2 Minute Use Cases: Unlocking Early Access with Feature Flags

Feature flags are not just feature toggles that allow you to toggle on and off a feature for all your users. They can also be incredibly useful for providing early access to a feature for specific users or groups, such as a Product Manager, beta user, or any other member of your team or user base.

With DevCycle, you can turn on a new feature for a specific group of users, granting them early access. This way, you can showcase your progress to a fellow developer or product manager, or gather feedback from beta users who are using the feature in production. This also enables you to receive notifications about any bugs or performance issues the feature might introduce.

To demonstrate this "Early Access" use case, we'll use a Next.js application because it's a straightforward way to showcase this functionality in a front-end React application.

Step 1: Setup the Demo App

‍Start by following the instructions provided in the README at https://github.com/devcyclehq/devcycle-use-cases.

In this early access example, our focus will be on a new Profile page and related menu item that has been added to the application.

Step 2: Create the Feature on DevCycle

‍You'll first create a new Release flag in DevCycle called profile-page and turn it on for yourself. Find step-by-step instructions to create your first feature flag in the DevCycle Docs.

Step 3: Update our Next.js App Code

Update: DevCycle now has a native SDK for Next.js. Check out the docs

‍With the setup done in DevCycle, let's see how we have integrated this feature flag into the menu of our Next.js app. This will reveal the Profile menu item and allow the logged-in user to navigate to the profile page if they have this feature flag enabled.

Below are the steps that we followed to implement this use-case in our sample Next.js app:

1. Create showProfilePage with the default of false.

2. Then I need to identify the dvcuser with the user from auth0. In this case I do it within a useEffect so that when the user object is updated I can run identifyUser.const dvcClient = useDVCClient().

3. Add the menu item if this user has this value set to true.

Step 4: Testing the Feature Flag

‍The feature flag is created to target only emails with @devcycle.com with variation on. If you log out, you won’t see it. However, after logging in as 'developer', you will see it.

If you log out and log back in as a beta user, you won’t see the feature. But if you add a new targeting rule in the DevCycle dashboard and return to the demo app, the beta users can now see the Profile menu item.

You can finally release this feature to everyone by setting the variation for All Users to "On". After doing so, any user, such as [email protected], should be able to see the feature.

Wrapping Up

‍Using a feature toggle barely scratches the surface of the power of feature flags. Enabling a feature for specific users allows you to showcase your work, receive feedback, and test performance, thus taking your development workflow to the next level. Ready to level up your development workflow? Start using feature flags with DevCycle today.

‍