flamenco/web/app/src/urls.js
William Gardner ea68faa577 Web: improve URL handling to allow for TLS/SSL
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>
2024-04-11 15:00:48 +02:00

31 lines
888 B
JavaScript

let url = new URL(window.location.href);
// 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';
}
const URLs = {
api: `${url.protocol}//${url.hostname}:${url.port}/`,
ws: `${url.protocol.replace('http', 'ws')}//${url.hostname}:${url.port}/`,
};
// console.log("Flamenco API:", URLs.api);
// console.log("Websocket :", URLs.ws);
export function ws() {
return URLs.ws;
}
export function api() {
return URLs.api;
}
// Backend URLs (like task logs, SwaggerUI, etc.) should be relative to the API
// url in order to stay working when the web development server is in use.
export function backendURL(path) {
const url = new URL(path, URLs.api);
return url.href;
}