Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

app.html doesn't respect base path setting #2852

Closed
andrewbanchich opened this issue Nov 21, 2021 · 6 comments
Closed

app.html doesn't respect base path setting #2852

andrewbanchich opened this issue Nov 21, 2021 · 6 comments
Labels
bug Something isn't working
Milestone

Comments

@andrewbanchich
Copy link
Contributor

andrewbanchich commented Nov 21, 2021

Describe the bug

The skeleton template creates an app.html file that contains:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<link rel="icon" href="/favicon.png" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		%svelte.head%
	</head>
	<body>
		<div id="svelte">%svelte.body%</div>
	</body>
</html>

Setting a base path using this setting breaks the favicon because it's hardcoded to use the root path (https://mysite.com/favicon.png), not the base (https://mysite.com/foo/favicon.png).

This is even more troublesome after adding a global stylesheet. The only alternative I've found is adding the stylesheet in <svelte:head> which is far from ideal.

I couldn't find documentation for %svelte.head% or %svelte.body%, but I think it would useful to have something like those that could access the config's base path value.

Reproduction

https://github.com/sveltejs/kit

npm init svelte@next my-app
cd my-app
npm install
npm run dev -- --open

Logs

No response

System Info

System:
    OS: Linux 5.13 Pop!_OS 21.04
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz
    Memory: 985.59 MB / 23.33 GB
    Container: Yes
    Shell: 3.3.0 - /usr/bin/fish
  Binaries:
    Node: 14.17.0 - /usr/local/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 8.1.1 - /usr/local/bin/npm
  Browsers:
    Firefox: 94.0


### Severity

annoyance

### Additional Information

_No response_
@Alotor
Copy link

Alotor commented Dec 16, 2021

Have you find a workaround around this? I have the base path in the html but it's a bit messy to change it when deploying...

@andrewbanchich
Copy link
Contributor Author

Other than the <svelte:head> one I mentioned above, no.

@andrewbanchich
Copy link
Contributor Author

Is this something that should be addressed before 1.0 @benmccann ?

@benmccann
Copy link
Member

Was this fixed by #3234 and / or #3346 ?

@andrewbanchich
Copy link
Contributor Author

I upgraded SvelteKit to 1.0.0-next.232 to try this out again, but running npm run build no longer produces an index.html in the build directory if I set kit.paths.base. It doesn't throw any errors either, so I'm not sure why.

Setting kit.paths.assets requires it to be an absolute URL, so I'd prefer to use base either way to avoid having to manually build for separate domains.

SirkoS added a commit to i-adopt/terminologies that referenced this issue Jan 17, 2022
seems we suffer from the same issue: sveltejs/kit#2852 (comment)
@benmccann benmccann added the bug Something isn't working label Jan 18, 2022
@benmccann benmccann added this to the 1.0 milestone Jan 18, 2022
@nhe23
Copy link
Contributor

nhe23 commented Jan 22, 2022

Meanwhile the generated app.html uses:

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

which initially resolved the issue.
However there was a bug that messed up prerendering when base path was configured. This has been resolved by #3500. So now everything works as expected and this issue can probably be closed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

4 participants