Skip to Content
Quick Start

Quick Start Guide

Get started with DarkFeature in minutes. This guide will walk you through setting up your first feature flag.

Prerequisites

  • A DarkFeature account (sign up at darkfeature.com )
  • Basic knowledge of your programming language
  • A web browser for testing

Step 1: Create Your First Feature Flag

  1. Sign in to your DarkFeature dashboard
  2. Navigate to the Features section
  3. Click “Create Feature”
  4. Enter a name for your feature (e.g., “new-navigation”)
  5. Set the initial state to “Off”
  6. Click “Create Feature”

Step 2: Configure Your Environment

DarkFeature supports multiple environments for different stages of development:

  1. Development - For local development and testing
  2. Staging - For pre-production validation
  3. Production - For live applications

Each environment has its own configuration and API keys.

Step 3: Get Your API Key

Each environment has its own API key for security:

  1. Go to your project settings
  2. Navigate to the API Keys section
  3. Copy the Client-side API Key for your Development environment

Your API key will look like this:

1234567890abcdef1234567890abcdef

Note: API keys are 32-character nanoids without any prefixes or suffixes.

Step 4: Install the Code Example

Choose your preferred language and install the DarkFeature code example:

JavaScript/TypeScript (Client-side)

npm install @darkfeature/sdk-javascript
# or
yarn add @darkfeature/sdk-javascript
# or
pnpm add @darkfeature/sdk-javascript

React

npm install @darkfeature/sdk-react
# or
yarn add @darkfeature/sdk-react
# or
pnpm add @darkfeature/sdk-react

Node.js (Server-side)

npm install @darkfeature/sdk-javascript
# or
yarn add @darkfeature/sdk-javascript
# or
pnpm add @darkfeature/sdk-javascript

Step 5: Initialize the Code Example

Add the code example to your application:

JavaScript/TypeScript (Client-side)

import { DarkFeatureClient } from '@darkfeature/sdk-javascript'
 
const client = new DarkFeatureClient({
  apiKey: '1234567890abcdef1234567890abcdef',
  context: {
    userId: '123',
    email: '[email protected]',
  },
})
 
// Check if a feature is enabled
const isEnabled = await client.getFeature('new-navigation', { fallback: false })
console.log('New navigation enabled:', isEnabled)

React

import { DarkFeatureProvider, useFeature } from '@darkfeature/sdk-react'
 
function App() {
  return (
    <DarkFeatureProvider
      config={{
        apiKey: '1234567890abcdef1234567890abcdef',
        context: { userId: '123' },
      }}>
      <MyComponent />
    </DarkFeatureProvider>
  )
}
 
function MyComponent() {
  const { feature: isEnabled } = useFeature('new-navigation', {
    fallback: false,
  })
 
  return <div>{isEnabled ? <NewNavigation /> : <OldNavigation />}</div>
}

Node.js (Server-side)

import { DarkFeatureClient } from '@darkfeature/sdk-javascript'
 
const client = new DarkFeatureClient({
  apiKey: '1234567890abcdef1234567890abcdef',
  context: {
    userId: '123',
    email: '[email protected]',
  },
})
 
// Check if a feature is enabled
const isEnabled = await client.getFeature('new-navigation', { fallback: false })
console.log('New navigation enabled:', isEnabled)

Step 6: Test Your Feature Flag

Enable the Feature

  1. Go back to your DarkFeature dashboard
  2. Find your “new-navigation” feature
  3. Toggle the feature to “On”
  4. Save the changes

Verify the Change

If you’re using the JavaScript code example, you can test in your browser:

// Open browser console and run:
const isEnabled = await client.getFeature('new-navigation', { fallback: false })
console.log('Feature enabled:', isEnabled)

You should see the feature status change from false to true.

Step 7: Add User Targeting

Now let’s target specific users:

  1. Go to your feature settings
  2. Click “Add Rule”
  3. Select “User Attribute”
  4. Choose “email” as the attribute
  5. Set the condition to “contains” and value “admin”
  6. Save the rule

This will enable the feature only for users with “admin” in their email address.

Step 8: Test with Different Users

// Test with admin user
client.setContext({ email: '[email protected]' })
const adminEnabled = await client.getFeature('new-navigation', {
  fallback: false,
})
console.log('Admin enabled:', adminEnabled) // true
 
// Test with regular user
client.setContext({ email: '[email protected]' })
const userEnabled = await client.getFeature('new-navigation', {
  fallback: false,
})
console.log('User enabled:', userEnabled) // false

For production applications, store your API key in environment variables:

Client-side (JavaScript/React)

# .env
REACT_APP_DARKFEATURE_API_KEY=1234567890abcdef1234567890abcdef
VUE_APP_DARKFEATURE_API_KEY=1234567890abcdef1234567890abcdef
const client = new DarkFeatureClient({
  apiKey:
    process.env.REACT_APP_DARKFEATURE_API_KEY ||
    process.env.VUE_APP_DARKFEATURE_API_KEY,
  context: { userId: '123' },
})

Server-side (Node.js)

# .env
DARKFEATURE_API_KEY=1234567890abcdef1234567890abcdef
const client = new DarkFeatureClient({
  apiKey: process.env.DARKFEATURE_API_KEY,
  context: { userId: '123' },
})

Step 10: Advanced Usage

Multiple Features

// Get multiple features at once
const features = await client.getFeatures({
  features: {
    'new-navigation': false,
    'dark-mode': false,
    'premium-features': false,
  },
  context: { userId: '123' },
})
 
console.log('Features:', features)
// { 'new-navigation': true, 'dark-mode': false, 'premium-features': true }

Context Override

// Override context for a specific request
const isEnabled = await client.getFeature('premium-features', {
  fallback: false,
  context: { plan: 'premium' },
})

Error Handling

try {
  const isEnabled = await client.getFeature('new-navigation', {
    fallback: false,
  })
  // Use feature
} catch (error) {
  console.error('Feature flag error:', error)
  // Fallback to default behavior
  showDefaultNavigation()
}

Next Steps

Explore Code Examples

Advanced Features

Troubleshooting

Feature Flag Not Working

  1. Verify your API key is correct (32 characters, no prefixes)
  2. Check that the feature flag name matches exactly
  3. Ensure the code example is properly initialized
  4. Verify the feature is enabled in the dashboard

Code Example Not Initializing

Problem: Code example initialization fails or times out

Solutions:

  1. Check your internet connection
  2. Verify the API key format (32 characters)
  3. Ensure you’re using the correct environment
  4. Check browser console for error messages

Feature Changes Not Reflecting

Problem: Feature flag changes don’t appear immediately

Solutions:

  1. Wait a few seconds for propagation
  2. Check if caching is enabled
  3. Verify the feature is saved in the dashboard
  4. Try refreshing the page or clearing cache

API Key Issues

Problem: “Invalid API key” or “Unauthorized” errors

Solutions:

  1. Ensure the API key is exactly 32 characters
  2. Remove any prefixes or suffixes
  3. Copy the key from the dashboard without extra spaces
  4. Verify you’re using the correct environment’s key

Need Help?

  • Documentation: Browse our comprehensive guides
  • Community: Join our community forum
  • Support: Contact our support team
  • Email: [email protected]
Last updated on
IntroductionOverview