'SvelteKit - Deployment - @sveltejs/adapter-static not updating static paths in fallback page
I'm exploring SvelteKit for the first time, I built my simple first application and I'd like to deploy it to my Apache server as a static page
As far as I understood adapter-static is the way to go, so I installed it and changed my svelte.config.js file to this:
import preprocess from 'svelte-preprocess';
import adapter from '@sveltejs/adapter-static';
/** @type {import('@sveltejs/kit').Config} */
const config = {
preprocess: preprocess(),
kit: {
adapter: adapter({
paths: { base: "/PERSONAL_PATH" },
fallback: 'index.html',
precompress: false,
})
}
};
export default config;
Now:
The npm run build runs without any error, the thing is that when I check index.html all the dependencies of the page (or the URLs of stylesheets and JS files if you will...) have 2 problems as you can see below:
- Have an absolute path, which makes it impossible to move the page's sources to any other location
- Are not located in the folder PERSONAL_PATH where I'd like them to be
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="description" content="" />
<link rel="icon" href="./favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="content-security-policy" content="">
<link rel="modulepreload" href="/_app/start-25574c6c.js">
<link rel="modulepreload" href="/_app/chunks/vendor-868763d8.js">
</head>
<body>
<div>
<script type="module" data-hydrate="45h">
import { start } from "/_app/start-25574c6c.js";
start({
target: document.querySelector('[data-hydrate="45h"]').parentNode,
paths: {"base":"","assets":""},
session: {},
route: true,
spa: true,
trailing_slash: "never",
hydrate: null
});
</script></div>
</body>
</html>
Where am I getting it wrong? I've been trying to figure it out for hours but I'm stuck now
Thanks for your help
Solution 1:[1]
Ok I found out that I was setting the wrong parameters, so I fixed it and here's the working svelte.config.js (meaning that this configs actually set your static files to the custom path, that must be absolute):
import preprocess from 'svelte-preprocess';
import adapter from '@sveltejs/adapter-static';
/** @type {import('@sveltejs/kit').Config} */
const config = {
preprocess: preprocess(),
kit: {
// SET THE PATHS HERE
paths: { assets: "", base: "/PERSONAL_PATH" },
adapter: adapter({
// NOT HERE!
// paths: { base: "/PERSONAL_PATH" },
fallback: 'index.html',
precompress: false,
})
}
};
export default config;
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | david |