hostingsveltekit

Sveltekit app doesn't load .svelte files when hosted


I am building a site with Sveltekit and in-IDE tests (npm run build) show things fine, the routing works and pages display correctly. However when I've tried to upload the app to a dev site provided to me the framework doesn't seem to load.

It loads app.html but doesn't seem to pick up that it's a sveltekit program, instead only displaying '%sveltekit.head% %sveltekit.body%'

Here's my app.html:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="icon" href="%sveltekit.assets%/favicon.png" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        %sveltekit.head%
    </head>
    <body data-sveltekit-preload-data="hover">
        <div style="display: contents">%sveltekit.body%</div>
    </body>
</html>

I'm inexperienced in both sveltekit and FTP hosting so I'm wondering if I've uploaded the wrong file to the server? On fileZilla (and when testing with vs-code sftp extension) I've mostly tried uploading the whole app folder but is this incorrect?


Solution

  • app.html is the source file, not the built output. You need to upload the files that SvelteKit generates on build.

    If you deploy via FTP, this sounds like you have a static file server. If so you should check out the docs on static site generation. SSG requires using the adapter from @sveltejs/adapter-static which will by default output the result to a build directory which is what you should upload.