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!