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.