How to

How to Integrate Feature Flags in React Applications Using Flagsmith

Feature flags are an essential tool, helping to streamline the build and release of software updates. You can use them to target a specific group of users or your entire user base.


Essentially, they let you introduce significant changes, without disrupting the workflow of your production application, in real-time and on demand. You can do this by using feature toggles as an alternative to extensive code modifications and deployments.


Feature Flags: Implementation and Benefits Explained

Software development is, without doubt, a continuous and iterative process. Unless everyone abandons a project, someone will keep developing it, introducing new changes.

Ideally, CI/CD pipelines let you push consistent code changes to production. Nonetheless, these processes come at the cost of requiring substantial deployment effort.

However, using feature flags, you can release an update to some or all of your user base just by toggling a setting.

There are several situations where feature flags are applicable, including:

  • When you want to test a new idea before rolling it out to all users. By doing so, you can easily and quickly collect feedback on performance and its user impact.
  • When you want to roll out essential emergency updates and hotfixes. If disaster strikes, you can quickly disable problematic features and roll out fixes without redeploying the entire application.
  • When providing personalized user experiences by enabling or disabling specific features based on user attributes, preferences, or subscription packages.

Getting Started With Flagsmith

Flagsmith provides a great solution for feature flags, including an open-source version and a cloud service. This guide will use its cloud solution to integrate feature flags in a React application.

To get started:

  1. Head over to Flagsmith’s cloud service, sign up for an account, and log in to your account’s Overview page.
    Flagsmith Homepage on the official website

  2. On the overview page, click on the Create Project button to set up a new Flagsmith project. Flagsmith will automatically create both the development and production environments on your Project Settings page. For this tutorial, you’ll use the development environment to implement the feature flags.
    A pop up modal on Flagsmith's cloud service that allows the creating of a new Flagsmith project

  3. Make sure you are in the Development environment, select the Features tab, and click the Create your first Feature button.
    Flagsmith's project settings overview page

  4. Provide an ID for the feature you wish to flag, preferably a string, click the toggle button to Enable by default feature option, and hit Create Feature. In this case, you’ll implement a feature flag on the rating of different E-commerce products.
     Flagsmith cloud service new feature form window pane

  5. You can view and manage the newly created feature by navigating to the features settings overview page.
    Product rating feature flag on the features tab.

Now, to complete the setup, you need the client-side environment key.

Generate the Client-Side Environment Key

To obtain the client-side environment key:

  1. Click on the Settings tab under the Development environment.
    Development environment settings tab on the left menu pane on Flagsmith cloud service

  2. On the development environment settings page, click the Keys tab.
    Development Environment Settings Page

  3. Copy the provided client-side environment key.

You can find this project’s code in its GitHub repository.

Create the React Project

Now, go ahead, and scaffold a React project using the create-react-app command. Alternatively, you can use Vite to set up a basic React project. Please note that this guide will use Vite to create the React application.

Next, install Flagsmith’s SDK in your project. This SDK is compatible with various JavaScript frameworks.

 npm install flagsmith 

Now, create a .env file in the root directory of your project folder and add the client-side environment key as follows:

 VITE_REACT_APP_FLAGSMITH_ENVIRONMENT_ID="<your-key-goes-here>" 

Add a Product List Functional Component

To test out Flagsmith’s feature flags capabilities, you’ll build a simple component that will render a list of e-commerce products from a DummyJSON API.

Each product in the list comes with various attributes, such as title, price, product description, and an overall product rating. The intention is to apply the feature flag to the product rating value. Once you’ve implemented the flag, you’ll be able to control the feature by toggling a button on Flagsmith’s cloud service.

In the src directory, create a new folder and name it, components. Inside this folder add a new Products.jsx and include the following code.

First, make the following imports:

 import "./style.component.css";
import React, { useState, useEffect } from "react";
import flagsmith from 'flagsmith';

Next, create the functional component, define the initial state variables, and add the JSX elements.

 export default function Products() {
  const [products, setProducts] = useState([]);
  const [showProductRating, setShowProductRating] = useState(false);
  const environmentID = import.meta.env.VITE_REACT_APP_FLAGSMITH_ENVIRONMENT_ID;
 
  return (
    <>
      <div className="product-catalogue">
        <div className="product-list">
        </div>
      </div>
    </>
  );
}

Now, define a useEffect hook that will make HTTP requests to the dummy JSON API to fetch the products’ data. You can use the Fetch API or Axios to consume the API.

Within the functional component, add the code below:

 useEffect(() => {
    const fetchProducts = async () => {
        await fetch("https://dummyjson.com/products")
          .then((res) => res.json())
          .then((json) => setProducts(json.products));
        }
    fetchProducts();
  }, []);

The fetchProducts function will run once the component mounts. It fetches the products’ data and subsequently updates the state of the products variable.

Finally, you can map through the array of products and render them on the browser.

Right below the product-list class div, include the following code:

 { products.slice(0,6).map((product) => (
    <div className="product" key={product.id}>
        <h2>{product.title}</h2>
        <p>Price: ${product.price}</p>
        <p>{product.description}</p>

        <h3>Rating: {product.rating}</h3>
    </div>
))}

With that, you can comfortably fetch and display a list of product items from the dummy JSON API.

Integrate Flagsmith’s SDK

To integrate and initialize Flagsmith’s SDK in the React application, right below the fetchProducts function call inside the useEffect hook, add the code below.

 flagsmith.init({
    environmentID:environmentID,
    cacheFlags: true,
    enableAnalytics: true,
    onChange: (oldFlags, params) => {
        setShowProductRating(flagsmith.hasFeature('product_rating'));
    }
});

By including this function, you enable feature flag management with caching and analytics in the React app.

The function utilizes a callback to dynamically manage how it displays product ratings based on the state of the product_rating feature flag. This should be either true (enabled), when toggled on in the cloud service, or false (disabled) when toggled off.

Finally, update the product rating h3 element in the return code block with this statement.

   {showProductRating && <h3> Rating: {product.rating}</h3>} 

With this update, once you toggle on the feature, it updates the showProductRating variable to true. As a result, the product rating will appear alongside the other attributes. However, if you toggle the feature off, the showProductRating variable will be false, and the product rating will not appear.

Lastly, update the App.jsx file to import the product component.

 import "./App.css";
import Products from "./components/Products";

function App() {
  return (
    <div className="App">
      <div className="App-header">
        <h1>Product Catalogue</h1>
        <Products />
      </div>
    </div>
  );
}

export default App;

Finally, run your application, and head over to your browser to view the application.

 npm run dev 

To test this feature, go back to your Feature’s Settings page on Flagsmith, and toggle off the product rating feature.

Flagsmith's Feature Toggle Button Pop Up Window with a confirmation message to toggle off a feature flag.

Since the application is running on localhost, reload it in the browser to view the updated changes. The product rating which was initially present will disappear. If you toggle the feature back on and reload the page again, it will reappear.

Feature Releases Shouldn’t Be a Hassle Anymore

Feature flags have become a game-changer tool for managing feature releases in applications. They seamlessly integrate into the development workflow, minimizing risks associated with rolling out new updates.

They’re also powerful, giving everyone—even end users—the power to enable or disable features without diving into complex code.

Leave a Reply

Your email address will not be published. Required fields are marked *