5 minute setup

Quickstart

Ship your first feature flag in under 5 minutes. This guide covers account setup, creating a flag, and integrating with React.

Prerequisites

✓Node.js 18+ installed
✓A React application (Next.js, Vite, CRA, etc.)

Create your account

Create free account

Create your first flag

Once logged in, click "Create Flag" and enter:

Key: new-checkout
Name: New Checkout Flow
Status:Disabled (we'll enable it after testing)

Get your API key

Go to Settings → API Keys and create a new key:

Client key (prefix: rg_client_) - for frontend apps
Server key (prefix: rg_server_) - for backend apps

Security: Never expose server keys in client-side code. Use client keys for React apps.

Install the SDK

Install the React SDK in your project:

npm install @rollgate/sdk-react
# or: yarn add @rollgate/sdk-react

Add the provider

Wrap your app with the Rollgate provider:

// app/layout.tsx or _app.tsx
import { RollgateProvider } from '@rollgate/sdk-react';

export default function RootLayout({ children }) {
  return (
    <RollgateProvider
      apiKey="rg_client_your_key_here"
      baseUrl="https://api.rollgate.io"
    >
      {children}
    </RollgateProvider>
  );
}

Use the flag

Check the flag in your components:

import { useFlag } from '@rollgate/sdk-react';

function CheckoutButton() {
  const showNewCheckout = useFlag('new-checkout', false);

  if (showNewCheckout) {
    return <NewCheckoutFlow />;
  }

  return <LegacyCheckout />;
}

Enable the flag

Go back to the Rollgate dashboard and toggle your flag to Enabled. Your app will update in real-time (or within the polling interval).

That's it! You've shipped your first feature flag.

Add user targeting (optional)

For percentage rollouts, A/B tests, or targeting rules, add user context:

// Identify the user for targeting
<RollgateProvider
  apiKey="rg_client_..."
  user={{
    id: user.id,           // Required for % rollout
    email: user.email,
    attributes: {
      plan: user.plan,     // e.g., "free", "pro"
      country: user.country,
      app_version: "2.1.0"
    }
  }}
>

Now you can create targeting rules in the dashboard: "Enable for Pro users in Italy on app version 2.0+"

Real-World Example: E-commerce Checkout Redesign

Scenario

Your team redesigned the checkout flow to reduce cart abandonment. Before shipping to all 500K users, you want to validate it works correctly and actually improves conversion.

Problem

A bug in the new checkout could cause payment failures, losing thousands in revenue per hour. Rolling back a full deployment takes 15+ minutes.

Solution with Rollgate

Create new-checkout flag, disabled by default
Deploy code with the flag check - no user sees the new checkout yet
Enable for internal team (target: email contains @yourcompany.com)
After internal testing, enable 5% rollout
Monitor conversion metrics for 48 hours
If metrics look good, gradually increase to 100%
If something breaks: 1-click rollback in seconds

Result

The new checkout increased conversion by 12%. A bug was caught at 5% rollout affecting only ~25K users. Rollback took 2 seconds. Without feature flags, this bug would have affected all 500K users for 15+ minutes.