Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

adapter-static doesn't work with dynamic routes

See original GitHub issue

Describe the bug

SvelteKit built using adapter-static with dynamic routes simply does not work on S3 (static hosting) and github pages.

When you start your site’s journey from / and then navigate using links to a dynamic route (i.e. /s/x/y), it works.

However if you directly try and go to /s/x/y (or alternatively refresh the page), you get a 404 page.

Is there any way to make the site work on s3 or github pages? Or is dynamic routing with static-adapter not feasible? Perhaps an option to make sveltekit use #-based routing.

Reproduction

Create any site with dynamic routes and run it on s3.

Logs

No response

System Info

s3

Severity

blocking all usage of SvelteKit

Additional Information

No response

Issue Analytics

State:
Created 2 years ago
Comments:14 (8 by maintainers)

Top GitHub Comments

1reaction

PH4NTOMikicommented, Mar 9, 2022

Github Pages solution is a really hacky one, so if you can help it, don’t use it. And you’re probably better of with Cludflare Pages, Vercel, Netlify. And if you want to have something like S3 (and cheaper) then you can use BunnyCDN Edge Storage (read this article https://bunny.net/blog/host-your-frontend-applications-on-the-edge/ on their blog) (I don’t have any affiliation with them, I just use them)

And for all of these you DO need to use fallback option for adapter config. Hope that helps

1reaction

PH4NTOMikicommented, Mar 9, 2022

As for the Github Pages, natively they don’t support SPAs, but there is hacky workaround https://github.com/rafgraph/spa-github-pages essentially you create 404.html file inside static folder with this content:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Single Page Apps for GitHub Pages</title>
    <script type="text/javascript">
      // Single Page Apps for GitHub Pages
      // MIT License
      // https://github.com/rafgraph/spa-github-pages
      // This script takes the current url and converts the path and query
      // string into just a query string, and then redirects the browser
      // to the new url with only a query string and hash fragment,
      // e.g. https://www.foo.tld/one/two?a=b&c=d#qwe, becomes
      // https://www.foo.tld/?/one/two&a=b~and~c=d#qwe
      // Note: this 404.html file must be at least 512 bytes for it to work
      // with Internet Explorer (it is currently > 512 bytes)

      // If you're creating a Project Pages site and NOT using a custom domain,
      // then set pathSegmentsToKeep to 1 (enterprise users may need to set it to > 1).
      // This way the code will only replace the route part of the path, and not
      // the real directory in which the app resides, for example:
      // https://username.github.io/repo-name/one/two?a=b&c=d#qwe becomes
      // https://username.github.io/repo-name/?/one/two&a=b~and~c=d#qwe
      // Otherwise, leave pathSegmentsToKeep as 0.
      var pathSegmentsToKeep = 0;

      var l = window.location;
      l.replace(
        l.protocol + '//' + l.hostname + (l.port ? ':' + l.port : '') +
        l.pathname.split('/').slice(0, 1 + pathSegmentsToKeep).join('/') + '/?/' +
        l.pathname.slice(1).split('/').slice(pathSegmentsToKeep).join('/').replace(/&/g, '~and~') +
        (l.search ? '&' + l.search.slice(1).replace(/&/g, '~and~') : '') +
        l.hash
      );

    </script>
  </head>
  <body>
  </body>
</html>

and in the app.html you add this before %svelte.body% (that’s really important):

<script>
      (function(l) {
        if (l.search[1] === '/' ) {
          var decoded = l.search.slice(1).split('&').map(function(s) { 
            return s.replace(/~and~/g, '&')
          }).join('?');
          window.history.replaceState(null, '',
              l.pathname.slice(0, -1) + decoded + l.hash
          );
        }
      }(window.location))
</script>

or simpler option is to JUST set fallback adapter option to 404.html It actually is better, but obviously for both of these options every request will return status code of 404 for real request which is really bad for SEO

Top Results From Across the Web

How do dynamic routes work with adapter-static? : r/sveltejs

So nginx would receive the request, if it doesn't find/match a static file with that name, it serves up index.html which svelte handles...

SvelteKit static folder path doesn't work on dynamic routes

I'm using SvelteKit in my __layout.svelte . I've got like: <img src="./logo.svg" alt="logo" />. It works fine with "normal" page like about, ...

Configuration • Docs • SvelteKit

import adapter from '@sveltejs/adapter-auto'; ... default "static" ... non-dynamic routes (i.e. pages with no [parameters] , because SvelteKit doesn't know ...

Routing in Next.js – How to Set Up Dynamic Routing with Pre ...

❗How does getStaticProps() work? ... In the case of dynamic routes, however, Next.js doesn't know by itself which paths to pre-render.

Routing - Remix

Dynamic Segment - A segment of the route path that is parsed from the URL and ... ability to load data for the...