example of how to use GO Feature Flag web provider (#1081)

.github/dependabot.yml

@@ -59,3 +59,23 @@ updates:
     labels:
       - "dependencies"
       - "automerge"
+
+  - package-ecosystem: npm
+    directory: "/examples/openfeature_web/webapp"
+    schedule:
+      interval: weekly
+      time: "01:00"
+    open-pull-requests-limit: 30
+    labels:
+      - "dependencies"
+      - "automerge"
+
+  - package-ecosystem: npm
+    directory: "/examples/openfeature_nodejs/nodejs-app"
+    schedule:
+      interval: weekly
+      time: "01:00"
+    open-pull-requests-limit: 30
+    labels:
+      - "dependencies"
+      - "automerge"

examples/openfeature_web/.gitignore

@@ -0,0 +1 @@
+!goff-proxy.yaml

examples/openfeature_web/README.md

@@ -0,0 +1,20 @@
+# GO Feature Flag web integration
+This example shows how to use GO Feature Flag in your web application using the Openfeature web SDK and the GO Feature Flag web provider.
+
+## How to start the example?
+```bash
+docker compose up
+```
+
+It will start `thomaspoignant/go-feature-flag` docker image and build the web application located in the `webapp` directory.
+
+When ready you can access to the application at http://localhost:3000/.
+
+## What this example does?
+It uses the Openfeature Web SDK and the GO Feature Flag web provider.
+
+The configuration of the server is in the `goff-proxy.yaml` file and it loads the flag configuration from the `config.goff.yaml` file.
+
+You can look at the file [`src/js/main.js`](src/js/main.js) to look how we retrieve the flags and we change the display of the page.
+
+At any moment during the demo you can edit the `config.goff.yaml` file and see how it changes the behaviors of the application.

examples/openfeature_web/config.goff.yaml

@@ -0,0 +1,22 @@
+badge-title:
+  variations:
+    authentified: 'Authenticated'
+    anonymous: 'Anonymous'
+    premium: 'Premium User'
+  targeting:
+    - query: premium eq true
+      variation: premium
+    - query: anonymous eq false
+      variation: authentified
+  defaultRule:
+    variation: anonymous
+
+beta:
+  variations:
+    beta: true
+    default: false
+  targeting:
+    - query: beta eq true
+      variation: beta
+  defaultRule:
+    variation: default

examples/openfeature_web/docker-compose.yaml

@@ -0,0 +1,17 @@
+version: '3'
+services:
+  gofeatureflag:
+    image: thomaspoignant/go-feature-flag
+    ports:
+      - "1031:1031"
+    volumes:
+      - type: bind
+        source: ./
+        target: /goff/
+
+  webapp:
+    build: webapp/.
+    ports:
+      - "3000:3000"
+    depends_on:
+      - gofeatureflag

examples/openfeature_web/goff-proxy.yaml

@@ -0,0 +1,5 @@
+listen: 1031
+pollingInterval: 1000
+retriever:
+    kind: file
+    path: /goff/config.goff.yaml

examples/openfeature_web/webapp/.babelrc

@@ -0,0 +1,6 @@
+{
+    "presets": ["@babel/preset-env"],
+    "plugins": [
+        "transform-class-properties"
+    ]
+}

examples/openfeature_web/webapp/.dockerignore

@@ -0,0 +1,2 @@
+node_modules
+npm-debug.log

examples/openfeature_web/webapp/.eslintrc

@@ -0,0 +1,22 @@
+{
+    "env": {
+        "browser": true,
+        "es6": true
+    },
+    "extends": "eslint:recommended",
+    "globals": {
+        "Atomics": "readonly",
+        "SharedArrayBuffer": "readonly"
+    },
+    "parser": "@babel/eslint-parser",
+    "parserOptions": {
+        "requireConfigFile":false,
+        "ecmaVersion": 2018,
+        "sourceType": "module",
+        "allowImportExportEverywhere": true
+    },
+    "rules": {
+        "semi": ["error", "always"],
+        "quotes": ["error", "single"]
+    }
+}

examples/openfeature_web/webapp/.stylelintrc

@@ -0,0 +1,5 @@
+"rules": {
+    "block-no-empty": true,
+    "color-hex-length": "short",
+    "color-no-invalid-hex": true,
+}

examples/openfeature_web/webapp/Dockerfile

@@ -0,0 +1,5 @@
+FROM node:20
+WORKDIR /usr/app
+COPY . .
+RUN npm install && npm run build
+CMD ["npm", "run", "serve:docker"]