Hey all you wonderful developers out there! In this post I am going to take you through creating a feature branch and using the Harness React SDK to implement a flag in your project. This post is an introduction to getting a feature setup using Vite, React, and Sass to change the look of a logo in a navbar.

Project Setup

The world of web and software development changes every day. It is hard to keep up with, we all know that. The days of using Create React App seem to be over. In its place has stepped Vite. You can head over to the Vite site and see what it is all about, but if I had to put a description on it, it would be; CRA with superpowers. Extremely fast installs, and load times make it a great tool to start your project with. You can also choose what language you want to use when prompted in the terminal.

We are going to install Vite as the base setup for our project. Fire up your terminal and install Vite using this command:

If you are using Yarn, use this command:

You can manually install Vite with the framework of your choice or you can select the prompts in the terminal.

Great, now that we have that setup, go back to your terminal, change directories into my-project and fire up your editor of choice. If VS Code is in your PATH, you can type code . and that should open it. Open your terminal back up and run:

npm install
npm run dev

This will install all your dependencies and fire up your server which should be `localhost:5173`. The rest of this article is going to assume you have installed the Harness React SDK. If not, there will be a follow up post to this on installing and implementing that specific SDK. Stay tuned for that!

Component Wrapping

‍
In this example, I created a very basic navbar using semantic markup and jsx. There is a logo that is left aligned, and a navigation that is right aligned using flexbox. Please keep in mind that this navigation I built is a desktop view only and is not using any type of routing. The “links” are list items within an unordered list. It is up to you the developer how you approach the routing for your component/application. YMMV.

The feature we want to ship changes the look of the logo. In the example we are only going to be wrapping the logo component in a flag, and making sure to put that in a feature branch so we can immediately keep it disabled/hidden, while merging it back into the main branch. We can always verify that the feature works by switching to our feature branch and toggling the feature on/off in the Harness app.

import { useFeatureFlag, useFeatureFlags } from "@harnessio/ff-react-client-sdk";

const Logo = () => {
 const isEnabled  = useFeatureFlag("awesomelogoheadergradient");
 const FeatureFlags = useFeatureFlags();
 console.log(FeatureFlags);
 if (isEnabled) {
   return (
     

       YourLogo
     
   );
 }
 return 
YourLogo
;
};

export default Logo;

We are going to use CSS to control the feature. I am using Sass for this, you can use vanilla CSS. Create a feature branch according to your branch naming convention. I like to stick with lastname/whatever-the-feature-is.

Once your branch is created, add the CSS to change the look of the component and then add the class to the component itself.

.logo-title.gradient {
	background: linear-gradient(0deg, rgba(121,238,3,1) 0%, rgba(0,231,255,1) 65%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 5px 0;
}

Markup

You can validate this works on save if you flip the switch in the Harness UI and enable the flag. This post is going to assume you have the flag setup in the Harness UI already and can navigate the interface. If the feature is doing what you expect when you toggle the flag on, you have successfully created a feature branch with a feature flag. Now you can merge this into main and keep it disabled as to not release it until you are ready. You also have the option of continuing to work on said feature if you choose, just open another branch.

‍

LGTM!

Everything works as expected, tests pass, the PR has been reviewed and approved, now let’s get this merged. Make sure you stick to your merging process. I personally like to squash and merge my branch but your mileage may vary. Now that we have our code with the feature in main and it is still hidden behind a flag, no one can see it until you flip the switch or someone in charge of the release flips the switch.

The great thing about using feature flags is that you can designate a target(s) in order to test the feature. This is especially useful when having someone QA the feature. Another great thing about using feature flags is separating deploy from release. The code can be deployed 100% to production and until the flag is toggled, it will stay hidden. Once you and your team are ready to release it to the world, flip the switch and voila, your feature is live!

‍