Feature flags

You can add feature flags to your project to test certain features, and which can be activated and deactivated by users of the Frontastic studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`..

Feature flag use

Common usage of feature flags include:

  • Testing a feature on the staging system with the same code deployed on staging and production
    This is very useful when you don't want to rely on code branches and it's usually the most efficient way to ensure you're able to iterate and deploy quickly. But, a single active code branch is easier from a development process point of view.
  • Activating and deactivating features easily to test user behavior
    So you could give the ability to users in the Frontastic studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`. to run tests with real customers, for example, activating a payment service for a certain period of time.

Feature flags in the Frontastic studio

You can access feature flags in the Frontastic studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`..

🚧

If you don't see this on your dashboard, contact our Support team to activate it for you.

Within this area, you can add any feature flag with the ability to enable or disable when you wish and for different environments.

To add a new feature flag, click the blue add icon:

Then input a name for your feature flag under Key and activate it for different environments using the toggles. You can also add a description using Markdown to add more information for other team members. Click Save when you're done.

You can then access the feature flags inside your backend and in the frontend code in your application.

Feature flags in the backend

You can check, for example, inside a custom data source (see this article for more information) if a feature flag has been enabled, and execute different code based on this:

namespace Acme\My\CustomDataSource;

use Frontastic\Catwalk\ApiCoreBundle\Domain\Context;
use Frontastic\Catwalk\FrontendBundle\Domain\Node;
use Frontastic\Catwalk\FrontendBundle\Domain\Page;
use Frontastic\Catwalk\FrontendBundle\Domain\TasticFieldHandlerV3;

class MyDataSource extends TasticFieldHandlerV3
{
    public function getType(): string
    {
        return 'acme/data-source';
    }

    public function handle(Context $context, Node $node, Page $page, $fieldValue)
    {
        if ($context->hasFeature('my_feature')) {
            // Do something
        }  else {
            // Do something else
        }
    }
}

As you can see in the Context has a method hasFeature() that allows you to check if a feature has been enabled in the Frontastic studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`. for the current environment. If the feature is unknown or hasn't yet been configured it will always return false just like the feature had been disabled.

Feature flags in the frontend

You can also check inside Frontastic componentsFrontastic components - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. if a feature flag is active and renders, for example, different content based on this:

import PropTypes from 'prop-types'

const YourTastic = ({ context }) => {
  if (context.hasFeature('my_feature') {
    // Render something
  } else {
    // Render something else
  }
}

YourTastic.propTypes = {
  context: PropTypes.object.isRequired,
}
YourTastic.defaultProps = {}

export default tastify({ connect: { context: true } })(YourTastic)

The context has a method hasFeature() that allows you to check if a feature has been enabled in the Frontastic studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`. for the current environment. If the feature is unknown or hasn't yet been configured it will always return false just like the feature had been disabled.


Did this page help you?