Use proper urls

.env

@@ -1,2 +1,3 @@
-VITE_BACKEND_URL=http://localhost:7000
+VITE_BACKEND_DOMAIN=localhost:7000
-VITE_INSTANCE_URL=http://localhost:5173
+VITE_INSTANCE_DOMAIN=localhost:5173
+VITE_HTTPS=false

env.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="vite/client" />
 
 interface ImportMetaEnv {
-    readonly VITE_BACKEND_URL: string
+    readonly VITE_BACKEND_DOMAIN: string
-    readonly VITE_INSTANCE_URL: string
+    readonly VITE_INSTANCE_DOMAIN: string
+    readonly VITE_HTTPS: string
     // more env variables...
   }
   

src/components/StreamPreview.vue

@@ -20,11 +20,12 @@ export default {
     }
   },
   async setup(props) {
+    const protocol = import.meta.env.VITE_HTTPS === 'true' ? 'https://' : 'http://'
 
     let streamData: Stream | null = null
     if (!props.stream && props.name) {
       const streamDataFetch = await fetch(
-        `${import.meta.env.VITE_BACKEND_URL}/api/users/${props.name}`
+        `${protocol}${import.meta.env.VITE_BACKEND_DOMAIN}/api/users/${props.name}`
       )
       const data = await streamDataFetch.json()
 
@@ -36,11 +37,12 @@ export default {
       streamData = props.stream as Stream
     }
 
-    const frontend_url = import.meta.env.VITE_INSTANCE_URL
+    const frontend_url = protocol + import.meta.env.VITE_INSTANCE_DOMAIN
 
     return {
       frontend_url,
-      streamData
+      streamData,
+      protocol
     }
   },
   methods: {
@@ -58,10 +60,9 @@ export default {
 <template>
   <div v-if="streamData">
     <div class="bg-ctp-crust rounded-lg w-[27rem]">
-    <a :href="`${frontend_url}/${streamData.streamer.name}`">
+    <RouterLink :to="'/' + streamData.streamer.name">
       <img :src="streamData.preview" class="rounded-lg rounded-b-none" />
-    </a>
+    </RouterLink>
-
     <div class="text-white p-2 inline-flex space-x-2 w-full h-16">
       <div class="inline-flex">
         <div class="inline-flex">

src/components/TwitchChat.vue

@@ -19,12 +19,13 @@ export default {
   },
   async setup(props) {
     let messages: Ref<ParsedMessage[]> = ref([])
+    const protocol = import.meta.env.VITE_HTTPS === 'true' ? 'https://' : 'http://'
     
-    const badgesFetch = await fetch(`${import.meta.env.VITE_BACKEND_URL}/api/badges?channelName=${props.channelName}`)
+    const badgesFetch = await fetch(`${protocol}${import.meta.env.VITE_BACKEND_DOMAIN}/api/badges?channelName=${props.channelName}`)
     let badges: Badge[] =  await badgesFetch.json()
 
     return {
-      ws: new WebSocket(`ws://localhost:7001`),
+      ws: new WebSocket(`ws://${import.meta.env.VITE_BACKEND_DOMAIN}`),
       messages,
       badges,
       props,
@@ -57,7 +58,7 @@ export default {
     },
     clearMessages() {
       if (this.messages.length > 50) {
-        this.messages.shift
+        this.messages.shift()
       }
     },
     getBadges(message: ParsedMessage) {

src/views/CategoryView.vue

@@ -4,11 +4,13 @@ import StreamPreviewVue from '@/components/StreamPreview.vue'
 
 export default {
   async setup() {
+    const protocol = import.meta.env.VITE_HTTPS === 'true' ? 'https://' : 'http://'
+
     const route = useRoute()
     const game = route.params.game
-    const res = await fetch(`${import.meta.env.VITE_BACKEND_URL}/api/discover/${game}`)
+    const res = await fetch(`${protocol}${import.meta.env.VITE_BACKEND_DOMAIN}/api/discover/${game}`)
     const data = await res.json()
-    let frontend_url = import.meta.env.VITE_INSTANCE_URL
+    let frontend_url = protocol + import.meta.env.VITE_INSTANCE_DOMAIN
     return {
       data,
       frontend_url

src/views/HomepageView.vue

@@ -4,13 +4,16 @@ import StreamPreviewVue from '@/components/StreamPreview.vue'
 
 export default {
   async setup() {
-    const res = await fetch(`${import.meta.env.VITE_BACKEND_URL}/api/discover`)
+    const protocol = import.meta.env.VITE_HTTPS === 'true' ? 'https://' : 'http://'
+    
+    const res = await fetch(`${protocol}${import.meta.env.VITE_BACKEND_DOMAIN}/api/discover`)
     let data: Ref<any[] | undefined> = ref()
-    let frontend_url = import.meta.env.VITE_INSTANCE_URL
+    let frontend_url = protocol + import.meta.env.VITE_INSTANCE_DOMAIN
     data.value = await res.json()
 
     return {
       data,
+      protocol,
       frontend_url,
       filterTags: '',
       following: ref([])
@@ -62,7 +65,7 @@ export default {
           const cursor = this.data[this.data.length - 1].cursor
           if (!cursor) return
           const res = await fetch(
-            `${import.meta.env.VITE_BACKEND_URL}/api/discover/?cursor=${cursor}`
+            `${this.protocol}${import.meta.env.VITE_BACKEND_DOMAIN}/api/discover/?cursor=${cursor}`
           )
           const data = await res.json()
 

src/views/UserView.vue

@@ -10,9 +10,10 @@ export default {
   async setup() {
     const route = useRoute()
     const username = route.params.username
+    const protocol = import.meta.env.VITE_HTTPS === 'true' ? 'https://' : 'http://'
 
     const getUser = async () => {
-      const res = await fetch(`${import.meta.env.VITE_BACKEND_URL}/api/users/${username}`)
+      const res = await fetch(`${protocol}${import.meta.env.VITE_BACKEND_DOMAIN}/api/users/${username}`)
 
       if (res.status !== 200) {
         const data = await res.json()
@@ -46,7 +47,7 @@ export default {
         controls: true,
         sources: [
           {
-            src: `${import.meta.env.VITE_BACKEND_URL}/proxy/stream/${username}/hls.m3u8`,
+            src: `${protocol}${import.meta.env.VITE_BACKEND_DOMAIN}/proxy/stream/${username}/hls.m3u8`,
             type: 'application/vnd.apple.mpegurl'
           }
         ],