slmnio · slmnio · Mar 9, 2023 · Feb 6, 2023 · Feb 6, 2023 · Feb 6, 2023
diff --git a/website/.env b/website/.env
@@ -1,5 +1,5 @@
-VUE_APP_DEPLOY_MODE=live
-VUE_APP_DATA_SERVER="https://data.slmn.gg"
+VITE_DEPLOY_MODE=live
+VITE_DATA_SERVER="https://data.slmn.gg"
 
-# VUE_APP_MAIN_DOMAIN="https://dev.slmn.gg"   # for auth returns
-# VUE_APP_MAIN_COOKIE_DOMAIN="dev.slmn.gg"    # no protocol or ports (for cookies)
+# VITE_MAIN_DOMAIN="https://dev.slmn.gg"   # for auth returns
+# VITE_MAIN_COOKIE_DOMAIN="dev.slmn.gg"    # no protocol or ports (for cookies)
diff --git a/website/.env.development b/website/.env.development
@@ -1 +1 @@
-VUE_APP_DEPLOY_MODE=local
+VITE_DEPLOY_MODE=local
diff --git a/website/.env.staging b/website/.env.staging
@@ -1 +1 @@
-VUE_APP_DEPLOY_MODE=staging
+VITE_DEPLOY_MODE=staging
diff --git a/website/.eslintrc.json b/website/.eslintrc.json
@@ -9,8 +9,7 @@
     ],
     "parserOptions": {
         "ecmaVersion": 12,
-        "sourceType": "module",
-        "parser": "babel-eslint"
+        "sourceType": "module"
     },
     "rules": {
         "indent": [

diff --git a/website/babel.config.js b/website/babel.config.js
diff --git a/website/public/index.html → website/index.html b/website/public/index.html → website/index.html
@@ -9,16 +9,18 @@
         document.getElementById("science").dataset.domain += "," + window.location.hostname;
         document.getElementById("science").src = "https://science.slmn.io/science.js";
     </script>
-    <link rel="stylesheet" href="<%= BASE_URL %>assets/initial.css">
-    <link rel="stylesheet" href="<%= BASE_URL %>assets/fa-all.css">
+    <link rel="stylesheet" href="/assets/initial.css">
+    <link rel="stylesheet" href="/assets/fa-all.css">
     <link rel="icon" href="/favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
+    <title>SLMN.GG</title>
 </head>
 <body>
     <noscript>
-        <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
+        <strong>We're sorry but SLMN.GG doesn't work properly without JavaScript enabled.
             Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+
 </body>
 </html>
diff --git a/website/package.json b/website/package.json
@@ -3,49 +3,43 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve-website": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint",
-    "build-stage": "vue-cli-service build --mode staging"
+    "dev": "vite --port 8080",
+    "build": "vite build",
+    "serve": "vite preview --port 8080",
+    "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src",
+    "build-stage": "vite build --mode staging",
+    "serve-website": "yarn dev"
   },
   "dependencies": {
     "bootstrap-vue": "^2.23.1",
-    "core-js": "^3.6.5",
     "howler": "^2.2.3",
     "jimp": "^0.16.1",
     "marked": "^2.1.3",
     "notyf": "^3.10.0",
     "obs-websocket-js": "^5.0.2",
     "opus-decoder": "^0.5.3",
+    "rollup-plugin-node-builtins": "^2.1.2",
     "socket.io-client": "^4.0.1",
     "spacetime": "^6.16.0",
     "spacetime-informal": "^0.6.1",
     "timesync": "^1.0.11",
-    "vue": "^2.6.11",
+    "vue": "^2.7",
     "vue-cookies": "^1.8.1",
     "vue-meta": "^2.4.0",
     "vue-router": "^3.2.0",
-    "vue-server-renderer": "^2.6.12",
     "vue-socket.io-extended": "^4.1.0",
     "vue-youtube-embed": "^2.2.2",
-    "vuex": "^3.6.2",
-    "webpack-merge": "^5.7.3",
-    "webpack-node-externals": "^2.5.2"
+    "vuex": "^3.6.2"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-plugin-router": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
+    "@vitejs/plugin-vue2": "^2.2.0",
+    "vite": "^4.1.1",
     "@vue/eslint-config-standard": "^5.1.2",
-    "babel-eslint": "^10.1.0",
     "eslint": "^7.23.0",
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.0",
-    "eslint-plugin-vue": "^6.2.2",
-    "ngrok": "^4.0.1",
-    "vue-template-compiler": "^2.6.11"
+    "eslint-plugin-vue": "^6.2.2"
   }
 }
diff --git a/website/src/apps/MinisiteWrapperApp.vue b/website/src/apps/MinisiteWrapperApp.vue
@@ -44,7 +44,8 @@
 import NotFoundPage from "@/views/NotFoundPage";
 import WebsiteNav from "@/components/website/WebsiteNav";
 import { ReactiveThing } from "@/utils/reactive";
-
+import "@/assets/bootstrap.css";
+import "@/assets/app.css";
 export default {
     name: "MinisiteWrapperApp",
     components: {
@@ -74,9 +75,3 @@ export default {
     }
 };
 </script>
-
-<style scoped>
-@import "~@/assets/bootstrap.css";
-@import "~@/assets/app.css";
-
-</style>
diff --git a/website/src/apps/WebsiteApp.vue b/website/src/apps/WebsiteApp.vue
@@ -7,6 +7,8 @@
 
 <script>
 import WebsiteNav from "@/components/website/WebsiteNav";
+import "@/assets/bootstrap.css";
+import "@/assets/app.css";
 
 export default {
     name: "WebsiteApp",
@@ -20,9 +22,6 @@ export default {
 </script>
 
 <style scoped>
-@import "~@/assets/bootstrap.css";
-@import "~@/assets/app.css";
-
 .nav-link-match {
     color: rgba(255,255,255,0.8) !important;
 }

diff --git a/website/src/components/website/TwitchAuthScopeSelector.vue b/website/src/components/website/TwitchAuthScopeSelector.vue
@@ -43,7 +43,7 @@ export default {
     }),
     computed: {
         twitchAuthURL() {
-            return `${process.env.VUE_APP_DATA_SERVER}/twitch_auth/${this.selected.join(" ")}`;
+            return `${import.meta.env.VITE_DATA_SERVER}/twitch_auth/${this.selected.join(" ")}`;
         }
     }
 };

diff --git a/website/src/components/website/WebsiteNav.vue b/website/src/components/website/WebsiteNav.vue
@@ -146,8 +146,7 @@ export default {
             return getMainDomain(this.minisite?.subdomain);
         },
         siteMode() {
-            // console.log("env", process.env);
-            return process.env.VUE_APP_DEPLOY_MODE || process.env.NODE_ENV;
+            return import.meta.env.VITE_DEPLOY_MODE || import.meta.env.NODE_ENV;
         },
         navbarEvents() {
             if (!this.minisite?.id) return [];

diff --git a/website/src/main.js b/website/src/main.js
@@ -126,7 +126,7 @@ if (subdomain) {
 
 const router = new VueRouter({
     mode: "history",
-    base: process.env.BASE_URL,
+    base: import.meta.env.BASE_URL,
     routes
 });
 
@@ -254,7 +254,7 @@ app = new Vue({
             return this.$store.getters.thing(`subdomain-${subdomain}`);
         },
         version() {
-            return process.env?.VUE_APP_SLMNGG_VERSION;
+            return import.meta.env?.VITE_SLMNGG_VERSION;
         },
         authUser() {
             if (!this.auth.user?.airtableID) return null;

diff --git a/website/src/router/auth-redirects.js b/website/src/router/auth-redirects.js
@@ -26,7 +26,7 @@ export default (app, mainDomain) => ([
             setAuthNext(app?.$root, to.query.return || from.fullPath);
 
             const params = {
-                client_id: process.env.VUE_APP_DISCORD_CLIENT_ID,
+                client_id: import.meta.env.VITE_DISCORD_CLIENT_ID,
                 redirect_uri: `${mainDomain}/auth/discord/return`,
                 response_type: "code",
                 scope: ["identify"].join(" ")

diff --git a/website/src/router/default.js b/website/src/router/default.js
@@ -38,14 +38,6 @@ export default [
                 component: Players
             },
             ...SharedRoutes,
-            {
-                path: "/about",
-                // name: "About",
-                // route level code-splitting
-                // this generates a separate chunk (about.[hash].js) for this route
-                // which is lazy-loaded when the route is visited.
-                component: () => import(/* webpackChunkName: "about" */ "../views/About.vue")
-            },
             {
                 path: "/profile",
                 meta: { requiresAuth: true },

diff --git a/website/src/router/index.js b/website/src/router/index.js
@@ -35,7 +35,7 @@ if (subdomain) {
 
 const router = new VueRouter({
     mode: "history",
-    base: process.env.BASE_URL,
+    base: import.meta.env.BASE_URL,
     routes
 });
 

diff --git a/website/src/utils/fetch.js b/website/src/utils/fetch.js
@@ -5,11 +5,11 @@ async function addToBuffer(id) {
     return store.commit("addToRequestBuffer", id);
 }
 export function getDataServerAddress() {
-    // console.log("[data server address]", window.location.hostname, process.env.VUE_APP_DATA_SERVER);
+    // console.log("[data server address]", window.location.hostname, process.env.VITE_DATA_SERVER);
     // can override this with .env.development etc
-    if (process.env.VUE_APP_DATA_SERVER) return process.env.VUE_APP_DATA_SERVER;
+    if (import.meta.env.VITE_DATA_SERVER) return import.meta.env.VITE_DATA_SERVER;
 
-    if (process.env.VUE_APP_DEPLOY_MODE === "local") {
+    if (import.meta.env.VITE_DEPLOY_MODE === "local") {
         return `//${window.location.hostname}:8901`;
     }
     return "https://data.slmn.gg";
@@ -149,12 +149,12 @@ export function getMainDomain(subdomain) {
         if (subdomain) {
             return window.location.origin.replace(`${subdomain}.`, "");
         } else {
-            if (process.env.VUE_APP_MAIN_DOMAIN) return process.env.VUE_APP_MAIN_DOMAIN;
-            if (process.env.VUE_APP_DEPLOY_MODE === "production") return "https://slmn.gg";
-            if (process.env.VUE_APP_DEPLOY_MODE === "staging") return "https://dev.slmn.gg";
-            if (process.env.VUE_APP_DEPLOY_MODE === "local") return "http://localhost:8080";
-            if (process.env.NODE_ENV === "production") return "https://slmn.gg";
-            if (process.env.NODE_ENV === "development") return "http://localhost:8080";
+            if (import.meta.env.VITE_MAIN_DOMAIN) return import.meta.env.VITE_MAIN_DOMAIN;
+            if (import.meta.env.VITE_DEPLOY_MODE === "production") return "https://slmn.gg";
+            if (import.meta.env.VITE_DEPLOY_MODE === "staging") return "https://dev.slmn.gg";
+            if (import.meta.env.VITE_DEPLOY_MODE === "local") return "http://localhost:8080";
+            if (import.meta.env.NODE_ENV === "production") return "https://slmn.gg";
+            if (import.meta.env.NODE_ENV === "development") return "http://localhost:8080";
             return "https://dev.slmn.gg";
         }
     } catch (e) {
@@ -168,12 +168,12 @@ export function getMainCookieDomain(subdomain) {
         if (subdomain) {
             return window.location.hostname.replace(`${subdomain}.`, "");
         } else {
-            if (process.env.VUE_APP_MAIN_COOKIE_DOMAIN) return process.env.VUE_APP_MAIN_COOKIE_DOMAIN;
-            if (process.env.VUE_APP_DEPLOY_MODE === "production") return "slmn.gg";
-            if (process.env.VUE_APP_DEPLOY_MODE === "staging") return "dev.slmn.gg";
-            if (process.env.VUE_APP_DEPLOY_MODE === "local") return "localhost";
-            if (process.env.NODE_ENV === "production") return "slmn.gg";
-            if (process.env.NODE_ENV === "development") return "localhost";
+            if (import.meta.env.VITE_MAIN_COOKIE_DOMAIN) return import.meta.env.VITE_MAIN_COOKIE_DOMAIN;
+            if (import.meta.env.VITE_DEPLOY_MODE === "production") return "slmn.gg";
+            if (import.meta.env.VITE_DEPLOY_MODE === "staging") return "dev.slmn.gg";
+            if (import.meta.env.VITE_DEPLOY_MODE === "local") return "localhost";
+            if (import.meta.env.NODE_ENV === "production") return "slmn.gg";
+            if (import.meta.env.NODE_ENV === "development") return "localhost";
             return "dev.slmn.gg";
         }
     } catch (e) {

diff --git a/website/src/views/About.vue b/website/src/views/About.vue
diff --git a/website/src/views/Event.vue b/website/src/views/Event.vue
@@ -132,9 +132,9 @@ export default {
             if (!this.event) return null;
 
             try {
-                if ([process.env.VUE_APP_DEPLOY_MODE, process.env.NODE_ENV].includes("staging")) return `https://${this.subdomain}.dev.slmn.gg`;
-                if (process.env.NODE_ENV === "development" || process.env.VUE_APP_DEPLOY_MODE === "local") return `http://${this.subdomain}.localhost:8080`;
-                if ([process.env.VUE_APP_DEPLOY_MODE, process.env.NODE_ENV].includes("production")) return `https://${this.subdomain}.slmn.gg`;
+                if ([import.meta.env.VITE_DEPLOY_MODE, import.meta.env.NODE_ENV].includes("staging")) return `https://${this.subdomain}.dev.slmn.gg`;
+                if (import.meta.env.NODE_ENV === "development" || import.meta.env.VITE_DEPLOY_MODE === "local") return `http://${this.subdomain}.localhost:8080`;
+                if ([import.meta.env.VITE_DEPLOY_MODE, import.meta.env.NODE_ENV].includes("production")) return `https://${this.subdomain}.slmn.gg`;
                 return null;
             } catch (e) {
                 return null;

diff --git a/website/src/views/NotFoundPage.vue b/website/src/views/NotFoundPage.vue
@@ -8,6 +8,8 @@
 <script>
 import WebsiteNav from "@/components/website/WebsiteNav";
 import NotFoundContent from "@/views/sub-views/NotFoundContent";
+import "@/assets/bootstrap.css";
+import "@/assets/app.css";
 
 export default {
     name: "NotFoundPage",
@@ -17,9 +19,3 @@ export default {
     }
 };
 </script>
-
-<style scoped>
-@import "~@/assets/bootstrap.css";
-@import "~@/assets/app.css";
-
-</style>
diff --git a/website/vite.config.js b/website/vite.config.js
@@ -0,0 +1,19 @@
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue2";
+import { fileURLToPath, URL } from "url";
+import dns from "dns";
+
+// make sure we use localhost instead of 127.0.0.1
+dns.setDefaultResultOrder("verbatim");
+
+// https://vitejs.dev/config/
+export default defineConfig({
+    plugins: [vue()],
+    resolve: {
+        alias: {
+            "@": fileURLToPath(new URL("./src", import.meta.url)),
+            fs: require.resolve("rollup-plugin-node-builtins")
+        },
+        extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"]
+    }
+});
diff --git a/website/vue.config.js b/website/vue.config.js
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		VUE_APP_DEPLOY_MODE=staging
		VITE_DEPLOY_MODE=staging