passing configuration through webpack

declaration.d.ts

@@ -1 +1,9 @@
 declare module "*.scss";
+declare var __CONFIG__: SettingType;
+
+type SettingType = {
+    apiUrl: string;
+    apiVersion: string;
+    ssl: string;
+    appName: string;
+};

src/components/app-menu/AppMenuElement.ts

@@ -132,7 +132,7 @@ class AppMenuElement extends BaseComponentElement {
 
         return html`
             <div data-target="app-menu.sidebar">
-                ${menuHeader("Wallets")} ${regularMenu("/", "Home")}
+                ${menuHeader(__CONFIG__.appName)} ${regularMenu("/", "Home")}
                 ${authMenu("/history", "Transaction History")}
                 ${authMenu(
                     "/wallet/all",

src/configs/development/app-settings.json

@@ -1,5 +1,6 @@
 {
-    "apiUrl": "main-wallet--dtnyc2vcdgu2re9j-gtw.qovery.io",
+    "apiUrl": "localhost:4000",
     "apiVersion": "v1",
-    "ssl": true
+    "ssl": false,
+    "appName": "Wallets"
 }

src/core/services/http-service/HttpClient.ts

@@ -1,11 +1,9 @@
-import settings from "configs/development/app-settings.json";
-
 class HttpClient {
     private url: string;
     constructor() {
-        this.url = `${settings.ssl ? "https" : "http"}://${settings.apiUrl}/${
-            settings.apiVersion
-        }`;
+        this.url = `${__CONFIG__.ssl ? "https" : "http"}://${
+            __CONFIG__.apiUrl
+        }/${__CONFIG__.apiVersion}`;
     }
 
     post(url: string, data: Object, headersParam: HeadersInit): Promise<any> {

webpack.config.js

@@ -1,5 +1,7 @@
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const settings = require("./src/configs/development/app-settings.json");
+const { DefinePlugin } = require('webpack');
 
 const alias = {
 	common: path.resolve(__dirname, '/common'),
@@ -83,6 +85,9 @@ module.exports = {
         new HtmlWebpackPlugin({
             template: './src/index.html'
         }),
+        new DefinePlugin({
+            __CONFIG__: JSON.stringify(settings)
+        })
     ],
     resolve: {
         extensions: ['.js', '.ts'],