Allow for relative paths of assets when building for static deployments

[renefournier]

Describe the problem

I'm developing a Kit app that, when deployed, will have a few directories above it, e.g., in dev a route might look like:

http://localhost/about

But in production, after rendering to static and deploying “somewhereoutthere”, the same route will be:

https://wwwcompanycom/canada/markting/about

The problem is—and maybe there’s an option for this that I'm missing—is that the static JS and CSS assets assume a route path:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />

<link rel="modulepreload" href="/_app/immutable/entry/start.42e3e50b.js">
<link rel="modulepreload" href="/_app/immutable/chunks/index.ebe9a2c4.js">

Describe the proposed solution

Allow for an option in svelte.config.js to allow for relative asset paths so that we can get:

<link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png" />

<link rel="modulepreload" href="./_app/immutable/entry/start.42e3e50b.js">
<link rel="modulepreload" href="./_app/immutable/chunks/index.ebe9a2c4.js">

(See the ./ ?)

Alternatives considered

No response

Importance

i cannot use SvelteKit without it

Additional Information

No response

[marianmeres]

It is possible to use sveltekit outside of the domain root, all you need is define the base path in the svelte.config.js

const config = {
    preprocess: vitePreprocess(),
    kit: {
        adapter: adapter(),
        paths: {
            base: '/canada/markting/'
        },
    },
};

[marianmeres]

Or even better like this:

...
    paths: {
        base: process.env.PUBLIC_BASE_PATH,
    },
...

[wetrustinprize]

Or even better like this:

...
    paths: {
        base: process.env.PUBLIC_BASE_PATH,
    },
...

This doesn't allow for a relative path, the path needs to be specified everytime there is a new build in a new environment.

A relative base path option would be really appreciated, this can be done in the Vite config by setting the base parameter but Sveltekit overrides this option.

[renefournier]

Or even better like this:

...
    paths: {
        base: process.env.PUBLIC_BASE_PATH,
    },
...

This doesn't allow for a relative path, the path needs to be specified everytime there is a new build in a new environment.

A relative base path option would be really appreciated, this can be done in the Vite config by setting the base parameter but Sveltekit overrides this option.

This is kind of the issue we have, too. More precisely, when we npm run build, it would be nice if the static assets (JS, CSS) could be referenced relatively, regardless of the base path of the route.

[khromov]

Here is a basic reproduction of the issue: https://www.sveltelab.dev/dld3qitrcpe22pl

After starting the environment, run npm run build && cat build/index.html

Expected:

Image URL does not start with absolute slash / because relative is enabled in svelte.config.js: <img src="./_app/immutable/assets/image.b6278320.png">

Actual

Image URL contains absolute / while the import statements further down respect relative config: <img src="/_app/immutable/assets/image.b6278320.png">

[ASSimonsen]

I got around this issue by running a small script (replaceAssets.js) after the build process:

replaceAssets.js

import fs from "fs";
import path from 'path';

const readDirRecursive = async (filePath) => {
    const dir = await fs.promises.readdir(filePath);
    const files = await Promise.all(dir.map(async relativePath => {
        const absolutePath = path.join(filePath, relativePath);
        const stat = await fs.promises.lstat(absolutePath);
        return stat.isDirectory() ? readDirRecursive(absolutePath) : absolutePath;
    }));
    return files.flat();
}

const files = await readDirRecursive('./build');
Array.from(files).forEach((file) => {
    if (!(file.endsWith('.js') || file.endsWith('.html') || file.endsWith('.map') || file.endsWith('.css'))) {
        return;
    }
    fs.readFile(file,'utf8',(err,data) => {
        fs.writeFile(file,data.replace(/http:\/\/REPLACEME/g,'.'),'utf8',() => {
            console.log("Wrote file '" + file + "'");
        })
    });
});

svelte.config.js

import adapter from '@sveltejs/adapter-node';
import { vitePreprocess } from '@sveltejs/kit/vite';
/** @type {import('@sveltejs/kit').Config} */
const config = {
	preprocess: vitePreprocess(),
	kit: {
		adapter: adapter(),
		paths: {
			assets: "http://REPLACEME",
			relative: true,
		}
	}
};
export default config;

This tricks SvelteKit to build (as the assets path is absolute), and the script replaces all instances of "http://REPLACEME" with ".", such that the paths are relative. I've added this script to the build process, so my build script now looks like this:

package.json

{
	"scripts": {
		"build": "vite build & node ./replaceAssets.js",
		...
	},
	...
}

(To read all files recursively I found a snippet from "https://stackoverflow.com/questions/5827612/node-js-fs-readdir-recursive-directory-search")

[terwer]

All of the below not work,it is sad. When I use vite, relative path is ok for base="" config in vite.config.ts. THIS IS VERY USEFULL. If sveltekit not support, I will giveup using this framework😞

[terwer]

I add

// https://kit.svelte.dev/docs/adapter-static
// This can be false if you're using a fallback (i.e. SPA mode)
export const prerender = true
export const trailingSlash = "always"

to layput.ts, sub pages work, but index.html not work

[terwer]

index.html works now

add

// https://kit.svelte.dev/docs/adapter-static
// This can be false if you're using a fallback (i.e. SPA mode)
export const prerender = true
export const trailingSlash = "always"

to src/routes/page.ts

😄

update

https://github.com/terwer/siyuan-plugin-publisher/blob/next/apps/publisher-app/svelte.config.static.js https://github.com/terwer/siyuan-plugin-publisher/blob/next/apps/publisher-app/src/routes/%2Blayout.ts#L31

[terwer]

my version

{
"@sveltejs/adapter-static": "^2.0.3",
"@sveltejs/kit": "^1.27.3",
"svelte": "^4.2.2",
}

[aleksilassila]

I'll bump this, as far as I'm concerned, absolute asset paths don't work at all when trying to build a tizen app, which is why I think this would be crucial if sveltekit is to be used for tv app development.

[shadow-identity]

We have lots of instances of our app running on the same host, so this problem is important for us.

What we're doing to work around this problem is setting base for production build to be /%base%, and then the production http server replace it with an absolute path of deployed instance (I think it does it on the fly, but it also possible that it is being replaced in the file system once the app package is deployed).

svelte.config.js looks like this

let base = ''
if (process.env.PLAYWRIGHT_TEST_BASE_URL) base = process.env.TEST_BASE_PATH
else if (process.env.NODE_ENV === 'production') base = '/%base%'

const config = {
    kit: { paths: { base }}
}

It has a problem with vite preview since vite doesn't know anything about %base%, so if I need preview I comment the line manually (and hope not to commit it).

Would be great to have possibility to use relative paths.

[conoremclaughlin]

This is also an issue for us. In production, we want to mount the assets directory and use nginx to proxy those static assets while our Django app is responsible for catching all proper URLs to be routed to index.html. We can then seamlessly put our CDN in front and swap URLs as necessary without rebuilding. It also ensures our dev and production environments are more easily aligned. This would be easily enabled with adding relative paths to the assets URL so asset hosting routing can be independent of the base path of index.html.

If I've missed an easy way to achieve this, please do let me know. Thanks so much for the help! Also linking this related request:

https://github.com/sveltejs/kit/issues/3998

[jackcasey]

Thank you ASSimonsen for that REPLACEME workaround.

I had to also set base to something weird and replace that with document.location.pathname to fix the client side router (even though I only have a single route).

// svelte.config.js
...
		paths: {
			assets: "http://hacked_asset_path",
			base: "/hacked_base_path",
			relative: true,
		}

//replaceAssets.js
...
		data.replace(/http:\/\/hacked_asset_path/g,'.').replace("\"/hacked_base_path\"","document.location.pathname")

Now I can cleanly run my app from any folder!

It would be good if this simple use case was easier (Static SPA served from folder unknown at build time)