From aeec449dc7632fbeed381aa9429829d45be49eef Mon Sep 17 00:00:00 2001
From: aterox <church.kennetha@gmail.com>
Date: Sat, 5 Mar 2022 01:22:12 -0500
Subject: [PATCH 01/11] Pull conf.yml from server

---
 server.js                      |  9 +++++++++
 services/get-conf.js           | 10 ++++++++++
 src/store.js                   | 11 ++++++++++-
 src/utils/ConfigAccumalator.js |  4 ++--
 src/utils/defaults.js          |  1 +
 5 files changed, 32 insertions(+), 3 deletions(-)
 create mode 100644 services/get-conf.js

diff --git a/server.js b/server.js
index 4cef9e23..7d395ade 100644
--- a/server.js
+++ b/server.js
@@ -27,6 +27,7 @@ const rebuild = require('./services/rebuild-app'); // A script to programmatical
 const systemInfo = require('./services/system-info'); // Basic system info, for resource widget
 const sslServer = require('./services/ssl-server'); // TLS-enabled web server
 const corsProxy = require('./services/cors-proxy'); // Enables API requests to CORS-blocked services
+const getConf = require('./services/get-conf'); // Returns the configuration as a JSON object
 
 /* Helper functions, and default config */
 const printMessage = require('./services/print-message'); // Function to print welcome msg on start
@@ -116,6 +117,14 @@ const app = express()
     } catch (e) {
       res.end(JSON.stringify({ success: false, message: e }));
     }
+  })
+  // GET endpoint returns the app configuration
+  .use(ENDPOINTS.getConf, (req, res) => {
+    try {
+      res.end(JSON.stringify(getConf()));
+    } catch (e) {
+      res.end(JSON.stringify({ success: false, message: e }));
+    }
   });
 
 /* Create HTTP server from app on port, and print welcome message */
diff --git a/services/get-conf.js b/services/get-conf.js
new file mode 100644
index 00000000..df952256
--- /dev/null
+++ b/services/get-conf.js
@@ -0,0 +1,10 @@
+/**
+ * Gets the configuration from conf.yml
+ */
+const fs = require('fs');
+const yaml = require('js-yaml');
+
+module.exports = () => {
+  const conf = yaml.load(fs.readFileSync('./public/conf.yml', 'utf-8'));
+  return conf;
+};
diff --git a/src/store.js b/src/store.js
index 95ae846c..83bf628b 100644
--- a/src/store.js
+++ b/src/store.js
@@ -1,6 +1,7 @@
 /* eslint-disable no-param-reassign, prefer-destructuring */
 import Vue from 'vue';
 import Vuex from 'vuex';
+import axios from 'axios';
 import Keys from '@/utils/StoreMutations';
 import ConfigAccumulator from '@/utils/ConfigAccumalator';
 import { componentVisibility } from '@/utils/ConfigHelpers';
@@ -8,12 +9,14 @@ import { applyItemId } from '@/utils/SectionHelpers';
 import filterUserSections from '@/utils/CheckSectionVisibility';
 import { InfoHandler, InfoKeys } from '@/utils/ErrorHandler';
 import { isUserAdmin } from '@/utils/Auth';
+import { serviceEndpoints } from '@/utils/defaults';
 
 Vue.use(Vuex);
 
 const {
   INITIALIZE_CONFIG,
   SET_CONFIG,
+  SET_REMOTE_CONFIG,
   SET_MODAL_OPEN,
   SET_LANGUAGE,
   SET_ITEM_LAYOUT,
@@ -38,6 +41,7 @@ const {
 const store = new Vuex.Store({
   state: {
     config: {},
+    remoteConfig: {}, // The configuration stored on the server
     editMode: false, // While true, the user can drag and edit items + sections
     modalOpen: false, // KB shortcut functionality will be disabled when modal is open
     navigateConfToTab: undefined, // Used to switch active tab in config modal
@@ -126,6 +130,9 @@ const store = new Vuex.Store({
     [SET_CONFIG](state, config) {
       state.config = config;
     },
+    [SET_REMOTE_CONFIG](state, config) {
+      state.remoteConfig = config;
+    },
     [SET_LANGUAGE](state, lang) {
       const newConfig = state.config;
       newConfig.appConfig.language = lang;
@@ -271,7 +278,9 @@ const store = new Vuex.Store({
   },
   actions: {
     /* Called when app first loaded. Reads config and sets state */
-    [INITIALIZE_CONFIG]({ commit }) {
+    async [INITIALIZE_CONFIG]({ commit }) {
+      // Get the config file from the server and store it for use by the accumulator
+      commit(SET_REMOTE_CONFIG, (await axios.get(serviceEndpoints.getConf)).data);
       const deepCopy = (json) => JSON.parse(JSON.stringify(json));
       const config = deepCopy(new ConfigAccumulator().config());
       commit(SET_CONFIG, config);
diff --git a/src/utils/ConfigAccumalator.js b/src/utils/ConfigAccumalator.js
index a1756461..15131e7d 100644
--- a/src/utils/ConfigAccumalator.js
+++ b/src/utils/ConfigAccumalator.js
@@ -14,11 +14,11 @@ import {
 } from '@/utils/defaults';
 import ErrorHandler from '@/utils/ErrorHandler';
 import { applyItemId } from '@/utils/SectionHelpers';
-import conf from '../../public/conf.yml';
+import $store from '../store';
 
 export default class ConfigAccumulator {
   constructor() {
-    this.conf = conf;
+    this.conf = $store.state.remoteConfig;
   }
 
   /* App Config */
diff --git a/src/utils/defaults.js b/src/utils/defaults.js
index 57cabb6d..aba08691 100644
--- a/src/utils/defaults.js
+++ b/src/utils/defaults.js
@@ -42,6 +42,7 @@ module.exports = {
     statusCheck: '/status-check',
     save: '/config-manager/save',
     rebuild: '/config-manager/rebuild',
+    getConf: '/config-manager/get',
     systemInfo: '/system-info',
     corsProxy: '/cors-proxy',
   },

From 7c86d6085bbd634970d0a7a3871458438adeefa6 Mon Sep 17 00:00:00 2001
From: aterox <church.kennetha@gmail.com>
Date: Sat, 5 Mar 2022 01:22:32 -0500
Subject: [PATCH 02/11] Load components after config has been pulled

---
 src/App.vue | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index d669556f..27984144 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,8 +3,8 @@
     <EditModeTopBanner v-if="isEditMode" />
     <LoadingScreen :isLoading="isLoading" v-if="shouldShowSplash" />
     <Header :pageInfo="pageInfo" />
-    <router-view />
-    <Footer :text="footerText" v-if="visibleComponents.footer" />
+    <router-view v-if="!isFetching" />
+    <Footer :text="footerText" v-if="visibleComponents.footer && !isFetching" />
   </div>
 </template>
 <script>
@@ -33,6 +33,7 @@ export default {
   data() {
     return {
       isLoading: true, // Set to false after mount complete
+      isFetching: true, // Set to false after the conf has been fetched
     };
   },
   watch: {
@@ -40,6 +41,9 @@ export default {
       // When in edit mode, show confirmation dialog on page exit
       window.onbeforeunload = isEditMode ? this.confirmExit : null;
     },
+    config() {
+      this.isFetching = false;
+    },
   },
   computed: {
     /* If the user has specified custom text for footer - get it */
@@ -69,9 +73,6 @@ export default {
       return this.$store.state.editMode;
     },
   },
-  created() {
-    this.$store.dispatch(Keys.INITIALIZE_CONFIG);
-  },
   methods: {
     /* Injects the users custom CSS as a style tag */
     injectCustomStyles(usersCss) {
@@ -135,7 +136,8 @@ export default {
     },
   },
   /* Basic initialization tasks on app load */
-  mounted() {
+  async mounted() {
+    await this.$store.dispatch(Keys.INITIALIZE_CONFIG); // Initialize config before moving on
     this.applyLanguage(); // Apply users local language
     this.hideSplash(); // Hide the splash screen, if visible
     if (this.appConfig.customCss) { // Inject users custom CSS, if present

From 5c1bfc88556c9f95848be47d8bfcb911e276fff2 Mon Sep 17 00:00:00 2001
From: aterox <church.kennetha@gmail.com>
Date: Sat, 5 Mar 2022 19:10:19 -0500
Subject: [PATCH 03/11] Bump version to 2.0.4

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 5cdc68f1..ee320b40 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "Dashy",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "license": "MIT",
   "main": "server",
   "author": "Alicia Sykes <alicia@omg.lol> (https://aliciasykes.com)",

From 6553f1463de9efa713a49726a3eaee22fc6fd3e3 Mon Sep 17 00:00:00 2001
From: aterox <church.kennetha@gmail.com>
Date: Sun, 6 Mar 2022 03:02:41 -0500
Subject: [PATCH 04/11] No longer needed

---
 services/get-conf.js | 10 ----------
 1 file changed, 10 deletions(-)
 delete mode 100644 services/get-conf.js

diff --git a/services/get-conf.js b/services/get-conf.js
deleted file mode 100644
index df952256..00000000
--- a/services/get-conf.js
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * Gets the configuration from conf.yml
- */
-const fs = require('fs');
-const yaml = require('js-yaml');
-
-module.exports = () => {
-  const conf = yaml.load(fs.readFileSync('./public/conf.yml', 'utf-8'));
-  return conf;
-};

From 727f6b1fc0a51208e2b1ccc5568ae3d17310d37e Mon Sep 17 00:00:00 2001
From: aterox <church.kennetha@gmail.com>
Date: Sun, 6 Mar 2022 03:04:41 -0500
Subject: [PATCH 05/11] Get conf.yml on client side

---
 server.js             | 11 +----------
 src/store.js          |  4 ++--
 src/utils/defaults.js |  1 -
 3 files changed, 3 insertions(+), 13 deletions(-)

diff --git a/server.js b/server.js
index 7d395ade..6b81e2b6 100644
--- a/server.js
+++ b/server.js
@@ -27,7 +27,6 @@ const rebuild = require('./services/rebuild-app'); // A script to programmatical
 const systemInfo = require('./services/system-info'); // Basic system info, for resource widget
 const sslServer = require('./services/ssl-server'); // TLS-enabled web server
 const corsProxy = require('./services/cors-proxy'); // Enables API requests to CORS-blocked services
-const getConf = require('./services/get-conf'); // Returns the configuration as a JSON object
 
 /* Helper functions, and default config */
 const printMessage = require('./services/print-message'); // Function to print welcome msg on start
@@ -69,7 +68,7 @@ const method = (m, mw) => (req, res, next) => (req.method === m ? mw(req, res, n
 const app = express()
   // Serves up static files
   .use(express.static(path.join(__dirname, 'dist')))
-  .use(express.static(path.join(__dirname, 'public'), { index: 'initialization.html' }))
+  .use(express.static(path.join(__dirname, 'public')))
   // Load middlewares for parsing JSON, and supporting HTML5 history routing
   .use(express.json({ limit: '1mb' }))
   .use(history())
@@ -117,14 +116,6 @@ const app = express()
     } catch (e) {
       res.end(JSON.stringify({ success: false, message: e }));
     }
-  })
-  // GET endpoint returns the app configuration
-  .use(ENDPOINTS.getConf, (req, res) => {
-    try {
-      res.end(JSON.stringify(getConf()));
-    } catch (e) {
-      res.end(JSON.stringify({ success: false, message: e }));
-    }
   });
 
 /* Create HTTP server from app on port, and print welcome message */
diff --git a/src/store.js b/src/store.js
index 83bf628b..e453628a 100644
--- a/src/store.js
+++ b/src/store.js
@@ -2,6 +2,7 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
 import axios from 'axios';
+import yaml from 'js-yaml';
 import Keys from '@/utils/StoreMutations';
 import ConfigAccumulator from '@/utils/ConfigAccumalator';
 import { componentVisibility } from '@/utils/ConfigHelpers';
@@ -9,7 +10,6 @@ import { applyItemId } from '@/utils/SectionHelpers';
 import filterUserSections from '@/utils/CheckSectionVisibility';
 import { InfoHandler, InfoKeys } from '@/utils/ErrorHandler';
 import { isUserAdmin } from '@/utils/Auth';
-import { serviceEndpoints } from '@/utils/defaults';
 
 Vue.use(Vuex);
 
@@ -280,7 +280,7 @@ const store = new Vuex.Store({
     /* Called when app first loaded. Reads config and sets state */
     async [INITIALIZE_CONFIG]({ commit }) {
       // Get the config file from the server and store it for use by the accumulator
-      commit(SET_REMOTE_CONFIG, (await axios.get(serviceEndpoints.getConf)).data);
+      commit(SET_REMOTE_CONFIG, yaml.load((await axios.get('conf.yml')).data));
       const deepCopy = (json) => JSON.parse(JSON.stringify(json));
       const config = deepCopy(new ConfigAccumulator().config());
       commit(SET_CONFIG, config);
diff --git a/src/utils/defaults.js b/src/utils/defaults.js
index aba08691..57cabb6d 100644
--- a/src/utils/defaults.js
+++ b/src/utils/defaults.js
@@ -42,7 +42,6 @@ module.exports = {
     statusCheck: '/status-check',
     save: '/config-manager/save',
     rebuild: '/config-manager/rebuild',
-    getConf: '/config-manager/get',
     systemInfo: '/system-info',
     corsProxy: '/cors-proxy',
   },

From 3d4a8ecf6d45777fe25c7c76324514d3a5e763e9 Mon Sep 17 00:00:00 2001
From: aterox <church.kennetha@gmail.com>
Date: Sun, 6 Mar 2022 03:06:05 -0500
Subject: [PATCH 06/11] Replace static conf.yml import

---
 src/utils/InitServiceWorker.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/utils/InitServiceWorker.js b/src/utils/InitServiceWorker.js
index 7c854288..b2956571 100644
--- a/src/utils/InitServiceWorker.js
+++ b/src/utils/InitServiceWorker.js
@@ -1,7 +1,8 @@
+import axios from 'axios';
+import yaml from 'js-yaml';
 import { register } from 'register-service-worker';
 import { sessionStorageKeys } from '@/utils/defaults';
 import { statusMsg, statusErrorMsg } from '@/utils/CoolConsole';
-import conf from '../../public/conf.yml';
 
 /* Sets a local storage item with the state from the SW lifecycle */
 const setSwStatus = (swStateToSet) => {
@@ -31,7 +32,8 @@ const setSwStatus = (swStateToSet) => {
  * Disable if not running in production
  * Or disable if user specified to disable
  */
-const shouldEnableServiceWorker = () => {
+const shouldEnableServiceWorker = async () => {
+  const conf = yaml.load((await axios.get('conf.yml')).data);
   if (conf && conf.appConfig && conf.appConfig.enableServiceWorker) {
     setSwStatus({ disabledByUser: false });
     return true;
@@ -51,8 +53,8 @@ const printSwStatus = (msg) => {
 const swUrl = `${process.env.BASE_URL || '/'}service-worker.js`;
 
 /* If service worker enabled, then register it, and print message when status changes */
-const registerServiceWorker = () => {
-  if (shouldEnableServiceWorker()) {
+const registerServiceWorker = async () => {
+  if (await shouldEnableServiceWorker()) {
     register(swUrl, {
       ready() {
         setSwStatus({ ready: true });

From 9c35fe40276ec4b0c19de9847c21a4429913d30c Mon Sep 17 00:00:00 2001
From: aterox <church.kennetha@gmail.com>
Date: Sun, 6 Mar 2022 03:22:54 -0500
Subject: [PATCH 07/11] Change CMD and copy only dist, not dist and public

---
 Dockerfile | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/Dockerfile b/Dockerfile
index ebb6f41c..f2b0029f 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -39,11 +39,15 @@ WORKDIR ${DIRECTORY}
 RUN apk add --no-cache tzdata tini
 
 # Copy built application from build phase
-COPY --from=BUILD_IMAGE /app ./
+COPY --from=BUILD_IMAGE /app/dist/ public/
+COPY --from=BUILD_IMAGE /app/node_modules/ node_modules/
+COPY services/ services/
+COPY src/utils/ src/utils/
+COPY package.json yarn.lock server.js ./
 
 # Finally, run start command to serve up the built application
 ENTRYPOINT [ "/sbin/tini", "--" ]
-CMD [ "yarn", "build-and-start" ]
+CMD [ "yarn", "start" ]
 
 # Expose the port
 EXPOSE ${PORT}

From b6a5dfbec1404a2a1fe4a8570bd74a1dbbcfc029 Mon Sep 17 00:00:00 2001
From: aterox <church.kennetha@gmail.com>
Date: Sun, 6 Mar 2022 03:31:11 -0500
Subject: [PATCH 08/11] Update for 2.0.4

---
 .github/CHANGELOG.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/.github/CHANGELOG.md b/.github/CHANGELOG.md
index 10d57bc3..e28eba36 100644
--- a/.github/CHANGELOG.md
+++ b/.github/CHANGELOG.md
@@ -1,5 +1,8 @@
 # Changelog
 
+## :sparkles: 2.0.4 - Dynamic Config Loading [PR #528](https://github.com/Lissy93/dashy/pull/528)
+- `conf.yml` is now loaded dynamically and the app now only needs a browser refresh on config change, not a full rebuild!
+
 ## 🐛 2.0.3 - Bug Fixes [PR #488](https://github.com/Lissy93/dashy/pull/488)
 - Press enter to submit login form (Re: #483)
 - Allow disabling write to local storage and disk (Re: #485)

From 50acc0f711d0771b39d7ecdbcc5486e8a2245de7 Mon Sep 17 00:00:00 2001
From: aterox <church.kennetha@gmail.com>
Date: Sun, 6 Mar 2022 03:34:05 -0500
Subject: [PATCH 09/11] No longer requires a rebuild

---
 services/print-message.js | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/services/print-message.js b/services/print-message.js
index a1017d8c..69feb4de 100644
--- a/services/print-message.js
+++ b/services/print-message.js
@@ -28,9 +28,6 @@ module.exports = (ip, port, isDocker) => {
       + `${chars.CYAN}Welcome to Dashy! 🚀${chars.RESET}${chars.BR}`
       + `${chars.GREEN}Your new dashboard is now up and running `
       + `${containerId ? `in container ID ${containerId}` : 'with Docker'}${chars.BR}`
-      + `${chars.GREEN}After updating your config file, run  `
-      + `'${chars.BRIGHT}docker exec -it ${containerId || '[container-id]'} yarn build`
-      + `${chars.RESET}${chars.GREEN}' to rebuild${chars.BR}`
       + `${chars.BLUE}${stars(91)}${chars.BR}${chars.RESET}`;
   } else {
     // Prepare message for users running app on bare metal
@@ -38,8 +35,6 @@ module.exports = (ip, port, isDocker) => {
       + `┃ ${chars.CYAN}Welcome to Dashy! 🚀${blanks(55)}${chars.GREEN}┃${chars.BR}`
       + `┃ ${chars.CYAN}Your new dashboard is now up and running at ${chars.BRIGHT}`
       + `http://${ip}:${port}${chars.RESET}${blanks(18 - ip.length)}${chars.GREEN}┃${chars.BR}`
-      + `┃ ${chars.CYAN}After updating your config file, run '${chars.BRIGHT}yarn build`
-      + `${chars.RESET}${chars.CYAN}' to rebuild the app${blanks(6)}${chars.GREEN}┃${chars.BR}`
       + `┗${line(75)}┛${chars.BR}${chars.BR}${chars.RESET}`;
   }
   // Make some sexy ascii art ;)

From b3c680d462cc5f79af55e1355ff90e27551a9926 Mon Sep 17 00:00:00 2001
From: aterox <church.kennetha@gmail.com>
Date: Sun, 6 Mar 2022 18:13:39 -0500
Subject: [PATCH 10/11] Update path

---
 src/utils/ConfigAccumalator.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils/ConfigAccumalator.js b/src/utils/ConfigAccumalator.js
index 15131e7d..6ab294e3 100644
--- a/src/utils/ConfigAccumalator.js
+++ b/src/utils/ConfigAccumalator.js
@@ -14,7 +14,7 @@ import {
 } from '@/utils/defaults';
 import ErrorHandler from '@/utils/ErrorHandler';
 import { applyItemId } from '@/utils/SectionHelpers';
-import $store from '../store';
+import $store from '@/store';
 
 export default class ConfigAccumulator {
   constructor() {

From d0acd2f75d6789ea99b74203493a0bd20942d968 Mon Sep 17 00:00:00 2001
From: aterox <church.kennetha@gmail.com>
Date: Sun, 6 Mar 2022 18:14:00 -0500
Subject: [PATCH 11/11] Include SET_REMOTE_CONFIG

---
 src/utils/StoreMutations.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/utils/StoreMutations.js b/src/utils/StoreMutations.js
index 07bbac10..1e6a3e7b 100644
--- a/src/utils/StoreMutations.js
+++ b/src/utils/StoreMutations.js
@@ -2,6 +2,7 @@
 const KEY_NAMES = [
   'INITIALIZE_CONFIG',
   'SET_CONFIG',
+  'SET_REMOTE_CONFIG',
   'SET_MODAL_OPEN',
   'SET_LANGUAGE',
   'SET_EDIT_MODE',