add env vars for local development

Accounts/webpack.config.js

@@ -2,8 +2,9 @@ const path = require("path");
 const webpack = require("webpack");
 const dotenv = require('dotenv');
 const express = require('express');
+const axios = require('axios');
 
-const readEnvFile = (pathToFile) => {
+const readEnvFile = async (pathToFile) => {
 
     const parsed = dotenv.config({ path: pathToFile }).parsed;
 
@@ -13,66 +14,76 @@ const readEnvFile = (pathToFile) => {
         env[key] = JSON.stringify(parsed[key]);
     }
 
+    env['HOST'] = 'localhost' // use localhost for dev. 
+    env['USE_HTTPS'] = true; 
+
+    // Ping API and get respojse. 
+    const response = await axios.get(`http://localhost/api/`);
 
     return env;
 }
 
-module.exports = {
+const webpackConfig = async () => {
-    entry: "./src/Index.tsx",
+    return {
-    mode: "development",
+        entry: "./src/Index.tsx",
-    output: {
+        mode: "development",
-        filename: "bundle.js",
+        output: {
-        path: path.resolve(__dirname, "public", "dist"),
+            filename: "bundle.js",
-        publicPath: "/accounts/dist/",
+            path: path.resolve(__dirname, "public", "dist"),
-    },
+            publicPath: "/accounts/dist/",
-    resolve: {
-        extensions: ['.ts', '.tsx', '.js', '.jsx', '.json', '.css', '.scss'],
-        alias: {
-            react: path.resolve('./node_modules/react'),
-        }
-    },
-    externals: {
-        'react-native-sqlite-storage': 'react-native-sqlite-storage'
-    },
-    plugins: [
-        new webpack.DefinePlugin({
-            'process': {
-                'env': {
-                    ...readEnvFile('/usr/src/app/dev-env/.env')
-                }
-            }
-        }),
-    ],
-    module: {
-        rules: [
-            {
-                test: /\.(ts|tsx)$/,
-                use: 'ts-loader'
-            },
-            {
-                test: /\.s[ac]ss$/i,
-                use: ['style-loader', 'css-loader', "sass-loader"]
-            },
-            {
-                test: /\.css$/i,
-                use: ['style-loader', 'css-loader']
-            },
-            {
-                test: /\.(jpe?g|png|gif|svg)$/i,
-                loader: 'file-loader'
-            }
-        ],
-    },
-    devServer: {
-        historyApiFallback: true,
-        devMiddleware: {
-            writeToDisk: true,
         },
-        allowedHosts: "all",
+        resolve: {
-        setupMiddlewares: (middlewares, devServer) => {
+            extensions: ['.ts', '.tsx', '.js', '.jsx', '.json', '.css', '.scss'],
-            devServer.app.use('/accounts/assets', express.static(path.resolve(__dirname, 'public', 'assets')));
+            alias: {
-            return middlewares;
+                react: path.resolve('./node_modules/react'),
-        }
+            }
-    },
+        },
-    devtool: 'eval-source-map',
+        externals: {
-}
+            'react-native-sqlite-storage': 'react-native-sqlite-storage'
+        },
+        plugins: [
+            new webpack.DefinePlugin({
+                'process': {
+                    'env': {
+                        ...(await readEnvFile('/usr/src/app/dev-env/.env'))
+                    }
+                }
+            }),
+        ],
+        module: {
+            rules: [
+                {
+                    test: /\.(ts|tsx)$/,
+                    use: 'ts-loader'
+                },
+                {
+                    test: /\.s[ac]ss$/i,
+                    use: ['style-loader', 'css-loader', "sass-loader"]
+                },
+                {
+                    test: /\.css$/i,
+                    use: ['style-loader', 'css-loader']
+                },
+                {
+                    test: /\.(jpe?g|png|gif|svg)$/i,
+                    loader: 'file-loader'
+                }
+            ],
+        },
+        devServer: {
+            historyApiFallback: true,
+            devMiddleware: {
+                writeToDisk: true,
+            },
+            allowedHosts: "all",
+            setupMiddlewares: (middlewares, devServer) => {
+                devServer.app.use('/accounts/assets', express.static(path.resolve(__dirname, 'public', 'assets')));
+                return middlewares;
+            }
+        },
+        devtool: 'eval-source-map',
+    }
+};
+
+
+module.exports = webpackConfig;

AdminDashboard/webpack.config.js

@@ -13,6 +13,9 @@ const readEnvFile = (pathToFile) => {
         env[key] = JSON.stringify(parsed[key]);
     }
 
+    env['HOST'] = 'localhost' // use localhost for dev. 
+    env['USE_HTTPS'] = true; 
+
 
     return env;
 }

CommonUI/src/Config.ts

@@ -30,9 +30,9 @@ export const env: Function = (key: string): string => {
 };
 
 export const HTTP_PROTOCOL: Protocol = 
-    env('HTTP_PROTOCOL') === 'http' ? Protocol.HTTP : Protocol.HTTPS;
+    env('USE_HTTPS') === true ? Protocol.HTTP : Protocol.HTTPS;
 
-export const HOST: string = env('DOMAIN') || '';
+export const HOST: string = env('HOST') || '';
 
 export const BILLING_ENABLED: boolean = env('BILLING_ENABLED') === 'true';
 export const BILLING_PUBLIC_KEY: string = env('BILLING_PUBLIC_KEY') || '';

Dashboard/webpack.config.js

@@ -13,6 +13,8 @@ const readEnvFile = (pathToFile) => {
         env[key] = JSON.stringify(parsed[key]);
     }
 
+    env['HOST'] = 'localhost' // use localhost for dev. 
+    env['USE_HTTPS'] = true; 
 
     return env;
 }

StatusPage/webpack.config.js

@@ -13,6 +13,8 @@ const readEnvFile = (pathToFile) => {
         env[key] = JSON.stringify(parsed[key]);
     }
 
+    env['HOST'] = 'localhost' // use localhost for dev. 
+    env['USE_HTTPS'] = true; 
 
     return env;
 }