TT-630 Removing use of keys.ts to store evironment variables (#859)

Author: nicolsss

.github/workflows/CD-time-tracker-ui.yml

@@ -35,8 +35,8 @@ jobs:
         STACK_EXCHANGE_ACCESS_TOKEN: ${{ secrets.stack_exchange_access_token }}
         AZURE_APP_CONFIGURATION_CONNECTION_STRING: ${{ secrets.azure_app_configuration_connection_string }}
       run: |
-        chmod +x ./scripts/populate-var-file.sh
-        sh ./scripts/populate-var-file.sh
+        chmod +x ./scripts/populate-keys.sh
+        sh ./scripts/populate-keys.sh
 
     - name: 'run: npm install and build'
       run: |

.github/workflows/CI-time-tracker-ui.yml

@@ -48,11 +48,16 @@ jobs:
         STACK_EXCHANGE_ACCESS_TOKEN: ${{ secrets.STACK_EXCHANGE_ACCESS_TOKEN }}
         AZURE_APP_CONFIGURATION_CONNECTION_STRING: ${{ secrets.AZURE_APP_CONFIGURATION_CONNECTION_STRING }}
       run: |
-        chmod +x ./scripts/populate-var-file.sh
-        sh ./scripts/populate-var-file.sh
+        chmod +x ./scripts/populate-keys.sh
+        sh ./scripts/populate-keys.sh
 
     - name: Running tests
-      run: npm run ci-test --if-present
+      run: |
+        set -a
+        source .env
+        set +a
+        npm run ci-test --if-present
+        rm .env
 
     - name: Generate coverage report
       env:

Dockerfile

@@ -43,13 +43,13 @@ USER ${USERNAME}
 RUN npm cache clean --force && npm install
 EXPOSE 4200
 EXPOSE 9876
-CMD npm run config && ${HOME}/time-tracker-ui/node_modules/.bin/ng serve --host 0.0.0.0 --disableHostCheck
+CMD ${HOME}/time-tracker-ui/node_modules/.bin/ng serve --host 0.0.0.0 --disableHostCheck
 
 
 
 FROM development as build
 COPY .env .
-RUN npm run config && npm run build
+RUN npm run build
 
 
 

package.json

@@ -2,7 +2,6 @@
   "name": "time-tracker",
   "version": "1.72.6",
   "scripts": {
-    "config": "ts-node ./scripts/setenv.ts",
     "preinstall": "npx npm-force-resolutions",
     "ng": "ng",
     "start": "ng serve",

scripts/populate-keys.sh

@@ -1,10 +1,10 @@
 #!/bin/bash
 
 > .env
-echo 'AUTHORITY = '$AUTHORITY'' >> .env
-echo 'CLIENT_ID = '$CLIENT_ID'' >> .env
-echo 'SCOPES = '$SCOPES'' >> .env
-echo 'STACK_EXCHANGE_ID = '$STACK_EXCHANGE_ID'' >> .env
-echo 'STACK_EXCHANGE_ACCESS_TOKEN = '$STACK_EXCHANGE_ACCESS_TOKEN'' >> .env
-echo 'AZURE_APP_CONFIGURATION_CONNECTION_STRING = '$AZURE_APP_CONFIGURATION_CONNECTION_STRING'' >> .env
+echo "AUTHORITY='$AUTHORITY'" >> .env
+echo "CLIENT_ID='$CLIENT_ID'" >> .env
+echo "SCOPES='$SCOPES'" >> .env
+echo "STACK_EXCHANGE_ID='$STACK_EXCHANGE_ID'" >> .env
+echo "STACK_EXCHANGE_ACCESS_TOKEN='$STACK_EXCHANGE_ACCESS_TOKEN'" >> .env
+echo "AZURE_APP_CONFIGURATION_CONNECTION_STRING='$AZURE_APP_CONFIGURATION_CONNECTION_STRING'" >> .env
 cat .env

scripts/populate-var-file.sh

@@ -1,21 +1,20 @@
 // This file can be replaced during build by using the `fileReplacements` array.
 // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
 // The list of file replacements can be found in `angular.json`.
-import * as keys from './keys';
 
 export const environment = {
   production: false,
   timeTrackerApiUrl: 'http://localhost:7071/api',
   stackexchangeApiUrl: 'https://api.stackexchange.com',
 };
 
-export const AUTHORITY = keys.AUTHORITY;
-export const CLIENT_ID = keys.CLIENT_ID;
-export const SCOPES = keys.SCOPES;
+export const AUTHORITY = process.env["AUTHORITY"];
+export const CLIENT_ID = process.env["CLIENT_ID"];
+export const SCOPES = process.env["SCOPES"].split(",");
 export const ITEMS_PER_PAGE = 5;
-export const STACK_EXCHANGE_ID = keys.STACK_EXCHANGE_ID;
-export const STACK_EXCHANGE_ACCESS_TOKEN = keys.STACK_EXCHANGE_ACCESS_TOKEN;
-export const AZURE_APP_CONFIGURATION_CONNECTION_STRING = keys.AZURE_APP_CONFIGURATION_CONNECTION_STRING;
+export const STACK_EXCHANGE_ID = process.env["STACK_EXCHANGE_ID"];
+export const STACK_EXCHANGE_ACCESS_TOKEN = process.env["STACK_EXCHANGE_ACCESS_TOKEN"];
+export const AZURE_APP_CONFIGURATION_CONNECTION_STRING = process.env["AZURE_APP_CONFIGURATION_CONNECTION_STRING"];
 export const DATE_FORMAT = 'yyyy-MM-dd';
 export const DATE_FORMAT_YEAR = 'YYYY-MM-DD';
 export const GROUPS = {

scripts/setenv.ts

@@ -1,11 +1,25 @@
+const webpack = require('webpack')
 const { addTailwindPlugin } = require("@ngneat/tailwind");
 const tailwindConfig = require("./tailwind.config.js");
-
 module.exports = (config) => {
+  const config_ = {
+    ...config,
+    plugins : [
+      ...config.plugins,
+      new webpack.DefinePlugin({
+        'process.env.AUTHORITY': JSON.stringify(process.env["AUTHORITY"]),
+        'process.env.CLIENT_ID':JSON.stringify(process.env["CLIENT_ID"]),
+        'process.env.SCOPES':JSON.stringify(process.env["SCOPES"]),
+        'process.env.STACK_EXCHANGE_ID':JSON.stringify(process.env["STACK_EXCHANGE_ID"]),
+        'process.env.STACK_EXCHANGE_ACCESS_TOKEN':JSON.stringify(process.env["STACK_EXCHANGE_ACCESS_TOKEN"]),
+        'process.env.AZURE_APP_CONFIGURATION_CONNECTION_STRING':JSON.stringify(process.env["AZURE_APP_CONFIGURATION_CONNECTION_STRING"])
+    })
+  ]
+  }
   addTailwindPlugin({
-    webpackConfig: config,
+    webpackConfig: config_,
     tailwindConfig,
     patchComponentsStyles: true
   });
-  return config;
+  return config_;
 };