Issue with Asset Paths in Vite + Svelte Project Deployed to TagoIO (Barebones Widget Example)

Issue with Asset Paths in Vite + Svelte Project Deployed to TagoIO (Barebones Widget Example)

Hello TagoIO Team,

I am currently working on a Vite + Svelte application and am integrating it as a custom widget in TagoIO. I've created a barebones widget to get started, but I encountered an issue with asset paths when deploying the application to TagoIO. I would like to share my findings and seek your guidance on the best way to handle this. For reference I've pushed my barebones testing application to github.

When I upload the build folder (dist) to TagoIO, the application fails to load the assets because it tries to fetch them from absolute paths like However, if I manually update the paths in index.html to use the full URL like so, it works perfectly:
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite + Svelte + TS</title>
<script type="module" crossorigin src="{id}/storage/custom-widgets/test/assets/index-CWwFz4T6.js"></script>
<link rel="stylesheet" crossorigin href="{id}/storage/custom-widgets/test/assets/index-yjWQTeUw.css">
<div id="app"></div>

Suggested Solution:
To resolve this, I updated my vite.config.ts to include the base option, which sets the base URL for all assets. Here’s the updated configuration:
import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';

export default defineConfig({
plugins: [svelte()],
base: '{id}/storage/custom-widgets/test/',

With this configuration, the index.html generated by Vite correctly references the assets with the full URL.

Could you please advise if there's a more streamlined way to handle this issue directly on TagoIO? Alternatively, if this approach is correct, I hope this can help others facing similar issues.