feat: allow setting API, proxy, and frontend URLs at build time (#3284)

fkrull · web-flow · commit 84b2637d7d11 · 2024-03-13T17:49:40.000+01:00
diff --git a/.env b/.env
@@ -0,0 +1,3 @@
+VITE_PIPED_API=https://pipedapi.kavin.rocks
+VITE_PIPED_PROXY=https://pipedproxy.kavin.rocks
+VITE_PIPED_INSTANCES=https://piped-instances.kavin.rocks/
diff --git a/index.html b/index.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html style="background: #0f0f0f" lang="en" >
     <head>
+        <base href="%BASE_URL%"/>
         <meta charset="utf-8" />
         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
         <meta name="viewport" content="width=device-width,initial-scale=1.0" />
diff --git a/src/components/LoginPage.vue b/src/components/LoginPage.vue
@@ -51,7 +51,7 @@ export default {
     mounted() {
         //TODO: Add Server Side check
         if (this.getAuthToken()) {
-            this.$router.push("/");
+            this.$router.push(import.meta.env.BASE_URL);
         }
     },
     activated() {
@@ -69,7 +69,7 @@ export default {
             }).then(resp => {
                 if (resp.token) {
                     this.setPreference("authToken" + this.hashCode(this.authApiUrl()), resp.token);
-                    window.location = "/"; // done to bypass cache
+                    window.location = import.meta.env.BASE_URL; // done to bypass cache
                 } else alert(resp.error);
             });
         },
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
@@ -131,7 +131,7 @@ export default {
             searchText: "",
             suggestionsVisible: false,
             showTopNav: false,
-            homePagePath: "/",
+            homePagePath: import.meta.env.BASE_URL,
             registrationDisabled: false,
         };
     },
diff --git a/src/components/PageNotFound.vue b/src/components/PageNotFound.vue
@@ -1,7 +1,11 @@
+<script setup>
+const homeUrl = import.meta.env.BASE_URL;
+</script>
+
 <template>
     <div class="min-h-[88vh] flex flex-col items-center justify-center">
         <h1 class="font-bold !text-9xl">404</h1>
         <h2 v-t="'info.page_not_found'" class="!text-2xl" />
-        <a v-t="'actions.back_to_home'" class="btn mt-16" href="/" />
+        <a v-t="'actions.back_to_home'" class="btn mt-16" :href="homeUrl" />
     </div>
 </template>
diff --git a/src/components/PreferencesPage.vue b/src/components/PreferencesPage.vue
@@ -504,7 +504,7 @@ export default {
     async mounted() {
         if (Object.keys(this.$route.query).length > 0) this.$router.replace({ query: {} });
 
-        this.fetchJson("https://piped-instances.kavin.rocks/").then(resp => {
+        this.fetchJson(import.meta.env.VITE_PIPED_INSTANCES).then(resp => {
             this.instances = resp;
             if (!this.instances.some(instance => instance.api_url == this.apiUrl()))
                 this.instances.push({
@@ -517,7 +517,7 @@ export default {
         });
 
         if (this.testLocalStorage) {
-            this.selectedInstance = this.getPreferenceString("instance", "https://pipedapi.kavin.rocks");
+            this.selectedInstance = this.getPreferenceString("instance", import.meta.env.VITE_PIPED_API);
             this.authInstance = this.getPreferenceBoolean("authInstance", false);
             this.selectedAuthInstance = this.getPreferenceString("auth_instance_url", this.selectedInstance);
 
@@ -655,14 +655,14 @@ export default {
             // reset the auth token
             localStorage.removeItem("authToken" + this.hashCode(this.authApiUrl()));
             // redirect to trending page
-            window.location = "/";
+            window.location = import.meta.env.BASE_URL;
         },
         resetPreferences() {
             this.showConfirmResetPrefsDialog = false;
             // clear the local storage
             localStorage.clear();
             // redirect to the home page
-            window.location = "/";
+            window.location = import.meta.env.BASE_URL;
         },
         async invalidateSession() {
             this.fetchJson(this.authApiUrl() + "/logout", null, {
diff --git a/src/components/RegisterPage.vue b/src/components/RegisterPage.vue
@@ -83,7 +83,7 @@ export default {
     mounted() {
         //TODO: Add Server Side check
         if (this.getAuthToken()) {
-            this.$router.push("/");
+            this.$router.push(import.meta.env.BASE_URL);
         }
     },
     activated() {
@@ -109,7 +109,7 @@ export default {
             }).then(resp => {
                 if (resp.token) {
                     this.setPreference("authToken" + this.hashCode(this.authApiUrl()), resp.token);
-                    window.location = "/"; // done to bypass cache
+                    window.location = import.meta.env.BASE_URL; // done to bypass cache
                 } else alert(resp.error);
             });
         },
diff --git a/src/components/TrendingPage.vue b/src/components/TrendingPage.vue
@@ -23,7 +23,12 @@ export default {
         };
     },
     mounted() {
-        if (this.$route.path == "/" && this.getPreferenceString("homepage", "trending") == "feed") return;
+        if (
+            this.$route.path == import.meta.env.BASE_URL &&
+            this.getPreferenceString("homepage", "trending") == "feed"
+        ) {
+            return;
+        }
         let region = this.getPreferenceString("region", "US");
 
         this.fetchTrending(region).then(videos => {
@@ -35,7 +40,7 @@ export default {
     activated() {
         document.title = this.$t("titles.trending") + " - Piped";
         if (this.videos.length > 0) this.updateWatched(this.videos);
-        if (this.$route.path == "/") {
+        if (this.$route.path == import.meta.env.BASE_URL) {
             let homepage = this.getHomePage(this);
             if (homepage !== undefined) this.$router.push(homepage);
         }
diff --git a/src/main.js b/src/main.js
@@ -117,7 +117,7 @@ const mixin = {
             } else return defaultVal;
         },
         apiUrl() {
-            return this.getPreferenceString("instance", "https://pipedapi.kavin.rocks");
+            return this.getPreferenceString("instance", import.meta.env.VITE_PIPED_API);
         },
         authApiUrl() {
             if (this.getPreferenceBoolean("authInstance", false)) {
@@ -347,7 +347,7 @@ const mixin = {
                     id: playlistId,
                     name: name,
                     description: "",
-                    thumbnail: "https://pipedproxy.kavin.rocks/?host=i.ytimg.com",
+                    thumbnail: import.meta.env.VITE_PIPED_PROXY + "/?host=i.ytimg.com",
                     videoIds: "[]", // empty list
                 });
                 return { playlistId: playlistId };
@@ -471,7 +471,7 @@ const mixin = {
                 const videoIds = JSON.parse(playlist.videoIds);
                 videoIds.splice(index, 1);
                 playlist.videoIds = JSON.stringify(videoIds);
-                if (videoIds.length == 0) playlist.thumbnail = "https://pipedproxy.kavin.rocks/?host=i.ytimg.com";
+                if (videoIds.length == 0) playlist.thumbnail = import.meta.env.VITE_PIPED_PROXY + "/?host=i.ytimg.com";
                 this.createOrUpdateLocalPlaylist(playlist);
                 return { message: "ok" };
             }

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+VITE_PIPED_API=https://pipedapi.kavin.rocks`
	`2`	`+VITE_PIPED_PROXY=https://pipedproxy.kavin.rocks`
	`3`	`+VITE_PIPED_INSTANCES=https://piped-instances.kavin.rocks/`