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.
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.
Next, we need to install the
unleash-proxy-client package from
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.
Save the below
'some-secret' if you changed it when configuring the Unleash Proxy.
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.
dotnet run again from the root project folder and navigate to
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!