feat: add ConfigCat to playground (#379)

## This PR
- Adds ConfigCat's OpenFeature providers to the playground demo app.

---------

Signed-off-by: Peter Csajtai <peter.csajtai@outlook.com>

.env.example

@@ -28,6 +28,9 @@ FLAGSMITH_ENV_KEY=
 # Harness SDK Key
 HARNESS_KEY=
 
+# ConfigCat SDK Key
+CONFIGCAT_SDK_KEY=
+
 ###############################################
 ##
 ## Feature Flag SDK keys (web)
@@ -59,4 +62,7 @@ FLAGD_PORT_WEB=
 
 # Determines if TLS (https) should be used
 # @default false
-FLAGD_TLS_WEB=
+FLAGD_TLS_WEB=
+
+# ConfigCat SDK Key
+CONFIGCAT_SDK_KEY_WEB=

README.md

@@ -29,6 +29,7 @@ If you're brand new to feature flagging, consider reviewing the [What are featur
   - [LaunchDarkly](#launchdarkly)
   - [Flagsmith](#flagsmith)
   - [Flipt](#flipt)
+  - [ConfigCat](#configcat)
 - [Experimenting beyond the demo](#experimenting-beyond-the-demo)
   - [Evaluation context](#evaluation-context)
 - [Troubleshooting](#troubleshooting)
@@ -428,6 +429,38 @@ It's easy to set up, has no seat limits, and is built for developers from scale-
 
 After [starting the demo](#how-to-run-the-demo), the Flipt UI is available at [http://localhost:8080](http://localhost:8080).
 
+### ConfigCat
+
+[ConfigCat](https://configcat.com/) is a user-friendly, scalable and secure feature flagging solution with clear [pricing](https://configcat.com/#pricing). ConfigCat allows for unlimited team members and MAUs across all plans, including the free tier. All ConfigCat plans come with all security measures, including audit logs, two-factor authentication, SSO, SAML and SCIM for secure feature management. ConfigCat offers users the choice to keep data within the EU to comply with GDPR more easily. ConfigCat provides SDKs for all major programming languages and platforms.
+
+<details>
+  <summary>Follow these steps to set up ConfigCat for the demo:</summary>
+
+1. Sign in to your ConfigCat account. If you don't already have an account, you can [sign up](https://app.configcat.com/auth/signup) for free.
+1. Create a new feature flag with the key `new-welcome-message`.
+
+    <img src="./images/configcat/new-welcome-message.png">
+
+1. Create a new text setting with the key `hex-color`. Add three percentage options (`+ %` button) with the following values: `c05543`, `2f5230`, and `0d507b`. Set `c05543` to 100%. Set the `To unindentified` value to `c05543`.
+
+    <img src="./images/configcat/hex-color.png">
+
+1. Create a new text setting with the key `fib-algo`. 
+   - Add a targeting rule (`+ IF` button) that looks for the `Email` user attribute to end with `@faas.com` and serves `binet`.
+   - Add five percentage options (`+ %` button) with the following values: `recursive`, `memo`, `loop`, `binet`, and `default`. Set `recursive` to 100%. 
+   - Set the `To unindentified` value to `default`.
+
+    <img src="./images/configcat/fib-algo.png">
+
+1. Click on `VIEW SDK KEY` and copy the `SDK Key`.
+
+    <img src="./images/configcat/sdk-key.png">
+
+1. Open the `.env` file and set the values of `CONFIGCAT_SDK_KEY` and `CONFIGCAT_SDK_KEY_WEB` to the key copied above.
+
+Now that everything is configured, you should be able to [start the demo](#how-to-run-the-demo). Once it's started, select `configcat` from the provider list located at the bottom right of your screen. You should now be able to control the demo app via ConfigCat!
+</details>
+
 ## Experimenting beyond the demo
 
 ### Evaluation context

docker-compose.yaml

@@ -38,6 +38,7 @@ services:
       - LD_KEY
       - FLAGSMITH_ENV_KEY
       - CLOUDBEES_APP_KEY
+      - CONFIGCAT_SDK_KEY
       ## Web
       - HARNESS_KEY_WEB
       - SPLIT_KEY_WEB
@@ -46,7 +47,8 @@ services:
       - CLOUDBEES_APP_KEY_WEB
       - FLAGD_HOST_WEB
       - FLAGD_PORT_WEB
-      - FLAGD_TLS_WEB
+      - FLAGD_TLS_WEB      
+      - CONFIGCAT_SDK_KEY_WEB
 
   fib-service:
     image: ghcr.io/open-feature/playground-fib-service:v0.16.0 # x-release-please-version
@@ -74,6 +76,7 @@ services:
       - LD_KEY
       - FLAGSMITH_ENV_KEY
       - CLOUDBEES_APP_KEY
+      - CONFIGCAT_SDK_KEY
 
   jaeger:
     image: jaegertracing/all-in-one:1.60

package.json

@@ -23,6 +23,8 @@
     "@nestjs/core": "10.4.1",
     "@nestjs/platform-express": "10.4.1",
     "@nestjs/serve-static": "^4.0.2",
+    "@openfeature/config-cat-web-provider": "^0.1.3",
+    "@openfeature/config-cat-provider": "^0.7.2",
     "@openfeature/env-var-provider": "^0.3.0",
     "@openfeature/flagd-provider": "^0.13.0",
     "@openfeature/flagd-web-provider": "^0.7.0",
@@ -142,6 +144,9 @@
   "overrides": {
     "braces": ">=3.0.3",
     "ws": ">=8.17.1",
-    "@grpc/grpc-js": ">=1.10.9"
+    "@grpc/grpc-js": ">=1.10.9",
+    "@openfeature/config-cat-provider": {
+      "@openfeature/server-sdk": "1.13.4"
+    }
   }
 }

packages/provider/src/lib/provider.service.ts

@@ -15,6 +15,7 @@ import { OpenFeatureLogger } from '@openfeature/extra';
 import {
   AvailableProvider,
   CB_PROVIDER_ID,
+  CONFIGCAT_PROVIDER_ID,
   ENV_PROVIDER_ID,
   FLAGD_OFREP_PROVIDER_ID,
   FLAGD_PROVIDER_ID,
@@ -28,6 +29,8 @@ import {
 } from '@openfeature/utils';
 import { OFREPProvider } from '@openfeature/ofrep-provider';
 import { FliptProvider } from '@openfeature/flipt-provider';
+import { ConfigCatProvider } from '@openfeature/config-cat-provider';
+import { PollingMode } from 'configcat-node';
 
 type ProviderMap = Record<
   ProviderId,
@@ -171,6 +174,18 @@ export class ProviderService {
       available: () => !!process.env.FLIPT_URL,
       url: process.env.FLIPT_WEB_URL,
     },
+    [CONFIGCAT_PROVIDER_ID]: {
+      factory: () => {
+        const sdkKey = process.env.CONFIGCAT_SDK_KEY;
+        if (!sdkKey) {
+          throw new Error('"CONFIGCAT_SDK_KEY" must be defined.');
+        } else {
+          return ConfigCatProvider.create(sdkKey, PollingMode.AutoPoll, { pollIntervalSeconds: 5 });
+        }
+      },
+      available: () => !!process.env.CONFIGCAT_SDK_KEY && !!process.env.CONFIGCAT_SDK_KEY_WEB,
+      webCredential: process.env.CONFIGCAT_SDK_KEY_WEB,
+    },
   };
 
   constructor() {

packages/ui/src/app/demos.tsx

@@ -3,6 +3,7 @@ import { FlagdWebProvider } from '@openfeature/flagd-web-provider';
 import {
   AvailableProvider,
   CB_PROVIDER_ID,
+  CONFIGCAT_PROVIDER_ID,
   FLAGD_OFREP_PROVIDER_ID,
   FLAGD_PROVIDER_ID,
   FLAGSMITH_PROVIDER_ID,
@@ -35,6 +36,7 @@ import { JSON_UPDATED } from './types';
 import { getData } from './utils';
 import { GoFeatureFlagWebProvider } from '@openfeature/go-feature-flag-web-provider';
 import { FliptWebProvider } from '@openfeature/flipt-web-provider';
+import { ConfigCatWebProvider } from '@openfeature/config-cat-web-provider';
 
 type ProviderMap = Record<
   string,
@@ -138,6 +140,11 @@ export class Demos extends Component<
         return new FliptWebProvider('default', { url: fliptConfig?.url });
       },
     },
+    [CONFIGCAT_PROVIDER_ID]: {
+      factory: () => {
+        return ConfigCatWebProvider.create(this.getProviderCredential(CONFIGCAT_PROVIDER_ID), { pollIntervalSeconds: 5 });
+      },
+    },
   };
 
   constructor(props: Record<string, never>) {

packages/utils/src/lib/types.ts

@@ -9,6 +9,7 @@ export const CB_PROVIDER_ID = 'cloudbees';
 export const FLAGSMITH_PROVIDER_ID = 'flagsmith';
 export const HARNESS_PROVIDER_ID = 'harness';
 export const FLIPT_PROVIDER_ID = 'flipt';
+export const CONFIGCAT_PROVIDER_ID = 'configcat';
 
 export type ProviderId =
   | typeof ENV_PROVIDER_ID
@@ -21,7 +22,8 @@ export type ProviderId =
   | typeof CB_PROVIDER_ID
   | typeof FLAGSMITH_PROVIDER_ID
   | typeof HARNESS_PROVIDER_ID
-  | typeof FLIPT_PROVIDER_ID;
+  | typeof FLIPT_PROVIDER_ID  
+  | typeof CONFIGCAT_PROVIDER_ID;
 
 export interface AvailableProvider {
   id: ProviderId;