How to host a SvelteKit application

Introduction

Svelte is great, there I said it. Along with Vue.js we're big fans of Svelte here at Vizalo. And to partner Svelte we love SvelteKit. So let's take look at how to host our SvelteKit application using Vizalo's managed apps platform, you'll get automatic deployments when you push to GitHub, automatic HTTPS, free preview domains, and much much more.

This tutorial will assume that you have built a SvelteKit app and know how to get it all setup, if not then we will have a tutorial for that later.

Setting up the code

So to deploy your SvelteKit app with Vizalo's managed app you'll need to make some very minor tweaks to your code. Nothing major don't worry!

Node adapter

Because Vizalo's managed apps are effectively managed containers you will need to use the Node.js Adapter for SvelteKit. You can install it by running: npm i -D @sveltejs/adapter-node and then adding the adapter to your svelte.config.js:

import adapter from '@sveltejs/adapter-node';

export default {
	kit: {
		adapter: adapter()
	}
};

Nixpacks

Under the hood Vizalo's managed apps uses a technology called Nixpacks to automatically build your application. A lot of the time Nixpacks can build an app without any configuration but sometimes it needs a little nudge in the right direction. For SvelteKit we just need to tell Nixpacks what the start command for our app should be. So in the root of our application create a file called: nixpacks.toml and add the following to this file:

[start]
cmd = 'node build'

That's it for code changes!

Deployment

Now we can head over to vizalo.co and hit register, enter your basic details, and then add a payment method.

Once your logged in click on Apps in the top navigation. From there you will need to connect your GitHub account.

Once that is done, select your repo from the repository list and enter the details of your app, which will include a name, location, CPU and RAM, environment variables and enter 3000 in the port box as this is the port our SvelteKit app will run on. And hit Create! You'll be taken to a page where we will provision the resources for your app, clone the repo, build it, and then deploy it!

In Production!

That's it! Your app is now live on the internet! You can visit it by click on the URL on the app overview page and as you'll see it will have automatic HTTPS. Now everytime you push to your selected branch this app will automatically be redeployed!