Run a SvelteKit App

Getting an application running on Fly.io is essentially working out how to package it as a deployable image. Once packaged it can be deployed to the Fly.io platform.

In this guide we’ll learn how to deploy a SvelteKit application on Fly.io.

We’ll be using the standard web application generated by SvelteKit. This is a bare-bones app with no database.

Generate the SvelteKit app

We’ll assume you have NodeJS installed already and can run npm. We recommend using npm over yarn, as npm is what SvelteKit references in their documentation.

Let’s create a new project by running npm create. This will scaffold a new project asking you if you’d like to set up some basic tooling such as TypeScript.

npm create svelte@latest hello-sveltekit

Need to install the following packages:
  create-svelte@5.0.2
Ok to proceed? (y) y

create-svelte version 5.0.2

┌  Welcome to SvelteKit!
│
◇  Which Svelte app template?
│  SvelteKit demo app
│
◇  Add type checking with TypeScript?
│  Yes, using JavaScript with JSDoc comments
│
◇  Select additional options (use arrow keys/space bar)
│  none
│
└  Your project is ready!

...

Next steps:
  1: cd hello-sveltekit
  2: npm install (or pnpm install, etc)
  3: git init && git add -A && git commit -m "Initial commit" (optional)
  4: npm run dev -- --open

To close the dev server, hit Ctrl-C

Stuck? Visit us at https://svelte.dev/chat
...

You can run npm install to install the necessary dependencies and proceed with configuring the adapter.

Configuring the Adapter

Before you can deploy your SvelteKit app, you need to adapt it for your deployment target. Adapters are small plugins that take the built app as input and generate output for deployment.

In this example, to deploy your app on Fly.io, we’ll install the Node Adapter. You can install it by executing the command npm i -D @sveltejs/adapter-node. Then, replace the first line in your svelte.config.js file with the following:

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

Configuring the start command

The “start” command is used to initiate your application and should be included before deploying.

To add the command, locate the scripts section within the package.json file and insert "start": "node build", at the beginning of the section. As a result, your scripts section in the package.json file should appear as follows:

"scripts": {
    "start": "node build",
    ...    
}

Building the Application

Building a SvelteKit app happens in two stages, both of which are executed when the command npm run build is run.

Firstly, Vite undertakes the creation of an optimized production build that encompasses your server code, browser code, and, if applicable, your service worker. Prerendering is carried out during this stage if deemed necessary.

Secondly, an adapter is employed to fine-tune this production build to align with your specific target environment.

Preview your Application

Once the build process is complete, you can preview your production build locally by executing the command npm run preview.

Install Flyctl and Login

We are ready to start working with Fly.io, and that means we need flyctl, our CLI app for managing apps on Fly.io. If you’ve already installed it, carry on. If not, hop over to our installation guide. Once that’s installed you’ll want to log in to Fly.io.

Deploy the app on Fly.io

Each Fly App needs a fly.toml file to tell the system how we’d like to deploy it. That file can be automatically generated with fly launch. This command will also generate a Dockerfile for deployment.

fly launch

Creating app in \fly\guides\hello-sveltekit
Scanning source code
Detected a NodeJS app
? Choose an app name (leave blank to generate one): hello-sveltekit
? Select Organization: demo (demo)
? Select region: ord (Chicago, Illinois (US))
App will use 'ord' region as primary

Created app 'hello-sveltekit' in organization 'demo'
Admin URL: https://fly.io/apps/hello-sveltekit
Hostname: hello-sveltekit.fly.dev
installing: npm install @flydotio/dockerfile --save-dev
...
Wrote config file fly.toml
Validating \fly\guides\hello-sveltekit\fly.toml
Platform: machines
✓ Configuration is valid

If you need custom packages installed, or have problems with your deployment
build, you may need to edit the Dockerfile for app-specific changes. If you
need help, please post on https://community.fly.io.

Now: run 'fly deploy' to deploy your Node app.
...

Inside fly.toml

The fly.toml file now contains a default configuration for deploying your app. In the process of creating that file, flyctl has also created a Fly.io application slot of the same name, “hello-sveltekit”. If we look at the fly.toml configuration file we can see the name in there:

app = "hello-sveltekit"
primary_region = "ord"

[http_service]
  internal_port = 3000
  force_https = true
  auto_stop_machines = true
  auto_start_machines = true
  min_machines_running = 0
  processes = ["app"]
...

The flyctl command will always refer to this file in the current directory if it exists, specifically for the app name/value at the start. That name will be used to identify the application to the Fly.io platform.

The rest of the file contains settings to be applied to the application when it deploys.

Deploying to Fly.io

We are now ready to deploy our containerized app to Fly.io:

fly deploy

This will get the app name hello-sveltekit from our fly.toml and start the process of deploying our application to Fly.io using the Dockerfile. fly will return you to the command line when it’s done.

Viewing the Deployed App

If you want to find out more about the deployment. The command fly status will give you all the essential details.

fly status

App
  Name     = hello-sveltekit
  Owner    = personal
  Hostname = hello-sveltekit.fly.dev
  Image    = hello-sveltekit:deployment-01H4MDR3GVFX20X5DNVZS4BPWK
  Platform = machines

Machines
PROCESS ID              VERSION REGION  STATE   CHECKS  LAST UPDATED
app     91857500000083  1       ord     started         2023-07-06T01:49:28Z
app     e2865100000086  1       ord     stopped         2023-07-06T01:50:04Z

Connecting to the App

The quickest way to browse your newly deployed application is with the flyctl apps open command.

flyctl apps open

Opening https://hello-sveltekit.fly.dev/

Your browser will be sent to the displayed URL.

Bonus Points

If you want to know what IP addresses the app is using, try fly ips list:

fly ips list

VERSION IP                      TYPE            REGION  CREATED AT 
v6      2a09:8280:1::69:37fd    public          global  18m55s ago
v4      66.241.125.223          public (shared)

Arrived at Destination

You have successfully built, deployed, and connected to your first SvelteKit application on Fly.io.

Open in ChatGPT
Report an issue or edit this page on GitHub