feat(backend): Auto-configure on load (#1904)

Requires vuetorrent-backend:2.0.1+

.env.development

@@ -1,5 +1,8 @@
 VITE_QBITTORRENT_TARGET='http://localhost'
 VITE_QBITTORRENT_PORT=8080
 
+VITE_BACKEND_TARGET='http://localhost'
+VITE_BACKEND_PORT=8081
+
 VITE_USE_MOCK_PROVIDER=false
 VITE_FAKE_TORRENTS_COUNT=5

src/App.vue

@@ -58,8 +58,22 @@ function addLaunchQueueConsumer() {
 }
 
 onBeforeMount(() => {
-  backend.init(vuetorrentStore.backendUrl)
-  backend.ping()
+  let backendUrl
+  if (vuetorrentStore.backendUrl) {
+    backendUrl = vuetorrentStore.backendUrl
+  } else {
+    backendUrl = `${location.origin}${location.pathname}`
+    if (backendUrl.endsWith('/')) {
+      backendUrl = backendUrl.slice(0, -1)
+    }
+    backendUrl += '/backend'
+  }
+  backend.init(backendUrl)
+  backend.ping().then(ok => {
+    if (vuetorrentStore.backendUrl && !ok) {
+      toast.error(t('toast.backend_unreachable'), { delay: 1000, autoClose: 2500 })
+    }
+  })
   vuetorrentStore.updateTheme()
   vuetorrentStore.setLanguage(language.value)
   checkAuthentication()

src/components/Settings/VueTorrent/General.vue

@@ -282,6 +282,7 @@ function openBackendHelp() {
           <v-text-field
             v-model="vueTorrentStore.backendUrl"
             :label="t('settings.vuetorrent.general.backendUrl')"
+            :hint="t('settings.vuetorrent.general.backendUrlHint')"
             placeholder="https://YOUR-HOST:PORT/"
             append-inner-icon="mdi-help-circle"
             @click:appendInner="openBackendHelp" />

src/locales/en.json

@@ -982,7 +982,8 @@
     "title": "Settings",
     "vuetorrent": {
       "general": {
-        "backendUrl": "Backend URL",
+        "backendUrl": "Backend URL Override",
+        "backendUrlHint": "Leave empty to auto-detect it",
         "canvasRefreshThreshold": "Piece count to disable canvas auto-refresh",
         "canvasRenderThreshold": "Piece count to disable canvas rendering",
         "check_new": "Check for new version",

src/pages/Settings.vue

@@ -73,7 +73,10 @@ const saveSettings = async () => {
     if (!oldInit && newInit) {
       location.reload()
     } else {
-      await backend.ping()
+      const ok = await backend.ping()
+      if (!ok) {
+        toast.error(t('toast.backend_unreachable'), { delay: 1000, autoClose: 2500 })
+      }
     }
   }
 }

src/services/backend.ts

@@ -1,7 +1,5 @@
-import i18n from '@/plugins/i18n'
 import { StorageLikeAsync } from '@vueuse/core'
 import axios, { AxiosInstance } from 'axios'
-import { toast } from 'vue3-toastify'
 
 class BackendProvider {
   private axios: AxiosInstance
@@ -47,11 +45,6 @@ class BackendProvider {
         this.up = ok
         this.pingPromise = null
 
-        if (!ok) {
-          // @ts-expect-error: TS2589: Type instantiation is excessively deep and possibly infinite.
-          toast.error(i18n.global.t('toast.backend_unreachable'), { delay: 1000, autoClose: 2500 })
-        }
-
         return ok
       })
 

vite.config.ts

@@ -9,8 +9,10 @@ import vuetify from 'vite-plugin-vuetify'
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, process.cwd())
+  const qBittorrentHost = env.VITE_QBITTORRENT_TARGET ?? 'http://127.0.0.1'
   const qBittorrentPort = env.VITE_QBITTORRENT_PORT ?? '8080'
-  const proxyTarget = env.VITE_QBITTORRENT_TARGET ?? 'http://127.0.0.1'
+  const backendHost = env.VITE_BACKEND_HOST ?? 'http://127.0.0.1'
+  const backendPort = env.VITE_BACKEND_PORT ?? '3000'
 
   return {
     base: './',
@@ -51,7 +53,11 @@ export default defineConfig(({ mode }) => {
       proxy: {
         '/api': {
           secure: false,
-          target: `${proxyTarget}:${qBittorrentPort}`
+          target: `${qBittorrentHost}:${qBittorrentPort}`
+        },
+        '/backend': {
+          secure: false,
+          target: `${backendHost}:${backendPort}`
         }
       }
     },