Trying Your First Feature Flag: A Hands-On Tutorial

March 10, 2026

You’ve heard the pitch: feature flags decouple deployment from release, enable progressive delivery, and give you instant kill switches. But what does it actually feel like to set one up and use it?

This post walks through the entire journey — from creating a flag in the GoGreen dashboard to evaluating it in a real application with the TypeScript SDK. No theory, just practice.

Step 1: Create a Project and Environment

After signing up at app.gogreenflags.com , create an organization and a project. Every project comes with a Development environment by default. Each environment has two keys:

• SDK Key — used by client-side SDKs (browsers, mobile apps)
• Server Key — used by backend services

Copy the SDK key. You’ll need it in a moment.

Step 2: Create a Boolean Flag

In the dashboard, navigate to your project’s flag list and click Create Flag. Give it:

• Key: new-checkout
• Type: Boolean
• Description: “Toggle the new checkout experience”

GoGreen automatically creates On and Off variations and a default catch-all rule for every environment. The flag starts in the Off state — safe to deploy without affecting anyone.

Step 3: Install the SDK

mkdir my-flag-app && cd my-flag-app
npm init -y
npm install @gogreenflags/sdk typescript ts-node

Step 4: Write Your App

Create an index.ts file:

import { GoGreenClient } from '@gogreenflags/sdk';
 
async function main() {
  const client = new GoGreenClient({
    sdkKey: 'YOUR_SDK_KEY',          // from Step 1
    environmentId: 'YOUR_ENV_ID',     // from the dashboard URL
    apiBaseUrl: 'https://app.gogreenflags.com',
    defaultContext: {
      key: 'user-42',
      custom: {
        email: 'alice@example.com',
        plan: 'pro',
      },
    },
  });
 
  await client.waitForInitialization();
 
  const showNewCheckout = await client.boolVariation('new-checkout', false);
 
  if (showNewCheckout) {
    console.log('Rendering the shiny new checkout...');
  } else {
    console.log('Rendering the classic checkout.');
  }
 
  client.close();
}
 
main();

Run it:

npx ts-node index.ts

Rendering the classic checkout.

The flag is off. Your code is live, but the feature is dormant. This is the entire point — the code is deployed, but the feature is not released.

Step 5: Flip the Switch

Go back to the dashboard. Find new-checkout in the flag list and toggle it On. The catch-all rule now serves 100% of traffic the On variation.

Run the app again:

npx ts-node index.ts

Rendering the shiny new checkout...

No redeployment. No CI pipeline. No pull request. The feature is live.

Step 6: Watch It Live (Streaming)

For long-running applications (servers, SPAs), you don’t want to restart to pick up changes. Enable streaming:

const client = new GoGreenClient({
  sdkKey: 'YOUR_SDK_KEY',
  environmentId: 'YOUR_ENV_ID',
  apiBaseUrl: 'https://app.gogreenflags.com',
  defaultContext: { key: 'user-42' },
  enableStreaming: true,
});
 
client.on('update', async () => {
  const val = await client.boolVariation('new-checkout', false);
  console.log(`Flag changed! new-checkout is now: ${val}`);
});
 
await client.waitForInitialization();

Now toggle the flag in the dashboard and watch the terminal update in real time. No polling, no restarts.

Step 7: Get the Details

Sometimes “on” or “off” isn’t enough context. Use boolVariationDetail to understand why a flag resolved to a particular value:

const detail = await client.boolVariationDetail('new-checkout', false);
 
console.log(`Value: ${detail.value}`);
console.log(`Reason: ${detail.reason}`);
console.log(`Variation ID: ${detail.variationId}`);

Value: true
Reason: RULE_MATCH
Variation ID: 964ae520-f6c6-4f01-bdfa-b736ec4e7695

This is invaluable for debugging targeting rules, understanding why a specific user saw a specific experience, and feeding data into experiment analysis.

Beyond Boolean: String and Number Flags

Boolean flags are the starting point, but GoGreen supports richer types. A string flag can drive UI themes:

const theme = await client.stringVariation('ui-theme', 'light');
document.body.className = theme; // 'light', 'dark', 'high-contrast'

A number flag can tune operational parameters without a deploy:

const rateLimit = await client.numberVariation('rate-limit', 100);
limiter.setMaxRequestsPerMinute(rateLimit);

Every flag type supports the same targeting rules, percentage rollouts, and environment-scoped state that boolean flags do.

What You’ve Actually Built

In under 20 lines of code, you now have:

• A kill switch. If the new checkout causes errors, toggle it off. Recovery time: seconds, not minutes.
• A release gate. Ship code on Monday, release to users on Thursday when marketing is ready.
• A targeting foundation. Next step: add rules to show the new checkout only to plan: enterprise users, or roll it out to 10% of traffic first.

Feature flags aren’t just a deployment trick. They’re the foundation for progressive delivery, A/B testing, entitlement management, and operational safety. And it all starts with a single boolean.

Ready to try it yourself? Sign up for GoGreen Flags  — it’s free to start.