Revert "TT-630 Removing use of keys.ts to store evironment variables (#…

…859)" (#865)

This reverts commit e4e4838.

.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-keys.sh
-        sh ./scripts/populate-keys.sh
+        chmod +x ./scripts/populate-var-file.sh
+        sh ./scripts/populate-var-file.sh
 
     - name: 'run: npm install and build'
       run: |

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

@@ -48,16 +48,11 @@ 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-keys.sh
-        sh ./scripts/populate-keys.sh
+        chmod +x ./scripts/populate-var-file.sh
+        sh ./scripts/populate-var-file.sh
 
     - name: Running tests
-      run: |
-        set -a
-        source .env
-        set +a
-        npm run ci-test --if-present
-        rm .env
+      run: npm run ci-test --if-present
 
     - name: Generate coverage report
       env:

Dockerfile

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

package.json

@@ -2,6 +2,7 @@
   "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

@@ -0,0 +1,10 @@
+#!/bin/bash
+
+> src/environments/keys.ts
+echo 'export const AUTHORITY = "'$AUTHORITY'";' >> src/environments/keys.ts
+echo 'export const CLIENT_ID = "'$CLIENT_ID'";' >> src/environments/keys.ts
+echo 'export const SCOPES = ["'$SCOPES'"];' >> src/environments/keys.ts
+echo 'export const STACK_EXCHANGE_ID = "'$STACK_EXCHANGE_ID'";' >> src/environments/keys.ts
+echo 'export const STACK_EXCHANGE_ACCESS_TOKEN = "'$STACK_EXCHANGE_ACCESS_TOKEN'";' >> src/environments/keys.ts
+echo 'export const AZURE_APP_CONFIGURATION_CONNECTION_STRING = "'$AZURE_APP_CONFIGURATION_CONNECTION_STRING'";' >> src/environments/keys.ts
+cat src/environments/keys.ts

scripts/setenv.ts

@@ -0,0 +1,33 @@
+const { writeFile } = require('fs');
+
+const pathJs = `./src/environments/keys.ts`
+const contentKeys =
+`export const AUTHORITY = '${process.env["AUTHORITY"]}';
+export const CLIENT_ID = '${process.env["CLIENT_ID"]}';
+export const SCOPES = ['${process.env["SCOPES"]}'];
+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"]}';
+`;
+
+writeFile(pathJs, contentKeys, function (err) {
+    if (err) {
+        console.log(err);
+    }
+    console.log(`Wrote variables to ${pathJs}`);
+});
+
+const pathJson = `./src/environments/.keys.json`
+const contentKeysJson =
+`{
+    "authority": "${process.env.AUTHORITY_JSON}",
+    "client_id": "${process.env.CLIENT_ID_JSON}",
+    "scopes": ["${process.env.SCOPES_JSON}"]
+}`;
+
+writeFile(pathJson, contentKeysJson, function (err) {
+    if (err) {
+        console.log(err);
+    }
+    console.log(`Wrote variables to ${pathJson}`);
+});

src/environments/environment.ts

@@ -1,20 +1,21 @@
 // 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 = process.env["AUTHORITY"];
-export const CLIENT_ID = process.env["CLIENT_ID"];
-export const SCOPES = process.env["SCOPES"].split(",");
+export const AUTHORITY = keys.AUTHORITY;
+export const CLIENT_ID = keys.CLIENT_ID;
+export const SCOPES = keys.SCOPES;
 export const ITEMS_PER_PAGE = 5;
-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 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 DATE_FORMAT = 'yyyy-MM-dd';
 export const DATE_FORMAT_YEAR = 'YYYY-MM-DD';
 export const GROUPS = {

webpack.config.js

@@ -1,25 +1,11 @@
-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;
 };