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>
    </>
  )
}

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