Unleash React - Create the App

This post is part of a series on adding feature flagging to a React application using Unleash.

Unleash React - What is Feature Flagging?
Feature flags are a powerful tool in the developer’s toolbox. Instead of releasing code in large features and risky deployment operations, new features can be developing incrementally and turned on and off in production by toggling a flag, selecting certain users, or other similar strategies. This m…

In this post, we're going to create the React application and hide a feature behind a feature flag.


To get started, we need a sample application. Any React app will do, but we'll just use the .NET5 template for React. Make sure you have the .NET5 SDK installed.

dotnet new react -o unleash-react
cd unleash-react
dotnet run
Initialize a sample React app

After it starts, go to https://localhost:5001 and see the React app running.

At the top-right is a navigation link to Fetch data that exercises the sample Weather controller in the template. We're going to hide that behind a feature flag.


We need to make a couple of changes to our application to use the feature flag. Press Ctrl+C to stop the server.

First, we need to disable https redirection in Startup.cs because the Unleash proxy is not running behind https and we can't mix secure and insecure calls in the browser.

//app.UseHttpsRedirection();
On line 47 of Startup.cs, comment out the default https redirection

Next, we need to install the unleash-proxy-client package from npm.

cd ClientApp
npm install unleash-proxy-client --save
Install the client npm package

Now we can add the code to use the feature flag. We'll start by creating a React component call Unleash and initialize it with the connection to our Unleash Proxy.

cd ClientApp/src
touch Unleash.js
Initialize an empty Unleash.js file

Save the below javascript code to Unleash.js. Change 'some-secret' if you changed it when configuring the Unleash Proxy.

import { UnleashClient } from 'unleash-proxy-client';

const unleash = new UnleashClient({
    url: 'http://[docker_host_ip_address]:3000/proxy',
    clientKey: 'some-secret',
    appName: 'unleash-react',
  });

unleash.start();

export default unleash;
Create the React component

Now that the unleash component is available for use, we'll add it to the src/components/NavMenu.js file to hide the Fetch data link unless the feature flag is enabled.

import unleash from '../Unleash';
Import the component
this.state = {
  collapsed: true,
  showWeather: false
};
Add a state variable for showWeather
unleash.on('update', () => {
  this.setState({
    showWeather: unleash.isEnabled('weather')
  });
});
Update the showWeather variable when the feature flag is updated
{this.state.showWeather && 
  <NavItem>
    <NavLink tag={Link} className="text-dark" to="/fetch-data">Fetch data</NavLink>
  </NavItem>
}
Make the Fetch data link conditional on the showWeather variable

Now execute dotnet run again from the root project folder and navigate to http://localhost:5000.

You should not see the Fetch data link appear (unless you already enabled the weather feature toggle).

Go to the Unleash Server web UI and toggle the feature flag. Now wait for the proxy refresh interval to pass and the Fetch data link should show according to the toggle state.


There you have it! You just enabled feature flags in your React application. Start releasing code more often and rolling out features more safely!

I suggest you go read about the various activation strategies that Unleash supports and get creative.

You may also want to get creative with how you use the flags in your app.

I hope you have enjoyed this series. Happy developing!