Implement feature flag foundation in project (via Flagsmith)

config/common.js

@@ -35,6 +35,9 @@ export const build = {
   platform: 'browser',
   target: ['chrome58', 'firefox57', 'safari11', 'edge18'],
   logLevel: 'info',
+  define: {
+    'process.env.FLAGSMITH_API_KEY': JSON.stringify(process.env.FLAGSMITH_API_KEY),
+  },
   plugins: [
     progress(),
     svgrPlugin(),

package.json

@@ -34,6 +34,7 @@
     "@mui/styles": "^5.9.2",
     "@octokit/rest": "^19.0.3",
     "clsx": "^1.2.1",
+    "flagsmith": "^3.14.1",
     "normalize.css": "^8.0.1",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",

src/index.jsx

@@ -1,6 +1,8 @@
 import React from 'react'
 import {createRoot} from 'react-dom/client'
 import {BrowserRouter} from 'react-router-dom'
+import flagsmith from 'flagsmith'
+import {FlagsmithProvider} from 'flagsmith/react'
 import BaseRoutes from './BaseRoutes'
 
 
@@ -18,5 +20,10 @@ if (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test') {
 const root = createRoot(document.getElementById('root'))
 root.render(
     <BrowserRouter>
-      <BaseRoutes/>
+      <FlagsmithProvider
+        flagsmith={flagsmith}
+        options={{environmentID: process.env.FLAGSMITH_API_KEY}}
+      >
+        <BaseRoutes/>
+      </FlagsmithProvider>
     </BrowserRouter>)

yarn.lock

@@ -7665,6 +7665,11 @@ find-up@^5.0.0:
     locate-path "^6.0.0"
     path-exists "^4.0.0"
 
+flagsmith@^3.14.1:
+  version "3.14.1"
+  resolved "https://registry.yarnpkg.com/flagsmith/-/flagsmith-3.14.1.tgz#881158176a13610b817a873814a50158bdf0ab7f"
+  integrity sha512-ScseJ2Ne7UygL1KDPJOuOM8Znh7mQzg1l0eAt636JZWfKaIoBNgK5k3To4BOUnfseZhYEFOKQ41MlL/bAmxQ6g==
+
 flat-cache@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-3.0.4.tgz#61b0338302b2fe9f957dcc32fc2a87f1c3048b11"