Menu
My website contains different 'projects' that are each linked to their own Git repositories and built from Netlify. For example if my website is www.thedivtagguy.com, www.thedivtagguy.com/project1 and www.thedivtagguy.com/project2 are two different websites but linked to the main domain as sub-directories (instead of project1.thedivtagguy.com).
One such example site is available here. As you can see, it renders all the styles correctly. However, if I access it through a redirect from my main site, this is what happens. There are no styles.
For the above, I am just setting a redirect rule to link /testing/ to https://thedivtagguy2.netlify.app.
This is what the public directory looks like when I run npm build:
📦public
┣ 📂api
┣ 📂assets
┣ 📂common
┣ 📜app.css
┗ 📜index.html
Even when run locally, index.html does not render the correct styles. This is what is contained in the <head> tag of index.html:
<link rel="modulepreload" href="/_app/start-428f887f.js">
<link rel="modulepreload" href="/_app/chunks/vendor-28205438.js">
<link rel="modulepreload" href="/_app/pages/__layout.svelte-da7e95f6.js">
<link rel="modulepreload" href="/_app/pages/index.svelte-33b339ff.js">
<link rel="modulepreload" href="/_app/chunks/Meta-7977247e.js">
<link rel="stylesheet" href="/_app/assets/start-c446e5f0.css">
<link rel="stylesheet" href="/_app/assets/pages/__layout.svelte-aa99de20.css">
<link rel="stylesheet" href="/_app/assets/pages/index.svelte-e673c7ca.css">
<script type="module">
import { start } from "/_app/start-428f887f.js";
start({
target: document.querySelector("#svelte"),
paths: {"base":"","assets":""},
session: {},
host: location.host,
route: true,
spa: false,
trailing_slash: "never",
hydrate: {
status: 200,
error: null,
nodes: [
import("/_app/pages/__layout.svelte-da7e95f6.js"),
import("/_app/pages/index.svelte-33b339ff.js")
],
page: {
host: location.host, // TODO this is redundant
path: "\u002F",
query: new URLSearchParams(""),
params: {}
}
}
});
</script>
As you can see, it seems to be referencing some different paths altogether for styles, images and the JS bundles.
My intuitive guess is that I need to set the correct relative paths for my builds, so that it will work when built locally and when accessed via a redirect.
How do I do that? How can this be fixed so that my styles and other assets are rendered correctly?
My repository for this is here.
590
asked Oct 25 '25 04:10
In vite.config.ts (presumably vite.config.js if you're not using TypeScript), add base: './' to the configuration.
67
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
