Make asset paths relative

Simply set base = '' can address this issue. But it will break some feature, here we discuss them in three situations.

Three Situations

A: Nginx with root directory

location / {
        root /vidat;
        index index.html;
}

And all files are located at /vidat.

B: Nginx with subdirectory

location / {
        root /www;
        index index.html;
}

And all files are located at /www/vidat.

C: Development mode

Vite HMR (Hot Module Replacement)

Features Impacted

Monaco Editor

Solution

Instead of using local files, we can replace them with CDN provided by unpkg.

publicPath: 'https://unpkg.com/vite-plugin-monaco-editor@1.0.10/cdn'

`Fetch` in Worker

We pass the URL into the worker, and use fetch to load the files. The URL can be in any format since it is passed via URL parameter by user. So, it can be

http/https/ftp://example.com/video.mp4

or absolute path

/vidat/video/example.mp4

or relative path

video/example.mp4

For relative path, the worker's full path will start with /vidat/assets, e.g., video/example.mp4 -> /vidat/assets/video/example.mp4.

Solution

Redirect to parent directory: (new URL(<path to video>, new URL('../', event.target.location)).href).

Still won't work in situation C, because it starts with /vidat/src/work, but never mind.

Router

Solution

As we are using History API for frontend routing, the router uses the url for routing, so in situation B, e.g. the main route does not match. / != /vidat/

Besides that, nginx needs to have extra config to support user refresh.

location / {
        try_files $uri $uri/ /index.html;
}

Unfortunately, there is no workaround without modifying the nginx config.

Therefore, just fallback with traditional hash history.

anucvml / vidat