CODEWITHSUNDEEP
javascripthtmlbundlesvelte
Aman
Aman

Reputation: 417

How do I build my Svelte website with all relative paths?

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.

Upvotes: 4

Views: 2201

Answers (1)

David Leppik
David Leppik

Reputation: 3304

In vite.config.ts (presumably vite.config.js if you're not using TypeScript), add base: './' to the configuration.

Upvotes: 5

Related Questions