Search code examples
web-deploymentsveltekit

How can I deploy a SvelteKit app using a webhosting service?


I'm a web developer, but terrible at networking, which is why I pay a web hosting service to do that for me. All I need to do is upload the files by FTP into a folder called /httpdocs, which is the website's root address, and it's up.

With Svelte Sapper this works fine by using the command npm run export, which produces a bundle containing an index.html. All I needed to add was a .htaccess file in the root, which looks like this. I'm unfamiliar with this syntax (again, networking is not my thing), but all I know is that the second line does the magic, redirecting all URL's to the domain to the root. Then Svelte takes care of the routing within the app.

 RewriteEngine on 
 RewriteBase / 
 RewriteCond %{REQUEST_FILENAME} !-d
 RewriteCond %{REQUEST_FILENAME} !-f 
RewriteRule ^(.*)$ / [NC,L]

SvelteKit doesn't have an "export" npm script. It does have a "build" script, but that doesn't produce an index.html.

How can I export my app and create a bundle that I can upload to the web server?


Solution

  • Use the static adapter to produce files that can be uploaded to a server:

    • You will have to change the svelte.config.js file to use the static adapter
    • Then run the command npm build
    • The files you can upload should be in the /build/ directory.

    Note the default method for deploying SvelteKit sites is not FTP, but rather pushing changes to a (GitHub) repository. A service like Vercel watches for commits to the repository and automatically builds from source.

    I personally find this much more convenient. It also allows you to take advantage of SvelteKit's serverless-first design.