This is a silly e-commerce demo app called ToggleShop. The purpose of the demo is to experiment with new OpenFeature functionality in an app that mimics real-world use cases.
The demo app is completely self-contained but can be configured to send telemetry to an OTLP compatible endpoint.
Follow these steps to get up and running:
- install dependencies:
npm install - configure OTLP export (optional):
- copy env:
cp .env.example .env.local - update
.env.localwith OTLP information
- copy env:
- start the app:
npm run dev
Open http://localhost:3000 with your browser to see the result.
ToggleShop leverages a number of feature flags for various technical and business-related use cases.
| Feature Flag | Type | Default Variant | Variants |
|---|---|---|---|
| offer-free-shipping | boolean | on | on, off |
| sticky-header | boolean | off | on, off |
| use-distributed-db | boolean | off | on, off |
| use-secure-protocol | boolean | off | on, off |
The flag configuration for local development can be found here.
The offer-free-shipping flag controls a banner on the landing page that teases free shipping on orders over $50.
The flag is also used on the checkout page to calculate the total cost.
The purpose of this flag is to demo using a client-side feature flag with the React SDK.
It's also pairs nicely with the event tracking to calculate the business impact.
The use-distributed-db flag controls which database is used to fetch the list of products.
The databases themselves are mocked for simplicity and have the following characteristics.
The SQLite database offers low latency but do not support concurrent access.
The Postgres database is the inverse.
It offers slightly higher latency but supports concurrent requests.
The use-secure-protocol flag is only evaluated when use-distributed-db is set to true.
It simulates a connection issue with one of the four nodes.
The ToggleShop team has noticed that SQLite isn't able to keep up with demand. To remedy the situation, they've decided to switch to Postgres. A feature flag is used to ensure a smooth transition.
To simulate the migration yourself, follow these steps:
- configure OTLP export (see getting started)
- start the load generator:
make run-load-gen - observe the logs and metrics
- update the
use-distributed-dbflag fractional distribution to be["true", 25]and["false", 75]in the flags.json. - observe the logs and metrics.
- update the
use-distributed-dbflag fractional distribution to be["true", 50]and["false", 50]in the flags.json. - observe the logs and metrics.
- update the
use-distributed-dbflag fractional distribution to be["true", 75]and["false", 25]in the flags.json. - observe the logs and metrics.
- update the
use-distributed-dbflag fractional distribution to be["true", 100]and["false", 0]in the flags.json. - observe the logs and metrics.
If all goes well, you should see the migration complete without any issues.
To run the ToggleShop in a Kind cluster:
Create the cluster with the supplied definition:
kind create cluster --config kubernetes/cluster.yamlInstall cert manager in the cluster (required for the OpenFeature operator):
kubectl apply -f https://github.com/cert-manager/cert-manager/releases/download/v1.13.2/cert-manager.yaml && kubectl wait --timeout=60s --for condition=Available=True deploy --all -n 'cert-manager'Install the nginx controller:
kubectl apply -f https://raw.githubusercontent.com/kubernetes/ingress-nginx/main/deploy/static/provider/kind/deploy.yaml && kubectl wait --timeout=60s --for condition=Available=True deploy --all -n 'ingress-nginx'Install the OpenFeature operator:
helm repo add openfeature https://open-feature.github.io/open-feature-operator/ && helm repo update && helm upgrade --install open-feature-operator openfeature/open-feature-operatorDeploy the ToggleShop and supporting infrastructure:
kubectl -n default apply -f kubernetes/toggle-shop.yaml && kubectl wait --timeout=60s deployment --for condition=Available=True -l 'app=toggle-shop' -n 'default'