Feature Flag

To start using feature flag you first need to configure your application host as following

fronthub('configure', {
  features: ({ name /* the microfrontend name */ }) =>
    fetch('/some/feature/flagger/' + name).then(response => response.json()),
})

features should be an async function that must resolve to an array with all enabled features, example

["whatsapp"]

In development mode, you may create feature property in your front-hub.config.js file to emulate this service as following

front-hub.config.js

module.exports = {
  features: ['whatsapp'],
}

After that, you may use in your micro frontend like so:

import { useFeature } from '@resultadosdigitais/front-hub/react'

export default () => {
  const { Enabled, Disabled } = useFeature()

  return (
    <>
      <Enabled feature="whatsapp">
        Click here to start talking in WhatsApp
      </Enabled>
      <Disabled feature="whatsapp">
        Why do you think we implemented WhatsApp in our store?
      </Disabled>
    </>
  )
}

In addition to the <Enabled /> and <Disabled /> components, the useFeature hook also returns two boolean helper functions: isEnabled and isDisabled. These functions allow you to programmatically check if a feature is enabled or disabled, making it easier to conditionally render components based on feature flags.

Just like the components above, these functions expect a parameter whose value should be the name of a feature previously defined.

• isEnabled Returns true if the feature is enabled for the current application context, otherwise returns false.
• isDisabled Returns true if the feature is disabled for the current application context, otherwise returns false.

Using boolean helpers from useFeature

const Component = () => {
  const { isEnabled, isDisabled } = useFeature()

  return (
    <>
      {isEnabled('whatsapp') && <div>WhatsApp is enabled!</div>}
      {isDisabled('whatsapp') && <div>WhatsApp is disabled.</div>}
    </>
  )
}

Use these functions when you need more flexibility to render components or execute conditional logic based on feature flags, without wrapping the content in the <Enabled /> or <Disabled /> components.

You could also conditionally load entire different versions of your micro frontend on the application host side by using release streams:

The application host

  fronthub('requireMicrofrontend', 'pet-shop@<%=  currentUser.id > 40 ? "stable" : "canary" %>', function(hub){...})

You may have more than one release stream (canary, beta, etc) running at the same time. Think about it as npm dist tags.

You can read more information about it on the proposal Draft Frontend Architecture