CODEWITHSUNDEEP
web-deploymentsveltekit
Mielipuoli
Mielipuoli

Reputation: 1510

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?

Upvotes: 3

Views: 4739

Answers (2)

Leftium
Leftium

Reputation: 17903

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.

Upvotes: 5

Sølve
Sølve

Reputation: 4406

This depends a bit on what type of adapter you use. I suspect you want to use the static adapter.

When using either adapter-static, or adapter-node, they both generates an output folder with files (usually /build)

If you use the static adapter, the files in /build would be the files you'd upload to your static file server.

If you need SSR, sveltekit will still try to prerender and build as many pages as it can statically, but pages that cannot be built staticly will be run server side. Node adapter needs you to run index.js in the build output folder in order for it to work. This index.js is a node web server. A basic "ftp server" would not work in this case.

If you want to use some other service that handles things for you, there's the two most popular ones:

In order to use these, you'd need to use another adapter. Read more about the different adapters here

It is really easy using these services, but they might cost more. If you use a lot of SSR, they might become pricy.

Upvotes: 3

Related Questions