Routing in app built by adapter-static is broken in next.266

[jamesb93]

Describe the bug

Since upgrading to the latest version of SvelteKit a site which is compiled with the static adapter no longer works when served via Nginx.

For example routing to https://mywebsite.com works but routing to https://mywebsite.com/hello results in 404. If I were to navigate to the second link internally via an <a> the 404 would not appear. I can resolve the issue by pinning the SvelteKit version to something like 250 but being on the HEAD manifests the error.

Reproduction

1. Build any site with static adapter and SvelteKit version 266
2. Host output with a web server such as nginx
3. Route to anything except index.html directly or navigate there and refresh. For example https//mysite.com/anotherpage

Logs

No response

System Info

System:
    OS: macOS 12.2
    CPU: (8) arm64 Apple M1
    Memory: 553.13 MB / 16.00 GB
    Shell: 3.3.1 - /opt/homebrew/bin/fish
  Binaries:
    Node: 17.4.0 - /opt/homebrew/bin/node
    Yarn: 1.22.10 - /opt/homebrew/bin/yarn
    npm: 8.3.1 - /opt/homebrew/bin/npm
  Browsers:
    Brave Browser: 96.1.32.115
    Chrome: 98.0.4758.80
    Firefox: 97.0
    Safari: 15.3
  npmPackages:
    @sveltejs/adapter-static: next => 1.0.0-next.28 
    @sveltejs/kit: next => 1.0.0-next.266 
    svelte: ^3.46.4 => 3.46.4

Severity

serious, but I can work around it

Additional Information

No response

[fzembow]

This regressed in next.265

What's happening is that instead of:

hello/index.html

The following is being generated:

hello.html

Which won't work in most web servers if navigating to the bare /hello url

[fzembow]

@jamesb93 looks like they changed the config so that trailingSlash must be set to "always" in the kit config in order to generate nested index.htmls like was the default before.

https://kit.svelte.dev/docs/configuration#trailingslash

@Rich-Harris not sure about changing the default (per your PR) ... at least on a website hosted using the default settings for S3 hosting, something.html is not available at /something

[jamesb93]

Thanks @fzembow, this explains why I'm seeing the issue I can see.

[frederikhors]

I'm on "@sveltejs/kit": "1.0.0-next.278" with "@sveltejs/adapter-static": "1.0.0-next.28" and with default trailingSlash (never).

I have this in (the default for new demo init project) app.html:

<link rel="icon" href="%svelte.assets%/images/icons/favicon.png" />

The issues in my case are:

1. on each navigation SvelteKit requests the favicon
2. until some SvelteKit version ago the request had a correct path (http://localhost:3000/images/icons/favicon.png) now instead the path is wrong based on which route I'm in, example: http://localhost:3000/users/images/icons/favicon.png or http://localhost:3000/players/images/icons/favicon.png.

If I use trailingSlash: "always" the generated .html is empty! 0 KB!

[benmccann]

Rich said he tested this against Apache. It looks like S3 and nginx behave differently though. Are there any other web hosts / servers that people are encountering this issue with?

[frederikhors]

I'm simple using a http-server or a Golang web server.

[frederikhors]

But the problem is also with npm run dev.

[mikolajkazmierczak]

For anyone running Apache facing this issue right now and in need of a quick fix:
I got around it by:

1. defining a fallback: 'index.html' in the static adapter
2. creating a .htaccess file that reroutes any requests to 'index.html'

<ifModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule (.*) /index.html [QSA,L]
</ifModule>

This of course, is a very hacky solution. And most importantly: you loose SSR. That, admittedly, is not great. But if in your case SEO is also not of the utmost importance, then this could help you for the time being.

[benmccann]

Please take a look at trailingSlash: 'always': https://kit.svelte.dev/docs/configuration#trailingslash

If you set that option it will generate index.html files for you and I think it should address this issue

[cliftonlabrum]

For my fellow Google searchers/troubleshooters, if you are doing anything with dynamic paths:

class:active={$page.url.pathname === '/help'}

...and you use trailingSlash: 'always' in your build, then your path matching must have the trailing slash like this:

class:active={$page.url.pathname === '/help/'}

[DePasqualeOrg]

How about making the output path structure independent of the treatment of trailing slashes? A separate option could be added to determine whether about.svelte and about/index.svelte result in about.html or about/index.html. I'd like my URLs to omit the trailing slash, but I need to output index.html for my routes.