drsybren/Flamenco
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Web: improve URL handling to allow for TLS/SSL

Browse Source 
Explicitly use the `--mode` flag for the webapp development server
(`vite`) to make the web frontend choose the appropriate HTTP and
WebSocket port to communicate with the backend. This also makes sure
that when accessing the frontend via `https://`, the websocket
connection uses `wss://`.

As a side-effect, this also makes port `:8081` usable in production
environments; it would assume it was the development server and try to
access the backend on port `:8080`.

Reviewed-on: https://projects.blender.org/studio/flamenco/pulls/104296
Reviewed-by: Sybren A. Stüvel <sybren@blender.org>
This commit is contained in:
William Gardner 2024-04-11 15:00:48 +02:00 committed by Sybren A. Stüvel
parent 9ee9c07e76
commit ea68faa577
2 changed files with 8 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/app/package.json
View File

@ -12,7 +12,7 @@
}
],
"scripts": {
"dev": "vite --port 8081 --base /app/",
"dev": "vite --port 8081 --base /app/ --mode development",
"build": "vite build",
"preview": "vite preview --port 5050",
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"

17
web/app/src/urls.js
View File

@ -1,18 +1,15 @@
let url = new URL(window.location.href);
// Uncomment this when the web interface is running on a different port than the
// API, for example when using the Vite devserver. Set the API port here.
if (url.port == '8081') {
// When the web interface is running on a different port than the API, for
// example when using the Vite devserver, setting the Vite --mode flag to
// "development" will force port 8080 for the API.
if (import.meta.env.MODE == 'development') {
url.port = '8080';
}
url.pathname = '/';
const flamencoAPIURL = url.href;
url.protocol = 'ws:';
const websocketURL = url.href;
const URLs = {
api: flamencoAPIURL,
ws: websocketURL,
api: `${url.protocol}//${url.hostname}:${url.port}/`,
ws: `${url.protocol.replace('http', 'ws')}//${url.hostname}:${url.port}/`,
};
// console.log("Flamenco API:", URLs.api);