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.
Issue:
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 https://files.tago.io/custom-widgets/test/assets/index-CWwFz4T6.js. 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">
<head>
<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="https://files.tago.io/{id}/storage/custom-widgets/test/assets/index-CWwFz4T6.js"></script>
<link rel="stylesheet" crossorigin href="https://files.tago.io/{id}/storage/custom-widgets/test/assets/index-yjWQTeUw.css">
</head>
<body>
<div id="app"></div>
</body>
</html>
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: 'https://files.tago.io/{id}/storage/custom-widgets/test/',
});
With this configuration, the index.html generated by Vite correctly references the assets with the full URL.
Request:
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.
Thanks!