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:

• GitHub
• GitLab
• Docker Hub
• DigitalOcean Container Registry

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": "..."
}

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:

• HTTP Routes / Path: /
• Build command: npm run build
• Run command: npm run preview
• HTTP Port: 3000

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:

• Environment variables: Settings -> App / Component -> Environment variables (choose “App” to make them available to all components or select only one component to make them only available to the specified component)
• Disable auto-deploy: Settings -> Component -> Source

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 👋