adapter-static doesn't work with dynamic routes #4278
Comments
|
I found this https://dev.to/alexeyromanchenko/how-to-deploy-spa-as-a-static-website-using-aws-s3-1adg and this https://medium.com/@P_Lessing/single-page-apps-on-aws-part-1-hosting-a-website-on-s3-3c9871f126 and this https://docs.aws.amazon.com/prescriptive-guidance/latest/patterns/deploy-a-react-based-single-page-application-to-amazon-s3-and-cloudfront.html just by googling S3 SPA. |
|
As for the Github Pages, natively they don't support SPAs, but there is hacky workaround https://github.com/rafgraph/spa-github-pages <!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 <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 |
|
Github Pages solution is a really hacky one, so if you can help it, don't use it. And for all of these you DO need to use |
|
Maybe sveltekit or static-adapter should have an option that will make it use |
That's really really bad for SEO, because the normal SPA Google can actually render, but if it's using hash routing it can't figure out there are any other page except index/homepage. |
|
@PH4NTOMiki How does the fallback option in |
|
Maybe by now, Google understands #-based routing since it's so common, that they can successfully interpret it like they do for |
No they don't and they never will, because servers don't understand hash, they completely discard it.
That's why you're supposed to configure it at the server that if the server can't find the exact file/route people are asking for, to just server fallback file instead. |
|
yes the server can be configured to fallback, but how does static-adapter do anything about it's fallback option? |
|
|
|
Aha. Thanks for explaining. |
pjebs
changed the title
|
You need to set |
|
@PH4NTOMiki can you explain the significance of trailingslash = never? |
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
Severity
blocking all usage of SvelteKit
Additional Information
No response
The text was updated successfully, but these errors were encountered: