How can I use page.js with Svelte and Vite?

Question

I've set up a pretty simple Svelte app. It uses page.js for routing, and uses Vite as the build tool. There's a map of california on the landing page.

When I'm running the app locally via npm run dev, I can either click on a county OR use the dropdown to navigate to a county page.

However, when I build the site with npm run build (as you can see here on Netlify), I can't use the dropdown-- I get a 404. And if I try to go directly to a county page (e.g. https://splendid-yeot-baf72e.netlify.app/county/Colusa), I also get a 404.

The full code can be viewed on CodeSandbox (where it actually works, making this more frustrating)

How do I fix this? I have done a lot of searching and not found an answer.

The router is called from App.svelte:

    <script lang="ts">
      import router from "page";
      import State from "./pages/State.svelte";
      import County from "./pages/County.svelte";

      let page;
      let params;

      router("/", () => (page = State));
      router(
        "/county/:id",
        (ctx, next) => {
          params = ctx.params;
          next();
        },
        () => (page = County)
      );

      router.start();
    </script>

    <div id="center">
      <svelte:component this={page} {params} />
      <main />
    </div>

score 1 · Accepted Answer · answered Dec 20 '22 at 21:48

Your CountrySelect component does a hard page load with window.location.href = ..., so you need to make sure Netlify serves your index.html file for all routes, so that the page library can take over the routing in the browser.

Additionally, you could also have page itself handle the navigation to avoid the hard page load to make it a true SPA.

How can I use page.js with Svelte and Vite?

1 Answers1