linu.us Logo
Linus Benkner

Deploy a SvelteKit-App to DigitalOcean

Deploy a SvelteKit-App to DigitalOcean

A quick guide on how to deploy your SvelteKit-App to the DigitalOcean App Platform

Hii 👋

here on my blog and on Twitter, I’ve said very often that SvelteKit is awesome. So in this guide, I’ll show you how you can deploy and host your SvelteKit-App.

Requirements

To follow along, you obviously need a SvelteKit-App you want to deploy. If you don’t have one, I’ve already written an article on how to set up SvelteKit.

There are multiple ways you can create an app on the DigitalOcean App Platform. You need to choose between one of these sources:

I’ve only tested it with GitHub and that’s what I’m using in this demo. To follow along, I assume you have your SvelteKit-App stored in a GitHub repository.

Setup Node

By default, the app Platform uses NodeJS version 12. You can change the NodeJS version in the package.json file. I’ll change the version to NodeJS 16.13.1.

{
  "engines": {
    "node": "16.13.1"
  },
  "name": "..."
}

Advertisement

Expose the host

In order for your app to be accessible, the host must be exposed. We can do this with a simple --host flag on the preview command in the package.json:

{
  "scripts": {
    "dev": "svelte-kit dev",
    "build": "svelte-kit build",
    "package": "svelte-kit package",
    "preview": "HOST=0.0.0.0 svelte-kit preview --host"
  }
}

Setup the App

If you’re ready to deploy, head over to DigitalOcean and create a new app. In the source selection, select the source where your app’s source code is hosted.

In the next step, you’ll be asked for a unique name for your app. Also, you need to choose the branch that’ll be used as the source for the deployments. If you push an update to this branch, the app will re-deploy automatically (you can disable this later).

Next up, choose “Web service” as the type for the component (one app can have multiple components. The SvelteKit-App is one component). Settings:

You can also add environment variables here if you want (can be changed later).

After this configuration, move on to the plan selection. Make sure you’re using at least the Basic-Plan because in order for our SvelteKit-App to work we need the “dynamic-apps” feature.

If you’re just getting started, the smallest container size for 5$ / month is most likely enough for you.

Now you can hit launch and wait for the deployment process to be finished.

More configuration

Here are some settings you might want to change:


And that’s it for this article - I hope this helped you and you can now deploy your SvelteKit-App easy and fast 🔥

Thank you so much for reading and I’ll see you in the next one 👋


Hey 👋 Don't want to miss new articles?

Drop your mail and I'll notify you if I have something new!

* indicates required

More Articles

Create a WordPress Plugin from Scratch - Full Beginners Guide

Create a WordPress Plugin from Scratch - Full Beginners Guide

Linus Benkner
NeoVim Setup for PHP and NodeJS Development

NeoVim Setup for PHP and NodeJS Development

Linus Benkner
Deploy a SvelteKit-App to DigitalOcean

Deploy a SvelteKit-App to DigitalOcean

Linus Benkner
SQL: The basics and beyond

SQL: The basics and beyond

Linus Benkner
Do you find this content helpful?
Buy Me A Coffee