Unleash React - Create the App

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

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

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();

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

cd ClientApp
npm install unleash-proxy-client --save

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

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;

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';

this.state = {
  collapsed: true,
  showWeather: false
};

unleash.on('update', () => {
  this.setState({
    showWeather: unleash.isEnabled('weather')
  });
});

{this.state.showWeather && 
  <NavItem>
    <NavLink tag={Link} className="text-dark" to="/fetch-data">Fetch data</NavLink>
  </NavItem>
}

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!