fix: config now correctly applies when no valid env or config.json given

Author: cadriel

.env.development.local.example

@@ -0,0 +1,2 @@
+VUE_APP_API=http://fluidd.local
+VUE_APP_SOCKET=ws://fluidd.local/websocket

.env.local.example

@@ -7,7 +7,10 @@ $ npm install
 
 # Configure environment.
 $ cd fluidd
-$ cp .env.local.example .env.local
+
+# Copy local dev environment file, and edit it to suite your requirements.
+$ cp .env.development.local.example .env.development.local
+$ vim .env.development.local
 
 # Compile and serve for development.
 $ npm start

.github/CONTRIBUTING.md

@@ -1,4 +1,4 @@
 {
-  "apiUrl": "//localhost",
-  "socketUrl": "ws://localhost/websocket"
+  "apiUrl": "",
+  "socketUrl": ""
 }

public/config.json

@@ -19,13 +19,35 @@ Vue.use(FiltersPlugin)
 // Load API configuration
 // If we're in a local development environment,
 // then we should load the env variables instead of the
-// config.json
+// config.json. config.json can also be used to override
+// the default host for API and Websockets, if required.
 const promise = new Promise<ApiConfig>((resolve, reject) => {
   if (process.env.VUE_APP_API && process.env.VUE_APP_SOCKET) {
+    console.debug('API Config from ENV', process.env)
     resolve({ apiUrl: process.env.VUE_APP_API, socketUrl: process.env.VUE_APP_SOCKET })
   } else {
     fetch('/config.json', { cache: 'no-store' })
-      .then(res => res.json())
+      .then(res => (res.ok) ? res.json() : undefined)
+      .then(res => {
+        if (
+          res &&
+          res.apiUrl &&
+          res.socketUrl &&
+          res.apiUrl !== '' &&
+          res.socketUrl !== ''
+        ) {
+          console.debug('API Config from JSON', res)
+          return res
+        } else {
+          const wsProtocol = document.location.protocol === 'https:' ? 'wss://' : 'ws://'
+          const r = {
+            apiUrl: '//' + window.location.host,
+            socketUrl: wsProtocol + window.location.host + '/websocket'
+          }
+          console.debug('API Config from window.location', r)
+          return r
+        }
+      })
       .then(resolve)
       .catch(reject)
   }
@@ -36,7 +58,7 @@ promise
     // Commit the api configuration to our store.
     store.commit('config/onInitApiConfig', apiConfig)
     return fetch(apiConfig.apiUrl + '/server/files/config/' + Globals.SETTINGS_FILENAME, { cache: 'no-store' })
-      .then(res => (!res.ok) ? undefined : res.json())
+      .then(res => (res.ok) ? res.json() : undefined)
       .then((fileConfig) => {
         // Init the store. This should include any GUI settings we've loaded from moonraker.
         return store.dispatch('init', fileConfig).then(() => {

src/components/cards/WebCamCard.vue

@@ -20,16 +20,14 @@ import ToolsCard from '@/components/cards/ToolsCard.vue'
 import ToolheadCard from '@/components/cards/ToolheadCard.vue'
 import TerminalCard from '@/components/cards/TerminalCard.vue'
 import TemperatureCard from '@/components/cards/TemperatureCard.vue'
-import WebCamCard from '@/components/cards/WebCamCard.vue'
 
 @Component({
   components: {
     StatusCard,
     ToolsCard,
     ToolheadCard,
     TerminalCard,
-    TemperatureCard,
-    WebCamCard
+    TemperatureCard
   }
 })
 export default class Dashboard extends Vue {}

src/main.ts

@@ -2,6 +2,10 @@
 
 ## Next Up
 - move to mdi svg icons, and reduce overall size
+- add custompios image
+- figure out a best approach for nginx
+- setup discord?
+- 
 
 ## Known Bugs:
 - multi line gcodes not having a Send: prefix after the first line