We are a venture backed construction robotics company building robotics and automation solutions for the world’s most ubiquitous building material: reinforced concrete

Toggle

Often, developers create technical solutions using whatever is available to get the functionality up and running. Especially when it is necessary to test some product hypothesis and it doesn't make much sence to spend a lot of time and resources on it. After the hypothesis is confirmed, an even more interesting time begins - the search for tradeoffs: you need to release features quickly, adapting to the users number growth. It is very handy to be able to change the behavior of the service at any time without restarting the servers, or to turn off a broken functionality or to conduct AB-testing. To do this, developers usually use . If your startup has not a giant, but a small group of enthusiasts - you will have to solve this problem using available tools. In this article, I will show you a simple way of how to implement Feature Toggle using a shared SQL database. Feature Toggles Description of a typical system No matter how much effort is put into the development of fault-tolerant self-sustainable systems, manual interventions are inevitable: fixing data inconsistencies, triggering tasks, recovering data after an outage, backfilling or migrations, displaying business operations and related data. If a problem could be fixed easily, a developer can adjust data directly in the database, or write a bash/python/whatever script. We usually avoid direct accessing the data, but circumstances could make you do it. But there is a more reliable way - an application with internal use - Administration Panel. Benefits of having Admin Panel: authorized access; logging and auditing all the actions done by a user; its code usually reviewed and tested; accessible not only by users, but by tech support. Often admin panel is designed to access database of business-logic servers. This approach has some disadvantages, but is a good tradeoff: providing an acceptable level of security through simple implementation. Thus, most probably, you can use the main database to store the settings, including the feature-toggle and access them from your servers. Get your hands dirty with code Simple toggle The simplest use case is a two position toggle - either enable for all or disable for all. private final FeatureToggleService featureToggleService;

public void businessLogic() {
   if (featureToggleService.isFeatureEnabled(IMPORTANT_FEATURE)) {
       doImportantFeatureStuff();
   } else {
       log.info("Feature disabled {}", IMPORTANT_FEATURE);
   }
} If I implemented it in memory, I'd check if there is a key in a hash set. If there is one - feature is enabled, otherwise - disabled. In an SQL database there could be a table, which contains the names of the features - that's all what we need here. We can query the keys and that's how it could look like: public class FeatureToggleService {

   private static final String STATE_QUERY = "SELECT id FROM features WHERE name = (?)";

   private final JdbcOperations jdbcOperations;

   private final LoadingCache<String, Boolean> toggleStateCache = CacheBuilder.newBuilder()
           .expireAfterWrite(60, TimeUnit.SECONDS)
           .build(new CacheLoader<>() {
               public Boolean load(String featureName) {
                   return jdbcOperations.queryForList(STATE_QUERY, String.class, featureName)
                              .size() > 0;
               }
           });

   public boolean isFeatureEnabled(String featureName) {
       boolean state = toggleStateCache.getUnchecked(featureName);
       return Boolean.TRUE.equals(state);
   }
} In the example above, I used a cache from Google Guava. It’s a simple local cache, but in 99% of cases it will probably meet your requirements. Feature are toggled infrequently, there is no point in making requests often. I chose 60 seconds as an example - but it’s a good trade off, not too many requests and not too long switching. User specific toggle A slightly more complicated case. You want to test functionality in production, but you don't want it to be available to all users. Instead, you want to enable the feature only for a set of users, who are considered to be testers. private final FeatureToggleService featureToggleService;

public void businessLogic(LoggedUser loggedUser) {
   if (featureToggleService.isFeatureEnabled(IMPORTANT_FEATURE, loggedUser.id())) {
       doImportantFeatureStuff();
   } else {
       log.info("Feature disabled {}", IMPORTANT_FEATURE);
   }
} The third state of the feature has appeared - testing. So states are: Enabled for all Disabled for all Enabled for testers If feature is enabled for testing - you should check if current user is a tester. In other words whether user is in a list of persons who should have access to the feature. The database will require a second column that will store the state of the feature (it could be a number or a meaningful name). And you will also need to store a list of testers somewhere, for example, it could be another table in the database. And the implementation could be: public class FeatureToggleService {

   private static final String STATE_QUERY =
            "SELECT enabled_for FROM features WHERE name = (?)";
   private static final String TESTERS_QUERY = "SELECT id FROM test_users";
   private final JdbcOperations jdbcOperations;

   private final Supplier<Set<Long>> testUsersSupplier =
           memoizeWithExpiration(this::extractTesters, 60, TimeUnit.SECONDS);

   private final LoadingCache<String, String> toggleStateCache = CacheBuilder.newBuilder()
           .expireAfterWrite(60, TimeUnit.SECONDS)
           .build(new CacheLoader<>() {
               public String load(String featureName) {
                   return jdbcOperations.queryForList(STATE_QUERY, String.class, featureName)
                           .stream().findFirst().orElse("NONE");
               }
           });

   public boolean isFeatureEnabled(String featureName, long userId) {
       String state = toggleStateCache.getUnchecked(featureName);
       return "ALL".equals(state) ||
               ("TEST".equals(state) && testUsersSupplier.get().contains(userId));
   }

   private Set<Long> extractTesters() {
       return Set.copyOf(jdbcOperations.queryForList(TESTERS_QUERY, Long.class));
   }
} First we fetch state of the feature by it’s name (either from database or cache), then if it’s consider it enabled for all, or if it’s - consider it only enabled for testers. If so we fetch list of testers (either from database or from cache) and check if current user is in the list. If none of above - consider feature disabled for all. ALL TEST What could go wrong with the implementations above There is one un-obvious problem with local cache which you should be aware of: you’re setting feature enabled for all 09:45:27 request 1 has come to server 1 and feature worked as enabled 09:45:47 request 2 has come to server 2 and feature didn’t work as disabled 09:45:51 Why is that so? Local caches don’t know anything about other ot servers, in most cases it could not be a problem at all. Otherwise, you should do one of following: continue using local cache but evict it by a notification (using a pub sub system or broadcast messages); use a distributed cache (eCache or similar) and evict it on each change; use an in-memory databases (Redis, Zookeeper or similar) to store features and provide low-cost access to it; use a paid service which provides this functionality (there are a number of them, no adds and preferences here); come up with your own brilliant idea, there could be a plenty of them :) Conclusion Many developers think that it’s cool to use a fancy framework, but you need to assess if it's really justified. It's often easier to write a simple module that satisfies specific needs of your application, develop it your own way. But here you need to feel the boundary - writing your own HashMap from scratch does not make any sense.

Use Feature Toggle to Safely Release Updates On Your Server

Nowadays, the ability to switch between a light or a dark theme has become extremely popular on the internet. It has been a while since we began to see it on desktop applications, but now, we can also see it every day on most websites we use: Github, Stackoverflow, , etc. There are multiple ways to implement it, I’ll show you mine. Twitter Writing the themes It’s 2022, we survived the Coronavirus, and Internet Explorer is finally dead. I think it’s a good time to if you haven’t already (you can read if you are not familiar with them or if you don’t know what I’m talking about). start using CSS custom properties this fantastic post from Chris Coyier Even though I’ve started talking about two themes, I’m obviously talking about having . The key to creating those variants is to write every single color that appears on your theme in a custom property. In my case, I’ve started defining all the colors used in the light theme, which is the default I’ve chosen for the situation when we don’t know the user preference: a single CSS code with two variants body {
  --bg-color: #fff;
  --bg-color-secondary: #eee;
  --text-color: #303030;
  --text-color-secondary: #707070;
  --border-color: #eeeeee;
} Once we have the values for the light variant, we need to define the same properties for the dark one, and we will add them inside a media query. @media (prefers-color-scheme: dark) {
  body {
    --bg-color: #292639;
    --bg-color-secondary: #1b1928;
    --text-color: #ebeaf7;
    --text-color-secondary: #bebbd2;
    --border-color: #3a3650;
  }
} Now, we can just use those properties in our CSS. body {
  background: var(--bg-color);
  color: var(--text-color);
  /* ... */ 
}

.header {
  border-bottom: 1px solid var(--border-color);
  /* ... */ 
}

.menu-item {
  color: var(--text-color-secondary);
  /* ... */ 
}

.button {
  background: var(--bg-color-secondary);
  border: 1px solid var(--border-color);
  /* ... */ 
}

/* ... */ Some UX considerations Don’t get me wrong; I’m not a UX designer. Anyway, I feel comfortable enough to give you some tips regarding UX on light/dark themes: . There are lots of dark colors apart from the , in fact, you can see that I’m not using black as a background color on this site. Light is not necessarily white either. There are a lot of places to get inspiration from; if you are not an expert in color theory either, review what other sites do or take some ideas from IDE themes. Dark is not black #000000 . I could be wrong, but shadows are always dark. Take into consideration where the colors are being used. You can use a different kind of shadow for each variant, maybe you will need them to be more intense (or with less transparency) in the dark theme, but they should be dark. There is no need to switch every color . Ensure that you don’t hardcode color codes in the or the properties of your SVG icons. Use in those properties and let the CSS cascade do its job. Base the color of the SVG icons on the content stroke fill currentColor . Not every single picture will play well with both themes. Test the images you choose for your content and select those that look fine with dark and light backgrounds. Sometimes that could be impossible, don’t worry, there are different ways to show multiple images to your users, for example: Keep an eye on content images <picture>
  <source srcset="image-dark.png" media="(prefers-color-scheme: dark)" />
  <source srcset="image-light.png" media="(prefers-color-scheme: light)" />
  <img src="image-light.png" />
</picture> Another option, which is the one I’ve chosen, is to apply a filter to the pictures in the dark mode, making them darker and with a higher contrast: @media (prefers-color-scheme: dark) {
  img {
    filter: brightness(0.9) contrast(1.1);
  }
} If you follow these steps, you will now have two versions of your theme. I know it is not always as simple as I described here, particularly if you are not creating your theme from scratch but adding a new variant to the existing one. , and don’t give up. Adapt these tips to your situation Letting the user switch At this point, we have assumed the user will always want to see your website with the color mode preference that we read in the media feature. That’s a big assumption. In my opinion, it’s a good starting point, but . prefers-color-scheme we will always let the user switch from light to dark or vice-versa The most common way to do it is to create a fancy switch, but any kind of button will do the job also. This article aims to show you how you can implement the functionality, and we won’t focus on the design of the switch. Anyway, you can for inspiration or take a look at the code of my own switch on this Codepen: search here https://codepen.io/artberri/pen/abYzjQR?embedable=true Once we have designed our switch or button, what we should do is implement the functionality with javascript. We will be able to do it with this simple code: // Get the button element
const btn = document.querySelector(".your-button-or-switch-class");
// Detect if user preference is dark
const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
// On button click
btn.addEventListener("click", function() {
  // Get users preference
  const userSystemPreference = prefersDarkScheme.matches ? "dark" : "light";
  // Choose the class that will be added or removed
  const toggleClass = userSystemPreference === "dark" ? "light" : "dark";
  // Add or remove the class on the <html> element
  document.documentElement.classList.toggle(toggleClass);
}); As you can see, we will add or remove the class to the element if the user prefers the light theme, and we will toggle the class in case their preferred option is dark. This won’t trigger any effect for now, but it will with this simple addition to our CSS: dark html light .dark body {
  --bg-color: #292639;
  --bg-color-secondary: #1b1928;
  --text-color: #ebeaf7;
  --text-color-secondary: #bebbd2;
  --border-color: #3a3650;
}

@media (prefers-color-scheme: dark) {
  .light body {
    --bg-color: #fff;
    --bg-color-secondary: #eee;
    --text-color: #303030;
    --text-color-secondary: #707070;
    --border-color: #eeeeee;
  }
} With all this, our website will be loaded with the preferred theme of the user, and it will allow them to switch if they want. So, are we done here? Not yet. Storing user’s preference There is only one thing we lack; . I think the easiest way is to save it in the browser’s local storage and to do so, we need to modify the Javascript code I’d shown you previously. we need to store the user’s preferences to keep them between sessions or page navigation const btn = document.querySelector(".your-button-or-switch-class");
const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
btn.addEventListener("click", function() {
  const userSystemPreference = prefersDarkScheme.matches ? "dark" : "light";
  const toggleClass = userSystemPreference === "dark" ? "light" : "dark";
  document.documentElement.classList.toggle(toggleClass);

  // Obtain which is the user's current preference for our website
  const userCurrentPreference = document.documentElement.classList.contains(toggleClass)
    ? toggleClass
    : userSystemPreference;
  // Save it in local storage
  localStorage.setItem("mode", mode);
}); This little modification will get the current mode based on the class of the document (or its absence) and save it on local storage. Once the setting is saved, we need to ensure that we use it on every page load, and we will do that by executing this code in the of our webpage before loading any CSS: html <head> <script type="text/javascript">
  (function () {
      var userCurrentPreference = localStorage.getItem("mode");
      if (userCurrentPreference === "dark") document.documentElement.classList.toggle("dark");
      else if (userCurrentPreference === "light") document.documentElement.classList.toggle("light");
  })();
</script> Wondering why I’m asking you to add some synchronous Javascript code directly in the of your HTML? By adding this snippet asynchronously, or after the HTML and the CSS is loaded, you will run the risk of having a flash of incorrect theme color (this means that the wrong theme could be shown during some milliseconds). The overload of this code is worth in my opinion. Some people use a cookie-based solution to avoid this code, but it needs to be implemented server-side, which is not a possibility if you have a static-generated site like me. head I hope you enjoy reading; don’t forget to share it on your preferred social network if you do so. Also published here.

Adding Light and Dark Modes, with a Toggle Switch, to Your Website

When I rebuilt my , I knew I wanted to have some fun with the design, and a dark and light mode fit the bill. I enjoyed a lot of the discoveries I made during this project, but my favorite has to be the color-changing SVGs. This tutorial assumes familiarity with React, and I am using v17.0.1 and functional components. portfolio site First, I created a base layout. Next, I put together my and color schemes. It took a little trial and error, but after testing all my combinations for and experimenting with placement, I found I needed 6 CSS variables. I guess you could say I used “dark first” development because the variable names make sense in the context of the dark theme. The light theme has less variation but needed where would be the same color as the background. dark light sufficient contrast --button-border --accent .theme-dark {
  --dark-text: #292929;
  --light-text: #F9F8F8;  
  --dark-background: #2F4550;
  --light-background: #586F7C;
  --accent: #B8DBD9;
  --button-border: #B8DBD9;
} .theme-light {
  --dark-text: #5E4B56;
  --light-text: #5E4B56;
  --dark-background: #DBE7E4;
  --light-background: #EDDCD2;
  --accent: #DBE7E4;
  --button-border: #5E4B56;
} Then, I set about applying colors to my base layout: html, #root {
  background-color: var(--dark-background);
  color: var(--dark-text);
}

nav {
  background-color: var(--dark-background);
  color: var(--light-text);
}

.main-container {
  background-color: var(--light-background);
} I also set the backgrounds of the sections of content that I wanted to pop to . would have worked on all backgrounds in the dark theme, but I set the section titles to to make them stand out more. --accent --dark-text --light-text I found Musthaq Ahamad‘s , and set about applying it to functional React components.I put functions for changing the theme and checking localStorage for theme preferences into a file called . basic theme switcher tutorial themes.js function setTheme(themeName) {
    localStorage.setItem('theme', themeName);
    document.documentElement.className = themeName;
}

function keepTheme() {
  if (localStorage.getItem('theme')) {
    if (localStorage.getItem('theme') === 'theme-dark') {
      setTheme('theme-dark');
    } else if (localStorage.getItem('theme') === 'theme-light') {
      setTheme('theme-light')
    }
  } else {
    setTheme('theme-dark')
  }
}

module.exports = {
  setTheme,
  keepTheme
} In my file, I added to my . App.js keepTheme() useEffect() import { keepTheme } from './utils/themes';

function App() {
  useEffect(() => {
      keepTheme();
  })
} Next, I added the toggle component to my navigation bar component. I styled the toggle following based on . Then I . While this toggle is so cute that you could die, this tutorial will work with any or clickable . First, I set up the basic JSX, the local state, and a variable to hold the theme we get from localStorage: Chris Bongers’ Tutorial Katia De Juan’s Dribbble adjusted the size and flipped it to default to dark mode <button> <input> import React, { useEffect, useState } from 'react';
import '../styles/toggle.css';
import { setTheme } from '../utils/themes';

function Toggle() {
  const [togClass, setTogClass] = useState('dark');
  let theme = localStorage.getItem('theme');
  return (
        <div className="container--toggle">
           <input type="checkbox" id="toggle" className="toggle--checkbox" onClick={handleOnClick} />
            <label htmlFor="toggle" className="toggle--label">
                <span className="toggle--label-background"></span>
            </label>
        </div>
    )
}

export default Toggle; When a user clicks the toggle, I want the theme on the page to change and the toggle to change with it. I added the imported function and from the local state to a handleOnClick function. You can see where it is passed to the clickable part of the toggle in the JSX above. setTheme() setTogClass() const handleOnClick = () => {
  if (localStorage.getItem('theme') === 'theme-dark') {
      setTheme('theme-light');
      setTogClass('light')
  } else {
      setTheme('theme-dark');
      setTogClass('dark')
  }
} I used this component’s to make sure the local state togClass always loads with the correct theme. useEffect() useEffect(() => {
    if (localStorage.getItem('theme') === 'theme-dark') {
        setTogClass('dark')
    } else if (localStorage.getItem('theme') === 'theme-light') {
        setTogClass('light')
    }
}, [theme]) Because my toggle is a checkbox, the dark theme should show the unchecked (moon) state and the light theme should show the checked (sun) state. I couldn’t get to work how I wanted, so I replaced the unchecked with this conditional rendering (conditional operator): defaultChecked <input> ternary operator {
    togClass === "light" ?
    <input type="checkbox" id="toggle" className="toggle--checkbox" onClick={handleOnClick} checked />
    :
    <input type="checkbox" id="toggle" className="toggle--checkbox" onClick={handleOnClick} />
} If you used a , you could easily use conditional rendering like this to change the className attribute within the tag and get the same effect. <button> <button> Put all together, the code for the toggle component looks like this: import React, { useEffect, useState } from 'react';
import '../styles/toggle.css';
import { setTheme } from '../utils/themes';

function Toggle() {
    const [togClass, setTogClass] = useState('dark');
    let theme = localStorage.getItem('theme');

    const handleOnClick = () => {
        if (localStorage.getItem('theme') === 'theme-dark') {
            setTheme('theme-light');
            setTogClass('light')
        } else {
            setTheme('theme-dark');
            setTogClass('dark')
        }
    }

    useEffect(() => {
        if (localStorage.getItem('theme') === 'theme-dark') {
            setTogClass('dark')
        } else if (localStorage.getItem('theme') === 'theme-light') {
            setTogClass('light')
        }
    }, [theme])

    return (
        <div className="container--toggle">
            {
                togClass === "light" ?
                <input type="checkbox" id="toggle" className="toggle--checkbox" onClick={handleOnClick} checked />
                :
                <input type="checkbox" id="toggle" className="toggle--checkbox" onClick={handleOnClick} />
            }
            <label htmlFor="toggle" className="toggle--label">
                <span className="toggle--label-background"></span>
            </label>
        </div>
    )
} Update To see how I have refactored the logic of this component and made it accessible, read . An Accessible Dark Mode Toggle in React Finally, my favorite part: the color switching SVGs! CSS variables work in SVG code too! I got my SVG code for the Github and Chrome icons from . For the Github icon all I had to change was one fill attribute in a : DEVICON <g> <g fill="var(--dark-text)"> The Chrome icon had a fill attribute in a and a : <circle> <path> <circle fill="var(--dark-text)" cx="63.624" cy="64.474" r="22.634"></circle><path fill="var(--dark-text)" ...> The result looks like this: Conclusion I tried to include all of the relevant code, but you can also see the full code for my site in its . If you enjoyed this article or are left with questions, please leave a comment! I would also love to see anything built following this tutorial. Github repository Also Published here

How to add a Dark Mode Toggle in React

This post will show you how to build the Feature Toggle mechanism in your Next.JS application. We are going to use Next.JS, React, and TypeScript. We will deploy our application to Vercel to demonstrate a real-life example. You can find the code and video in the summary at the end. What You'll Learn in This Article In this article, we are going to deep dive into several topics such as: What are feature toggles? How to use React's Context API What are environment variables, and how do we use them in our applications? How to build custom hooks in React. What Are Feature Toggles? Feature toggles (aka Feature Flags) are a technique that allows you to change the state of your application without modifying its code. In the beginning, it might sound a bit confusing but let's consider the following scenario: Every December, many companies change their logo to add a bit of holiday spirit. Perhaps they want to add a Santa Claus hat into their logos or some sort of snowman. Have you ever wondered if they change their website every year just to update the logo? No, in most cases, they only do it once, and just connected it into their feature toggle. So they can enable the special logo whenever they need it. Here's another example: imagine a development team that follows continuous integration (CI). They use this mechanism to commit unfinished code, and then merge it onto the main branch. The unfinished code is disabled in the production environment so users cannot see incomplete features. Keep in mind that this is only a good idea for mature development teams that have experienced developers on board along with automated checks for their CI pipelines (like automated tests, static code analysis, compilation / bundling, and so on). Before We Start This tutorial requires some Node and React fundamentals. You should also know how to use Git and GitHub before you follow the instructions in this article. I skipped the part about bootstrapping the example application since I showed a very similar process in one of my previous posts - . How to Build a Fully Functional Serverless App in Under Two Hours I created two GitHub repositories for this post. The first one contains the scaffolder of the application, so you can follow all steps of the tutorial on your own. The second one is the finished application which you can deploy to Vercel without writing any code if you would like just to see the end result. Application Scaffolder (GitHub). The final app, ready to deploy (GitHub). We'll build the example application using Next.JS, React, and Typescript. The main purpose of the application is to display two financial charts. The first one represents the GDP of the United States, and the second one shows Treasury Constant Maturity over the last 10 years. The second one is unfinished. Our goal is to hide it behind the feature toggle, so we can enable it whenever we need it. The final application should look like this: You can find it here. Let's Get Started! We need to clone the scaffolder repository from GitHub, and we can do that by typing the following command in the terminal: $ git clone git@github.com:mateuszsokola/next-feature-toggle-scaffolder.git Now we need install the required dependencies and start the server. $ cd next-feature-toggle-scaffolder
$ npm install
$ npm run dev Now you can open in your browser and see the following website: http://localhost:3000/ Now, how can we implement the Feature Toggle mechanism here? React's Context API seems to be the easiest and most appropriate way. What is the React Context API? The React Context API offers a neat and tidy way of passing data through multiple levels of components without doing it manually. Let's see the following example: <Page enabledFeatures={features} />
<PageLayout enabledFeatures={features} />
<NavigationBar enabledFeatures={features} />
<Link href="https://freecodecamp.org/news/">
  <Avatar enabledFeatures={features} />
</Link> If you don't want to use Context, you will need to pass the data as properties to every component. This is error-prone and cumbersome. If you decide to use the context, you can inject data directly into the component that actually needs it. Now we can create a context for our feature toggle. We need to create a directory called , and a new file inside this directory. We can call it . context/ FeatureToggleContext.ts $ mkdir context
$ cd context
$ touch FeatureToggleContext.ts Creating context in React is fairly easy. You need to import React in your file and call the React.createContext method with the default context value. See the example below: // file: context/FeatureToggleContext.ts
import React from "react";

export const FeatureToggleContext = React.createContext({
  // TypeScript will have hard time to determine its type,
  // if we don't cast this array to an array of strings.
  // Likely, we will end up with an array of never or any.
  enabledFeatures: [] as string[],
}); Have in mind that the default value is only used when the component isn't wrapped into the context provider. It is just a fallback, and it shouldn't be used without the provider. The Context Provider Component Context comes with a Provider component that allows consuming components to listen to context changes. The Provider component takes a value prop that you pass to components that are the children of this provider. In simple words, if we want to take advantage of the context we will need to make the Provider a parent of our all components. I decided to wrap the Provider into a standalone component so we don't clutter up other parts of the application. Let's create a new file in the directory called : components/ FeatureToggle.tsx $ cd components
$ touch FeatureToggle.tsx Now we can create a component that accepts two properties: and . children enabledFeatures The is the main component of the application. If you created a React app using you might have noticed that the main component is called . Next.JS calls it , and you can find it in the file . children create-react-app App MyApp pages/_app.tsx The is the array of enabled features. We will use it later. enabledFeatures # file: compontents/FeatureToggle.tsx

import React from "react";
import { FeatureToggleContext } from "../context/FeatureToggleContext";

type Props = {
    children: any;
    enabledFeatures: string[];
}

export const FeatureToggle = ({ children, enabledFeatures }: Props) => {
    return (
        <FeatureToggleContext.Provider value={{ enabledFeatures }}>
            {children}
        </FeatureToggleContext.Provider>
    )
} The wrapped component is ready. Now we need to hook it into the main component. Let's open the file pages/_app.tsx. We have only one toggleable feature – . We need to add it to the list of enabled features. At the moment, we'll soft code this list, and pass it down directly to the provider to confirm we have access to the context. Later on, we are going to create a proper API for the feature toggle. treasury_chart We need to modify the file to look like this: import { FeatureToggle } from "../components/FeatureToggle";
import "../styles/globals.css";

function MyApp({ Component, pageProps }) {
  const enabledFeatures = ["treasury_chart"];

  return ( 
    <FeatureToggle enabledFeatures={enabledFeatures}>
      <Component {...pageProps} />
    </FeatureToggle>
  );
}

export default MyApp; Technically, the list of enabled features is available in the whole application now. But we have no interface to consume its value. Taking advantage of React hooks is the best way to expose it. How to Create Custom Hooks in React We created this mechanism based on the React Context API, and the most React way to consume React Context is by using hooks. So we will need to create a hook that offers easy access to the right data in the context. Let's create a new directory called , and a new file called . hooks/ useFeatureToggle.ts $ mkdir hooks
$ touch useFeatureToggle.ts Let's think about the hook for a minute. We want to check the status of a given feature. If the feature is enabled we are going to render it, otherwise, we won't. So the hook should return a helper that checks if the requested feature is on the list of enabled features, right? Let's code it. # file: hooks/useFeatureToggle.ts

import React, { useContext } from "react";
import { FeatureToggleContext } from "../context/FeatureToggleContext";

export const useFeatureToggle = () => {
	// we need to read values defined in the FeatureToggleContext. 
    // In this case, we'll take only the array of enabled features.
    const { enabledFeatures } = useContext(FeatureToggleContext);

    const isEnabled = (featureName: string) => {
        return enabledFeatures.includes(featureName);
    }

	// For consistency, We return an array of helpers, 
    // so we follow the pattern defined by the useState hook.
    // It makes the code open for extensions, 
    // so no need to refactor the app when a new helper is added here.
    return [
        isEnabled,
    ];
} The hook is ready. We can open the main page, and connect the Treasury chart into the Feature Toggle. Let's open . pages/index.tsx We are going to use our custom hook to get access to the helper and use it to check if the feature is enabled. isEnabled const [isEnabled] = useFeatureToggle();

// ...

return (
  /* ... /
  {isEnabled("treasury_chart") && (<TreasuryChart />)}
  / ... */
); The complete implementation looks like this: # file: pages/index.tsx

import React from "react";
import Head from "next/head";
import { Layout } from "antd";

import { GdpChart, TreasuryChart } from "../components/Charts";
import { useFeatureToggle } from "../hooks/useFeatureToggle";

const { Header, Content } = Layout;

export default function Home() {
  const [isEnabled] = useFeatureToggle();
  return (
    <Layout className="layout">
      <Head>
        <title>🚦 Feature Toggle in Next.js</title>
      </Head>
      <Header>
        <div className="logo" />
      </Header>
      <Content className="content">
        <GdpChart />
        {isEnabled("treasury_chart") && (<TreasuryChart />)}
      </Content>
    </Layout>
  );
} Now, you can try out the application in your browser. Keep in mind that you will still see the second chart. You can fool around with the feature name given to the helper. For example, you can make a typo, and the chart should disappear afterwards. isEnabled Unfortunately, this solution doesn't give us flexibility to toggle features without modifying the codebase. Every time we want to change the status of the feature, we will need to modify the list of enabled features. How can we fix that? The easiest way to make it toggleable without changing the code would be to implement an API that reads statuses of features from environment variables and returns an array of active features. How to Use Environment Variables in Node An environment variable is a variable whose value is set outside the application, usually by functionality built into the operating system. This is Node.JS, in our case. Let's create a file in our project. .env $ touch .env Now, we can open this file and add a new variable. We can call it . We need to set its value to . FEATURE_TREASURY_CHART false # file: .env

FEATURE_TREASURY_CHART=false If we use .env variables we'll need to use some server features of Next.JS, and define a new API. This means we will need to write more code. So we need to create a new file in the directory. Let's call it . pages/api/ features.ts The API will return an array of enabled features. // file: pages/api/features.ts

export default (req, res) => {
    res.status(200).json([
    	// Your environment variables are available within the `process.env` object.
    	// IMPORTANT! All environment variable values are strings. 
        // So we cannot compare them with booleans, numbers and so on.
        process.env.FEATURE_TREASURY_CHART === "true" ? "treasury_chart" : "",
    ])
} Now, you can try to open in your browser, and you should receive the following output: http://localhost:3000/api/features [""] The wasn't added to the list of enabled features, because it is disabled. You can change the variable to , and restart your server to try it out. treasury_chart FEATURE_TREASURY_CHART true How to Use the Features API We are good to connect the React part of the application to our brand new API. Before we do so, we'll need to install . axios Axios will help us to make HTTP requests in a more convenient way than . It supports error handling and types out of the box. We don't need to implement it on our own, so we can get straight to business. You might need to kill your server by hitting Control + C. Twice. fetch $ npm install --save axios Let's create a new directory called , and a new file called . services/ FeatureToggle.ts Now we need to use a standard asynchronous function to make a GET request to our API. // File: services/FeatureToggle.ts

import axios from "axios";

export const fetchFeatures = async () => {
    try {
        const { data } = await axios.get<string[]>("/api/features");

        return data;
    }
    catch(e) {
        console.log("Something went wrong");
    }

    return [] as string[];
} OK. The feature API request is ready. We can actually trigger this function at the main component. Open the file . pages/_app.tsx We need to make an API request like every other in React using the and hooks. We need to add the following snippet to the component: useEffect useState MyApp const [enabledFeatures, setFeatures] = useState<string[]>([]);

  const processFeatures = async () => {
    const features = await fetchFeatures();

    setFeatures(features);
  }

  useEffect(() => {
    processFeatures();
  }, []); The complete solution is here: // file: pages/_app.tsx

import { useEffect, useState } from "react";
import { FeatureToggle } from "../components/FeatureToggleProvider";
import { fetchFeatures } from "../services/FeatureToggle";
import "../styles/globals.css";

function MyApp({ Component, pageProps }) {
  const [enabledFeatures, setFeatures] = useState<string[]>([]);

  const processFeatures = async () => {
    const features = await fetchFeatures();

    setFeatures(features);
  }

  useEffect(() => {
    processFeatures();
  }, []); // eslint-disable-line react-hooks/exhaustive-deps

  return (
    <FeatureToggle enabledFeatures={enabledFeatures}>
      <Component {...pageProps} />
    </FeatureToggle>
  )
}

export default MyApp; Hurray! We are done with coding. The final step is to deploy our app. How to Publish the App on Vercel We will deploy the application to Vercel, because they offer free hosting for apps and they let us set custom environment variables, which is critical for us. As usual, I am going to skip the process of creating a new account. You can create one with one click using your GitHub or Google account. Once you've signed up, you should see this screen. Click on the "New Project" button: Now you need to select the GitHub repository you want to import. In my case, it is "next-ft-demo", but you might've called it something else. If you don't see your repository, you need to click on "Adjust GitHub App Permission" (the link below marked with the red ellipse): We need to configure the project. Let's open "Environment Variables", add a new variable called FEATURE_TREASURY_CHART, and set its value to false. Then click on the "Add" button, and hit "Deploy": The application is being deployed now. You should see the following screen once done. Just click on the "Go To Dashboard" button: You can open your application by clicking the "Visit" button: The application displays only one chart: If you want to enable the Treasury chart you need to select the "Settings" tab, choose the "Environment variables" section, and set the FEATURE_TREASURY_CHART variable to true: Now we need to redeploy the application to load new variables. Once the deployment is completed you will see the Treasury chart on your website: Summary This is a simple implementation of Feature Toggles. You'll probably need to adjust it to fit your needs. But I think it's a good starting point that you can build upon. If you have an idea about how to improve my solution or you want to show us yet another way of doing it, please share it in the comment section of the YouTube video below (I reply to every comment). WATCH VIDEO ON YOUTUBE HERE If you find the video useful it would mean the world to me if you smash the like button and subscribe. You can find all the code on GitHub: Application Scaffolder (GitHub). The final app, ready to deploy (GitHub). If you have any questions you can DM me on Twitter: @msokola I hope you liked it and have a great day :) Also published on: https://www.freecodecamp.org/news/how-to-use-feature-toggles-in-next-js-and-react/

TOGGLE

toggle.is

-- employees

Since n.d.

COMPANY RANKING

TOGGLE

EVERGREEN INDEX #10953

Representing this company? Click here to claim and customize this page!

Toggle WIKI

Apply to get your Tech Company News Page live on HackerNoon.com today!

TOGGLE

toggle.is

-- employees

Since n.d.

COMPANY RANKING

TOGGLE

EVERGREEN INDEX #10953

RELATED COMPANIESRANK

STORIES ABOUT TOGGLE

Representing this company? Click here to claim and customize this page!

Toggle WIKI

Apply to get your Tech Company News Page live on HackerNoon.com today!