How to run a Svelte app from a subfolder?

Question

I am hosting a svelte app in GitHub pages, so its served from a subfolder. The problem is that all links aren't working anymore. Basically I need to change the base URL of the app, but I don't know how to do that in svelte or rollup.

P.S : I am not using Sapper.

Blaisdell

Answer 1

Svelte projects using vite can define a Public Base Path either via

• base config option
• command line flag

The flag can be added to the build script inside package.json to have it set with every npm run build

"scripts": {
    "dev": "vite",
    "build": "vite build --base=/my/public/path/",
    "preview": "vite preview"
  },

Caddie

Using the CLI flag, I get a message warning me the setting will be overridden by SvelteKit: The following Vite config options will be overridden by SvelteKit: -base – Nosegay

@Nosegay With SvelteKit there's the config.kit.paths.base option. From the docs kit.svelte.dev/docs/adapter-static#github-pages A similar question for SvelteKit #72730692 – Caddie

Answer 2

You can use the base element for this.

Either set it directly in your index.html or use svelte:head to set it in the svelte app itself, this allows to easily change it according to development/production

<svelte:head>
  <base href="BASEURL">
</svelte:head>

To set it according to the environment you can use something like environment variables and @rollup/plugin-replace but I feel that is outside the scope of this question. But you can look here Environment variables in svelte + rollup

Kendry

Playing around with the base element it looks like this works with URLs such as <a href="test", but not so much for URLs that start with a slash, <a href="/test". – Registry

If you use a different domain in the base element, URLs that start with a slash will still have their domain changed though. – Registry

I have already used the base element but it's not working, like @wp-overwatch.com said, URLs that start with slash don't change. – Blaisdell

I have the same problem when serving a static site from a nested directory and setting the base element in $layout.svelte AND also setting the base-path in svelte.config.cjs. I am trying to set relative links to routes like "/about" and "/", and it always sends the user back to the domain-root instead of the app-root, – Chatman

Answer 3

Svelte-Navigator (Routing)- You can check here, [https://github.com/mefechoel/svelte-navigator][1]. you can set basepath directly in the Router, then it will read all the URLs with that base path only.

<Router basepath="/base">
    <Link to="profile">Go to /base/profile</Link>
    <Link to="blog">Go to /base/blog</Link>
    <Route path="blog" component={Blog} />
    <Route path="profile" component={Profile} />
</Router>

Here "/base" is your subfolder name, for example if your svelte app running at port localhost:5000, by setting base path you can change it to localhost/base

Abelabelard

Answer 4

I've found a solution, it has caveats but it works.

Only tested when build as a Single Page Application

First, edit svelte.config.js as follows.

import adapter from '@sveltejs/adapter-static';

export default {
    kit: {
        adapter: adapter({
            fallback: 'index.html',
        }),
        paths: {base: '/my-svelte-app'},
    }
};

The good thing is that now, every Svelte-generated links are updated with /my-svelte-app.

The bad thing is that every human-generated links are NOT updated. You have to do it manually for every href or src using the $app/paths module

<script>
    import { base } from '$app/paths';
    export let title = 'Ninja gaming'
</script>


<div class="title">
    <img src="{base}/gamepad.svg" alt="Site logo">
    <h1>{title}</h1>
</div>

<nav class="crumbs">
    <ul>
        <li class="crumb"><a href="{base}/">Home</a></li>
        <li class="crumb"><a href="{base}/guides">Guides</a></li>
        <li class="crumb"><a href="{base}/about">About</a></li>
    </ul>
</nav>

Hope it helps !

Clearly