Update Front end env vars to have better naming convention (#297)

* Update envs vars

* Remove logs

* Corrected STATIC_ASSET_CDN_URL

* InfluxDB options

* updated API url

* Dont promote appengine

Co-authored-by: Ben Rometsch <ben.rometsch@gmail.com>
Co-authored-by: Ben Rometsch <ben.rometsch@flagsmith.com>

.github/workflows/frontend-deploy-production.yml

@@ -62,22 +62,22 @@ jobs:
 
             - name: Deploy to App Engine
               env:
-                  ASSET_URL: https://cdn.flagsmith.com
+                  STATIC_ASSET_CDN_URL: https://cdn.flagsmith.com
                   ENV: prod
-                  AMPLITUDE: ${{ secrets.AMPLITUDE }}
-                  CRISP_CHAT: ${{ secrets.CRISP_CHAT }}
+                  AMPLITUDE_API_KEY: ${{ secrets.AMPLITUDE_API_KEY }}
+                  CRISP_WEBSITE_ID: ${{ secrets.CRISP_WEBSITE_ID }}
                   DEPLOYMENT_SLACK_CHANNEL: ${ secrets.DEPLOYMENT_SLACK_CHANNEL }}
                   E2E_SLACK_CHANNEL: ${{ secrets.E2E_SLACK_CHANNEL }}
                   EVENTS_SLACK_CHANNEL: ${{ secrets.EVENTS_SLACK_CHANNEL }}
-                  FLAGSMITH_ANALYTICS: ${{ secrets.FLAGSMITH_ANALYTICS }}
+                  ENABLE_FLAG_EVALUATION_ANALYTICS: ${{ secrets.ENABLE_FLAG_EVALUATION_ANALYTICS }}
+                  GOOGLE_ANALYTICS_API_KEY: ${{ secrets.GOOGLE_ANALYTICS_API_KEY }}
                   CAPTERRA_API_KEY: ${{ secrets.CAPTERRA_API_KEY }}
-                  GA: ${{ secrets.GA }}
                   LINKEDIN: ${{ secrets.LINKEDIN }}
-                  MIXPANEL: ${{ secrets.MIXPANEL }}
+                  MIXPANEL_API_KEY: ${{ secrets.MIXPANEL_API_KEY }}
                   SLACK_TOKEN: ${{ secrets.SLACK_TOKEN }}
               run: |
                   npm i
                   npm run env
                   npm run dotenv
                   npm run bundle
-                  gcloud app deploy --quiet
+                  gcloud app deploy --quiet --no-promote

.github/workflows/frontend-deploy-staging.yml

@@ -37,7 +37,7 @@ jobs:
 
             - name: Deploy to App Engine
               env:
-                  ASSET_URL: https://staging.flagsmith.com
+                  STATIC_ASSET_CDN_URL: https://staging.flagsmith.com
                   ENV: staging
               run: |
                   npm i

.github/workflows/platform-pull-request.yml

@@ -46,7 +46,7 @@ jobs:
               env:
                   ENV: local
                   E2E_TEST_TOKEN_DEV: some-token
-                  DISABLE_INFLUXDB_FEATURES: 1
+                  ENABLE_INFLUXDB_FEATURES: false
               run: |
                   wget -q https://dl.google.com/linux/chrome/deb/pool/main/g/google-chrome-stable/google-chrome-stable_91.0.4472.114-1_amd64.deb
                   sudo apt install --allow-downgrades -y ./google-chrome*.deb -f 

docker/docker-compose.yml

@@ -26,10 +26,10 @@ services:
         image: flagsmith/flagsmith-frontend:latest
         environment:
             # You might need to change the 2 host names below depending on your docker dns setup
-            API_URL: http://localhost:8000/api/v1/
-            ASSET_URL: http://localhost:8080/
-            DISABLE_INFLUXDB_FEATURES: 1 # Comment out to enable InfluxDB
-            FLAGSMITH: 4vfqhypYjcPoGGu8ByrBaj # This is the production Flagsmith API key
+            FLAGSMITH_API_URL: http://localhost:8000/api/v1/
+            STATIC_ASSET_CDN_URL: http://localhost:8080/
+            ENABLE_INFLUXDB_FEATURES: false # Comment out to enable InfluxDB
+            FLAGSMITH_ON_FLAGSMITH_API_KEY: 4vfqhypYjcPoGGu8ByrBaj # This is the production Flagsmith API key
         ports:
             - '8080:8080'
         links:

frontend/Dockerfile

@@ -11,7 +11,7 @@ COPY --chown=node:node . .
 
 RUN npm install --quiet --production
 ENV ENV=prod
-ENV ASSET_URL=/
+ENV STATIC_ASSET_CDN_URL=/
 RUN npm run bundle
 
 

frontend/Dockerfile.dev

@@ -11,7 +11,7 @@ COPY --chown=node:node . .
 
 RUN npm install --quiet
 ENV ENV prod
-ENV ASSET_URL=/
+ENV STATIC_ASSET_CDN_URL=/
 RUN npm run bundle
 
 

frontend/Dockerfile.ubi

@@ -5,7 +5,7 @@ COPY . .
 RUN pwd
 RUN npm install --production
 ENV ENV=prod
-ENV ASSET_URL=/
+ENV STATIC_ASSET_CDN_URL=/
 RUN npm run bundle
 
 

frontend/bin/env.js

@@ -2,48 +2,14 @@
  * Created by kylejohnson on 02/08/2016.
  */
 require('colors');
-const fs = require('fs');
+const fs = require('fs-extra');
 const path = require('path');
 
 const env = process.env.ENV || 'dev';
 const src = path.resolve(__dirname, `../env/project_${env}.js`);
-const overrideSrc = path.resolve(__dirname, '../web/static/project-overrides.js');
-const overrideTarget = path.resolve(__dirname, '../build/static/project-overrides.js');
 const target = path.resolve(__dirname, '../common/project.js');
-const buildDir = path.resolve(__dirname, '../build/static');
-const getVariable = ({ name, value }) => {
-    if (!value) {
-        return '';
-    }
-    return `    ${name}: '${value}',
-    `;
-};
 
-const values = [
-    { name: 'preventSignup', value: process.env.PREVENT_SIGNUP },
-    { name: 'flagsmith', value: process.env.FLAGSMITH },
-    { name: 'ga', value: process.env.GA },
-    { name: 'crispChat', value: process.env.CRISP_CHAT },
-    { name: 'mixpanel', value: process.env.MIXPANEL },
-    { name: 'sentry', value: process.env.SENTRY },
-    { name: 'api', value: process.env.API_URL },
-    { name: 'maintenance', value: process.env.MAINTENANCE },
-    { name: 'assetURL', value: process.env.ASSET_URL },
-    { name: 'flagsmithAnalytics', value: process.env.FLAGSMITH_ANALYTICS },
-    { name: 'capterraKey', value: process.env.CAPTERRA_API_KEY },
-    { name: 'flagsmithClientAPI', value: process.env.FLAGSMITH_CLIENT_API },
-    { name: 'amplitude', value: process.env.AMPLITUDE },
-];
-const output = values.map(getVariable).join('');
-const config = `window.projectOverrides = {
-    ${output}
-};
-`;
 
-fs.writeFileSync(overrideSrc, config);
+console.log(`Using project_${env}.js`.green);
 
-if (fs.existsSync(buildDir)) {
-    fs.copyFileSync(overrideSrc, overrideTarget);
-}
-
-fs.copyFileSync(src, target);
+fs.copySync(src, target);

frontend/bin/yaml-env.js

@@ -12,19 +12,18 @@ str += `
 env_variables:
   SLACK_TOKEN: ${process.env.SLACK_TOKEN}
   EVENTS_SLACK_CHANNEL: ${process.env.EVENTS_SLACK_CHANNEL}
-  FLAGSMITH: ${process.env.FLAGSMITH}
-  FLAGSMITH_ANALYTICS: ${process.env.FLAGSMITH_ANALYTICS}
+  FLAGSMITH_ON_FLAGSMITH_API_KEY: ${process.env.FLAGSMITH_ON_FLAGSMITH_API_KEY}
+  FLAGSMITH_ANALYTICS: ${process.env.ENABLE_FLAG_EVALUATION_ANALYTICS}
+  GOOGLE_ANALYTICS_API_KEY: ${process.env.GOOGLE_ANALYTICS_API_KEY}
+  CRISP_WEBSITE_ID: ${process.env.CRISP_WEBSITE_ID}
   CAPTERRA_API_KEY: ${process.env.CAPTERRA_API_KEY}
-  GA: ${process.env.GA}
-  CRISP_CHAT: ${process.env.CRISP_CHAT}
   LINKEDIN: ${process.env.LINKEDIN}
-  PREVENT_SIGNUP: ${process.env.PREVENT_SIGNUP}
-  MIXPANEL: ${process.env.MIXPANEL}
-  API_URL: ${process.env.API_URL}
-  AMPLITUDE: ${process.env.AMPLITUDE}
-  MAINTENANCE: ${process.env.MAINTENANCE}
-  ASSET_URL: ${process.env.ASSET_URL}
-  BASENAME: ${process.env.BASENAME}
+  ALLOW_SIGNUPS: ${process.env.ALLOW_SIGNUPS}
+  MIXPANEL: ${process.env.MIXPANEL_API_KEY}
+  FLAGSMITH_API_URL: ${process.env.FLAGSMITH_API_URL}
+  AMPLITUDE: ${process.env.AMPLITUDE_API_KEY}
+  ENABLE_MAINTENANCE_MODE: ${process.env.ENABLE_MAINTENANCE_MODE}
+  STATIC_ASSET_CDN_URL: ${process.env.STATIC_ASSET_CDN_URL}
 `;
 
 fs.writeFileSync(src, str);

frontend/docker-compose.production.yml

@@ -5,8 +5,8 @@ services:
         build:
             context: .
         environment:
-            - API_URL=http://localhost:8000/api/v1/
-            - ASSET_URL=http://localhost:8080/
+            - FLAGSMITH_API_URL=http://localhost:8000/api/v1/
+            - ASSET_STATIC_ASSET_CDN_URLURL=http://localhost:8080/
         ports:
             - '8080:8080'
         volumes:

frontend/docker-compose.yml

@@ -8,8 +8,8 @@ services:
             dockerfile: Dockerfile
         command: npm run dev
         environment:
-            - API_URL=http://localhost:8000/api/v1/
-            - ASSET_URL=http://localhost:8080/
+            - FLAGSMITH_API_URL=http://localhost:8000/api/v1/
+            - STATIC_ASSET_CDN_URL=http://localhost:8080/
         ports:
             - '8080:8080'
         volumes:

frontend/server/index.js

@@ -46,22 +46,30 @@ app.get('/static/project-overrides.js', (req, res) => {
         sha = fs.readFileSync(path.join(__dirname, 'CI_COMMIT_SHA'));
     }
 
+    const envToBool = (name, defaultVal) => {
+        const envVar = `${process.env[name]}`;
+        if (envVar === 'undefined') {
+            return defaultVal;
+        }
+        return envVar === 'true' || envVar === '1';
+    };
+
     const values = [
-        { name: 'preventSignup', value: process.env.PREVENT_SIGNUP },
-        { name: 'flagsmith', value: process.env.FLAGSMITH },
-        { name: 'ga', value: process.env.GA },
-        { name: 'crispChat', value: process.env.CRISP_CHAT },
+        { name: 'preventSignup', value: !envToBool('ALLOW_SIGNUPS', true) },
+        { name: 'flagsmith', value: process.env.FLAGSMITH_ON_FLAGSMITH_API_KEY },
+        { name: 'ga', value: process.env.GOOGLE_ANALYTICS_API_KEY },
+        { name: 'crispChat', value: process.env.CRISP_WEBSITE_ID },
         { name: 'sha', value: sha },
-        { name: 'mixpanel', value: process.env.MIXPANEL },
-        { name: 'sentry', value: process.env.SENTRY },
-        { name: 'api', value: process.env.PROXY_API_URL ? '/api/v1/' : process.env.API_URL },
-        { name: 'maintenance', value: process.env.MAINTENANCE },
-        { name: 'assetURL', value: process.env.ASSET_URL },
-        { name: 'flagsmithClientAPI', value: process.env.FLAGSMITH_CLIENT_API },
-        { name: 'disableInflux', value: process.env.DISABLE_INFLUXDB_FEATURES },
-        { name: 'flagsmithAnalytics', value: !!process.env.FLAGSMITH_ANALYTICS },
+        { name: 'mixpanel', value: process.env.MIXPANEL_API_KEY },
+        { name: 'sentry', value: process.env.SENTRY_API_KEY },
+        { name: 'api', value: process.env.FLAGSMITH_PROXY_API_URL ? '/api/v1/' : process.env.FLAGSMITH_API_URL },
+        { name: 'maintenance', value: process.env.ENABLE_MAINTENANCE_MODE },
+        { name: 'assetURL', value: process.env.STATIC_ASSET_CDN_URL },
+        { name: 'flagsmithClientAPI', value: process.env.FLAGSMITH_ON_FLAGSMITH_API_URL },
+        { name: 'disableInflux', value: !envToBool('ENABLE_INFLUXDB_FEATURES', true) },
+        { name: 'flagsmithAnalytics', value: envToBool('ENABLE_FLAG_EVALUATION_ANALYTICS', true) },
+        { name: 'amplitude', value: process.env.AMPLITUDE_API_KEY },
         { name: 'capterraKey', value: !!process.env.CAPTERRA_API_KEY },
-        { name: 'amplitude', value: process.env.AMPLITUDE },
     ];
     const output = values.map(getVariable).join('');
 
@@ -77,7 +85,7 @@ app.get('/static/project-overrides.js', (req, res) => {
 // e.g. PROXY_API_URL=http://api.flagsmith.com/
 if (process.env.PROXY_API_URL) {
     const { createProxyMiddleware } = require('http-proxy-middleware');
-    app.use('/api/v1/', createProxyMiddleware({ target: process.env.PROXY_API_URL, changeOrigin: true }));
+    app.use('/api/v1/', createProxyMiddleware({ target: process.env.FLAGSMITH_PROXY_API_URL, changeOrigin: true }));
 }
 
 if (isDev) { // Serve files from src directory and use webpack-dev-server

frontend/webpack/webpack.config.prod.js

@@ -42,7 +42,7 @@ module.exports = {
     output: {
         path: path.join(__dirname, '../build/static'),
         filename: '[name].[hash].js',
-        publicPath: url.resolve(process.env.ASSET_URL || Project.assetUrl || 'https://cdn.flagsmith.com', 'static/'),
+        publicPath: url.resolve(process.env.STATIC_ASSET_CDN_URL || Project.assetUrl || 'https://cdn.flagsmith.com', 'static/'),
     },
 
     plugins: require('./plugins')