Edgio
Edgio Console

SvelteKit

SvelteKit is the official application framework from the Svelte team. This guide walks you through deploying SvelteKit sites to Edgio.

Prerequisites

Setup requires:

Install the Edgio CLI

If you have not already done so, install the Edgio CLI.
Bash
1npm i -g @edgio/cli@latest

Create Your Sveltekit App

If you don’t have an existing SvelteKit app, you can create one by running:
Bash
1npm create svelte@latest my-svelte-app
To use the default app, make the following selections when prompted:
plaintext
1◆ Which Svelte app template?
2  ❯ SvelteKit demo app (A demo app showcasing some of the features of SvelteKit - play a word guessing game that works without JavaScript!)
3◆ Add type checking with TypeScript?
4  ❯ Yes, using JavaScript with JSDoc comments
5◆ Select additional options (use arrow keys/space bar)
6  ❯ none
Install all dependencies of your new project by running:
Bash
1cd my-svelte-app
2npm install

Initializing Your Project

Initialize your project for use with Edgio by running the following command in your project’s root directory:
Bash
1edgio init --edgioVersion latest
This will automatically add all of the required dependencies and files to your project. These include:
  • The @edgio/core package
  • The @edgio/cli package
  • The @edgio/prefetch package - Allows you to configure a service worker to prefetch and cache pages to improve browsing speed
  • The @edgio/connectors package
  • edgio.config.js - Contains various configuration options for Edgio.
  • routes.js - A default routes file that adds routes for pre-rendered pages, assets and sends all unmatched requests to the SvelteKit server. Update this file to add caching or proxy some URLs to a different origin.

Routing

The default routes.js file created by edgio init sends all requests to SvelteKit server via a fallback route.
JavaScript
1// This file was added by edgio init.
2// You should commit this file to source control.
3

4const { Router } = require('@edgio/core/router');
5const { connectorRoutes } = require('@edgio/connectors');
6

7export default new Router().use(connectorRoutes);
Refer to the CDN-as-code guide for the full syntax of the routes.js file and how to configure it for your use case.

Run the Sveltekit App Locally on Edgio

Create a production build of your app by running the following in your project’s root directory:
Bash
1npm run build
Test your app with the Sites on your local machine by running the following command in your project’s root directory:
Bash
1edgio dev
Load the site http://127.0.0.1:3000

Deploying

Create a production build of your app by running the following in your project’s root directory:
Bash
1npm run build
Deploy your app to the Sites by running the following command in your project’s root directory:
Bash
1edgio deploy
Refer to the Deployments guide for more information on the deploy command and its options.