Remote Config Setup for Dynamic Website Parameter Management

Remote Config and Dynamic Parameters Setup

Remote Config allows changing application behavior without deployment: adjust limits, texts, thresholds, enable/disable features — via web interface, in real-time.

Firebase Remote Config

npm install firebase

// lib/remoteConfig.ts
import { initializeApp } from 'firebase/app';
import { getRemoteConfig, fetchAndActivate, getValue } from 'firebase/remote-config';

const app = initializeApp({
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
});

const remoteConfig = getRemoteConfig(app);
remoteConfig.settings.minimumFetchIntervalMillis = 300_000; // 5 minutes

// Default values — work until first fetch
remoteConfig.defaultConfig = {
  maintenance_mode: false,
  max_upload_size_mb: 10,
  welcome_banner_text: 'Welcome!',
  new_dashboard_enabled: false,
  max_api_calls_per_minute: 60,
};

export async function initRemoteConfig() {
  await fetchAndActivate(remoteConfig);
}

export function getConfig<T>(key: string): T {
  const value = getValue(remoteConfig, key);
  // Automatically determine type
  if (typeof remoteConfig.defaultConfig[key] === 'boolean') {
    return value.asBoolean() as T;
  }
  if (typeof remoteConfig.defaultConfig[key] === 'number') {
    return value.asNumber() as T;
  }
  return value.asString() as T;
}

// Usage in components
'use client';
import { useEffect, useState } from 'react';
import { getConfig, initRemoteConfig } from '@/lib/remoteConfig';

export function UploadButton() {
  const [maxSize, setMaxSize] = useState(10);
  const [newDashboard, setNewDashboard] = useState(false);

  useEffect(() => {
    initRemoteConfig().then(() => {
      setMaxSize(getConfig<number>('max_upload_size_mb'));
      setNewDashboard(getConfig<boolean>('new_dashboard_enabled'));
    });
  }, []);

  return (
    <>
      <input type="file" accept={`*/*`} />
      <span>Maximum {maxSize} MB</span>
      {newDashboard && <NewDashboardBanner />}
    </>
  );
}

Self-hosted: LaunchDarkly Alternative via Flagsmith

# Docker Compose
services:
  flagsmith:
    image: flagsmith/flagsmith:latest
    environment:
      DATABASE_URL: postgresql://flagsmith:secret@db/flagsmith
    ports:
      - "8000:8000"

// Flagsmith SDK
import Flagsmith from 'flagsmith-nodejs';

const flagsmith = new Flagsmith({
  environmentKey: process.env.FLAGSMITH_ENV_KEY!,
  enableLocalEvaluation: true, // server-side cache
  environmentRefreshIntervalSeconds: 60,
});

// Server-side — considering user
async function getConfig(userId: string, userPlan: string) {
  const flags = await flagsmith.getIdentityFlags(userId, {
    plan: userPlan,
    country: 'US',
  });

  return {
    maxUploadSizeMb: flags.getFeatureValue('max_upload_size_mb', 10),
    betaFeatures: flags.isFeatureEnabled('beta_features'),
    apiRateLimit: flags.getFeatureValue('api_rate_limit', 100),
  };
}

Custom Remote Config via API

For simple cases — own implementation with caching:

// Config storage in DB
// config table: key (varchar), value (jsonb), updated_at

// API endpoint
// GET /api/config → returns current parameters

// Server-side caching
import { unstable_cache } from 'next/cache';

const getRemoteConfig = unstable_cache(
  async () => {
    const configs = await db.config.findMany();
    return Object.fromEntries(configs.map(c => [c.key, c.value]));
  },
  ['remote-config'],
  { revalidate: 300 } // 5 minutes
);

// Cache invalidation on update
async function updateConfig(key: string, value: unknown) {
  await db.config.upsert({
    where: { key },
    create: { key, value },
    update: { value, updatedAt: new Date() },
  });

  // Invalidate cache
  revalidateTag('remote-config');
}

Typical Remote Config Parameters

interface AppConfig {
  // Feature flags
  newCheckoutEnabled: boolean;
  maintenanceMode: boolean;
  betaBannersEnabled: boolean;

  // Limits
  maxUploadSizeMb: number;
  apiRateLimitPerMinute: number;
  maxProjectsPerAccount: number;

  // Texts and UI
  announcementBannerText: string;
  announcementBannerEnabled: boolean;
  supportEmail: string;

  // Business parameters
  trialDurationDays: number;
  freeStorageGb: number;
  minPasswordLength: number;
}

Conditional targeting — different values for different users:

• Beta users get newCheckoutEnabled: true
• Pro accounts — maxUploadSizeMb: 100 instead of 10
• Administrators — maintenanceMode not applied

Firebase Remote Config or Flagsmith setup with application integration — 1–2 working days.