refactor: changed frontend config naming due to devServer config changes

.wiki/Configuration.md

@@ -31,10 +31,11 @@ Location: `frontend/dist/config/default.json`
 
 | Property | Description |
 | --- | --- |
-| `apiDomain` | Should be the url where the backend will be accessible from, usually `http://localhost/backend` for docker or `http://localhost:8080` for non-Docker. |
-| `websocketsDomain` | Should be the same as the `apiDomain`, except using the `ws://` protocol instead of `http://` and with `/ws` at the end. |
+| `backend.apiDomain` | Should be the url where the backend will be accessible from, usually `http://localhost/backend` for docker or `http://localhost:8080` for non-Docker. |
+| `backend.websocketsDomain` | Should be the same as the `apiDomain`, except using the `ws://` protocol instead of `http://` and with `/ws` at the end. |
+| `devServer.webSocketURL` | Should be the webpack-dev-server websocket URL, usually `ws://localhost/ws`. |
+| `devServer.port` | Should be the port where webpack-dev-server will be accessible from, should always be port `81` for Docker since nginx listens on port 80, and is recommended to be port `80` for non-Docker. |
 | `frontendDomain` | Should be the url where the frontend will be accessible from, usually `http://localhost` for docker or `http://localhost:80` for non-Docker. |
-| `frontendPort` | Should be the port where the frontend will be accessible from, should always be port `81` for Docker, and is recommended to be port `80` for non-Docker. |
 | `recaptcha.key` | Can be obtained by setting up a [ReCaptcha Site (v3)](https://www.google.com/recaptcha/admin). |
 | `recaptcha.enabled` | Keep at false to keep disabled. |
 | `cookie.domain` | Should be the ip or address you use to access the site, without protocols (http/https), so for example `localhost`. |

frontend/dist/config/template.json

@@ -3,10 +3,15 @@
 		"key": "",
 		"enabled": false
 	},
-	"apiDomain": "http://localhost/backend",
-	"websocketsDomain": "ws://localhost/backend/ws",
+	"backend": {
+		"apiDomain": "http://localhost/backend",
+		"websocketsDomain": "ws://localhost/backend/ws"
+	},
+	"devServer": {
+		"port": "81",
+		"webSocketURL": "ws://localhost/ws"
+	},
 	"frontendDomain": "http://localhost",
-	"frontendPort": "81",
 	"mode": "development",
 	"cookie": {
 		"domain": "localhost",

frontend/src/App.vue

@@ -181,7 +181,7 @@ export default {
 			this.socketConnected = false;
 		});
 
-		this.apiDomain = await lofig.get("apiDomain");
+		this.apiDomain = await lofig.get("backend.apiDomain");
 
 		this.$router.isReady().then(() => {
 			if (this.$route.query.err) {

frontend/src/components/modals/EditPlaylist/index.vue

@@ -511,7 +511,7 @@ export default {
 		},
 		async downloadPlaylist() {
 			if (this.apiDomain === "")
-				this.apiDomain = await lofig.get("apiDomain");
+				this.apiDomain = await lofig.get("backend.apiDomain");
 
 			fetch(
 				`${this.apiDomain}/export/privatePlaylist/${this.playlist._id}`,

frontend/src/components/modals/Login.vue

@@ -136,7 +136,7 @@ export default {
 		};
 	},
 	async mounted() {
-		this.apiDomain = await lofig.get("apiDomain");
+		this.apiDomain = await lofig.get("backend.apiDomain");
 
 		if (this.$route.path === "/login") this.isPage = true;
 	},

frontend/src/components/modals/Register.vue

@@ -242,7 +242,7 @@ export default {
 	async mounted() {
 		if (this.$route.path === "/register") this.isPage = true;
 
-		this.apiDomain = await lofig.get("apiDomain");
+		this.apiDomain = await lofig.get("backend.apiDomain");
 
 		lofig.get("recaptcha").then(obj => {
 			this.recaptcha.enabled = obj.enabled;

frontend/src/components/modals/RemoveAccount.vue

@@ -197,7 +197,7 @@ export default {
 		socket: "websockets/getSocket"
 	}),
 	async mounted() {
-		this.apiDomain = await lofig.get("apiDomain");
+		this.apiDomain = await lofig.get("backend.apiDomain");
 		this.accountRemovalMessage = await lofig.get("messages.accountRemoval");
 	},
 	methods: {

frontend/src/main.js

@@ -9,7 +9,7 @@ import store from "./store";
 
 import AppComponent from "./App.vue";
 
-const REQUIRED_CONFIG_VERSION = 7;
+const REQUIRED_CONFIG_VERSION = 8;
 
 const handleMetadata = attrs => {
 	document.title = `Musare | ${attrs.title}`;
@@ -183,7 +183,7 @@ lofig.folder = "../config/default.json";
 		}
 	});
 
-	const websocketsDomain = await lofig.get("websocketsDomain");
+	const websocketsDomain = await lofig.get("backend.websocketsDomain");
 	ws.init(websocketsDomain);
 
 	ws.socket.on("ready", res => {

frontend/src/pages/Settings/Tabs/Security.vue

@@ -220,7 +220,7 @@ export default {
 		}
 	},
 	async mounted() {
-		this.apiDomain = await lofig.get("apiDomain");
+		this.apiDomain = await lofig.get("backend.apiDomain");
 	},
 	methods: {
 		togglePasswordVisibility(ref) {

frontend/webpack.dev.js

@@ -3,7 +3,6 @@ const config = require("config");
 
 const { merge } = require("webpack-merge");
 const common = require("./webpack.common.js");
-
 module.exports = merge(common, {
 	mode: "development",
 	devtool: "inline-source-map",
@@ -19,30 +18,15 @@ module.exports = merge(common, {
 	devServer: {
 		static: {
 			directory: "./dist/",
-			// watchOptions: {
-			// 	aggregateTimeout: 300,
-			// 	poll: 1000
-			// }
 			watch: true
 		},
+		client: {
+			webSocketURL: config.get("devServer.webSocketURL")
+		},
 		hot: true,
 		historyApiFallback: true,
-		port: config.get("frontendPort"),
+		port: config.get("devServer.port"),
 		host: "0.0.0.0",
 		allowedHosts: "all"
 	}
-
-	// devServer: {
-	// 	// contentBase: "./dist/",
-	// 	// historyApiFallback: true,
-	// 	// hot: true,
-	// 	// port: config.get("frontendPort"),
-	// 	// // public: config.get("frontendDomain"),
-	// 	// host: "0.0.0.0",
-	// 	// watchOptions: {
-	// 	// 	aggregateTimeout: 300,
-	// 	// 	poll: 1000
-	// 	// },
-	// 	// disableHostCheck: true
-	// }
 });