Astro - Featurevisor

Set up Featurevisor SDK in Astro applications for evaluating feature flags in your pages and components.

What is Astro?

Astro is a website build tool with a server-first API design for the modern web. It's UI library agnostic, allowing you to choose React, Preact, Svelte, Vue, or just plain HTML (with JSX flavour) as your rendering layer.

Creating an Astro project

Use npm to scaffold a new project:

$ npm create astro@latest

Installing Featurevisor SDK

Install the Featurevisor SDK using npm:

$ npm install --save @featurevisor/sdk

It is recommended to be familiar with the SDK API before reading this guide further. You can find full API documentation here.

Setting up Featurevisor SDK

We would like to be able to set up the Featurevisor SDK instance once and reuse the same instance everywhere.

To achieve this, we will create new module:

// src/featurevisor.mjs
import { createInstance } from "@featurevisor/sdk";

const DATAFILE_URL = "https://cdn.yoursite.com/datafile.json";

let instance;

export async function getInstance() {
  if (instance) {
    return instance;
  }

  const f = createInstance({
    datafileUrl: DATAFILE_URL,
  });

  instance = await f.onReady();

  return instance;
}

Now that we have the SDK instance in place, we can use it anywhere in our application.

Featurevisor's build & deployment

To understand how the datafiles are generated and deployed, please refer to these guides:

We created a very simple instance of the SDK, but we can also configure it further for fetching latest datafile without restarting our server:

periodically (see refreshing datafile)
as soon as they happen (see websockets guide)

Accessing SDK in components

From any component file, we can import the getInstance function and use it to access the SDK instance:

// src/pages/index.astro

---
import { getInstance } from '../featurevisor.mjs';

const f = await getInstance();

const featureKey = "my_feature";
const context = { userId: "123", country: "nl" };

const isEnabled = f.isEnabled(featureKey, context);
---

<p>
  Feature {featureKey} is
  {isEnabled
    ? 'enabled'
    : 'disabled'
  }.
</p>

With just a few lines of code, we can now evaluate feature flags in our Astro components.

Regular client-side usage

If your use case is not server-side rendering or at build time, you can use the SDK instance directly in your client-side code:

Bucketing guidelines

If you are using Featurevisor for gradual rollouts or A/B testing, you should make sure that the bucketing is consistent when rendering your components.

Usually bucketing is done by passing the User's ID when the user is already known, or a randomly generated UUID for the device if the user has not logged in yet.

When evaluating using the SDK instance, we would be passing these values as context object:

const context = {
  userId: "123",
  deviceId: "<UUID-here>",
};

const isEnabled = f.isEnabled(featureKey, context);

If the evaluation of features are done in the server, you should make sure that the User's ID is passed to the server as well. If that's not an option, you are recommended to use a single value consistently.

See documentation about bucketBy property in feature definitions for further explanation here.

Working repository

You can find a fully functional example of this integration on GitHub: https://github.com/featurevisor/featurevisor-example-astro.