href, root path must start with `/` & `<base href={$page.path} />` & hash urls fix

[qwabra]

trafficstars

before

remove

<!-- %sapper.base% -->

• http://localhost:3000/about - is ok
• http://localhost:3000/about/ - fail

patch

template.html

https://github.com/sveltejs/sapper-template/blob/master/src/template.html#L8-L12

<!-- remove this -->
<!-- %sapper.base% -->

<!-- FIXME: add `/`-->
<link rel='stylesheet' href='/global.css'>
<!-- FIXME: add `/`-->
<link rel='manifest' href='/manifest.json' crossorigin='use-credentials'>
<!-- FIXME: add `/`-->
<link rel='icon' type='image/png' href='/favicon.png'>

runtime/src/server/middleware/get_page_handler.ts

node_modules/sapper/runtime/server.mjs:2544

https://github.com/sveltejs/sapper/blob/master/runtime/src/server/middleware/get_page_handler.ts#L321

styles = Array.from(css_chunks)
    //  FIXME: add `/`
    .map(href => `<link rel="stylesheet" href="/client/${href}">`)
    .join('')

src/routes/_layout.svelte

<svelte:head>
  <base href={$page.path} />
</svelte:head>

after

• relevant <base href={$page.path} />

check

• yarn build
• yarn export
• cd __sapper__/export
• http-server

open and look in console(has no network errors)

• http://localhost:8080/about - OK
• http://localhost:8080/about/ - OK

[antony]

It might be a nice feature to enable / at the end of URLs. However, you'd need to consider the scenario where somebody sets a custom base url for an application. ~

See the docs at https://sapper.svelte.dev/docs#Base_URLs

Have you considered/tested this scenario?

I also feel like this is potentially a breaking change.

[qwabra]

short

Global paths must be global!

I also feel like this is potentially a breaking change.

yes, me too.
get_page_handler.ts L285 L289 L293
use this construction: ${req.baseUrl}/client/${*} so, i think the right way to use somethink like this

styles = Array.from(css_chunks)
    .map(href => `<link rel="stylesheet" href="${req.baseUrl}/client/${href}">`)
    .join('')

for a situation when sapperRoot is different from /

somebody sets a custom base url

https://sapper.svelte.dev/docs#Base_URLs

WHEN:

%sapper.base% is set - similarly as get_page_handler.ts L285 L289 L293

%sapper.base% is removed (by developer)

1. it is developer responsibility
2. or, see at the end

---

get_page_handler.ts#L285 get_page_handler.ts#L289 get_page_handler.ts#L293

---

extend. IMHO:

base url

let's define the concepts

• sapper req.baseUrl
• html <base>

sapper

1. sapper baseUrl must be renamed to sapperRoot , req.sapperRoot (see below)
2. free %sapper.base% from /.
   it must be undefined/unset by default, and configurable inside src/routes/_layout.svelte

   <svelte:head>
     <base href={$page.path} />
   </svelte:head>
   

3. ? and declare constants like:

   const genURL = (...q) => q.join('/')
   // depends on inner supper export behavior
   const genURLClient = ({ sapperRoot }, ...q) => genURL(sapperRoot || '/', 'client', ...q)
   const genURLLegacy = ({ sapperRoot }, ...q) => genURL(sapperRoot || '/', 'client/legacy', ...q)
   

   styles = Array.from(css_chunks)
       .map(href => `<link rel="stylesheet" href="${genURLClient(req, href)}">`)
       .join('')
   

   profit is:
   • protected from typos
   • code navigation "go to"
   • code navigation "find all references"
   • quick rename
   • strongly structure export behavior (declarations nearby)
   • ...

siteURL

and, i think, good idea is add new supper config property - siteURL, which can be concatenated with sapperRoot and href.

arguments for. html <base> - use for all relative URLs in a document ©MDN

MDN:

The HTML <base> element specifies the base URL to use for all relative URLs in a document.

test ( it is native behavior for browsers and static web servers )

$ tree ./www/
./www/
|-- about
|   |-- contacts.html
|   `-- index.html
`-- index.html

    <!-- *.html -->
    <a href="." id="relativeURL">relativeURL</a><hr>
    <script> document.write(` <b>relativeURL.href</b>: "${relativeURL.href}" `) </script>

cd ./www/
http-server

• http://localhost:8080/ === http://localhost:8080/index.html relativeURL.href: http://localhost:8080/
• http://localhost:8080/about/ === http://localhost:8080/about/index.html relativeURL.href: http://localhost:8080/about/
• http://localhost:8080/about/contacts.html relativeURL.href: http://localhost:8080/about/

conclusion

• ! Global paths must be global
• ! <base> is configure relative paths
• ! %sapper.base% by default generate nothing everytime (??? OR then siteURL/root is unset - in discuss)
• ? new tags
  • <sapper:siteURL path="httpS://localhost:8080" /> - IMPORTANT allow manually set up to use httpS protocol
  • <sapper:root path="blog" />
  • <sapper:base path="{$page.path}" /> - conflict with <svelte:head> <base /> wich generates <base href="httpS://localhost:8080/blog/{$page.path}" />

[johannesrave]

i just ran into this when using svelte-kit. i realize that i can set the base path in svelte.config.cjs, and while this fixed my assets, my routes are still pointing to the site-root instead of the svelte-base-url.

[qwabra]

this issue is about sapper. u say "svelte-kit".

• https://kit.svelte.dev
• https://kit.svelte.dev/docs#configuration
• https://kit.svelte.dev/docs#configuration-paths

  base — a root-relative (i.e. starts with /) path that specifies where your app is served from. This allows the app to live on a non-root path

---

• https://svelte.dev/chat