> ## Documentation Index
> Fetch the complete documentation index at: https://docs.fly.io/llms.txt
> Use this file to discover all available pages before exploring further.

# 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](https://kit.svelte.dev/) application on Fly.io.

We'll be using the standard web application generated by [SvelteKit](https://kit.svelte.dev/). 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](https://kit.svelte.dev/docs/creating-a-project).

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.

<CodeGroup>
  ```bash cmd theme={null}
  npm create svelte@latest hello-sveltekit
  ```

  ```output output theme={null}
  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
  ...
  ```
</CodeGroup>

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:

```javascript theme={null}
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:

```json theme={null}
"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](/flyctl/install). Once that's installed you'll want to [log in to Fly.io](/getting-started/sign-up-sign-in).

## *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.

<CodeGroup>
  ```bash cmd theme={null}
  fly launch
  ```

  ```output output theme={null}
  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.
  ...
  ```
</CodeGroup>

## *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:

```toml theme={null}
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:

```bash theme={null}
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.

<CodeGroup>
  ```bash cmd theme={null}
  fly status
  ```

  ```output output theme={null}
  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
  ```
</CodeGroup>

## *Connecting to the App*

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

<CodeGroup>
  ```bash cmd theme={null}
  flyctl apps open
  ```

  ```output output theme={null}
  Opening https://hello-sveltekit.fly.dev/
  ```
</CodeGroup>

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`:

<CodeGroup>
  ```bash cmd theme={null}
  fly ips list
  ```

  ```out out theme={null}
  VERSION IP                      TYPE            REGION  CREATED AT 
  v6      2a09:8280:1::69:37fd    public          global  18m55s ago
  v4      66.241.125.223          public (shared)
  ```
</CodeGroup>

## Arrived at Destination

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