Sapper

This guide shows you how to deploy a Sapper application to Edgio.

Example SSR Site #

This Sapper example app uses server-side rendering and prefetching to provide lightening-fast transitions between pages.

Connector #

This framework has a connector developed for Edgio. See Connectors for more information.

System Requirements #

• Install Node.js 16.16.0

Sign up for Edgio #

Deploying requires an account on Edgio. Sign up here for free.

Getting Started #

If you don’t already have a Sapper app, use the terminal (or command prompt on Windows) to create one using the commands below:

1# for Rollup
2npx degit "sveltejs/sapper-template#rollup" my-app
3
4# for webpack
5npx degit "sveltejs/sapper-template#webpack" my-app
6
7cd my-app
8npm install
9npm run dev & open http://localhost:3000

To prepare your Sapper app for deployment on Edgio, run the following in the root folder of your project:

1npm i -g @edgio/cli # yarn global add @edgio/cli
2edgio init

This will automatically add all of the required dependencies and files to your project. These include:

• The @edgio/core package - Allows you to declare routes and deploy your application on Edgio
• The @edgio/sapper package - Provides router middleware that automatically adds Sapper routes to the Edgio router.
• The @edgio/prefetch package - Allows you to configure a service worker to prefetch and cache pages to improve browsing speed
• The @edgio/svelte package - Provides a Prefetch component for prefetching pages
• edgio.config.js
• routes.js - A default routes file that sends all requests to Sapper. Update this file to add caching or proxy some URLs to a different origin.

Webpack #

If you’re using webpack to build your app, update webpack.config.js to bundle all dependencies in the server build:

1externals: Object.keys(pkg.dependencies).concat('encoding'),
2externals: ['encoding'],

Rollup #

If you’re using Rollup to build your app, install @rollup/plugin-json:

1npm i -D @rollup/plugin-json

Then make the following changes to rollup.config.js:

1import pkg from './package.json';
2import json from '@rollup/plugin-json';

… and make the following changes to the server config …

1plugins: [
2  json(),
3  // Rest of the plugins
4];

and

1external: Object.keys(pkg.dependencies).concat(require('module').builtinModules),
2external: require('module').builtinModules,

Running Locally #

Test your app with the Sites on your local machine by running the following command in your project’s root directory:

1edgio dev

Simulate edge caching locally #

To simulate edge caching locally, run:

1edgio dev --cache

Deploying #

Deploy your app to the Sites by running the following command in your project’s root directory:

1edgio deploy

See Deployments for more information.

Prefetching #

Follow these steps to add prefetching to your app:

Service Worker #

Add the following to src/service-worker.js:

1import {timestamp, files, shell, routes} from '@sapper/service-worker';
2
3/* begin: add this to src/service-worker.js */
4import {precacheAndRoute} from 'workbox-precaching';
5import {Prefetcher} from '@edgio/prefetch/sw';
6
7precacheAndRoute([]);
8new Prefetcher().route();
9/* end: add this to src/service-worker.js */

Prefetch Component #

To prefetch data when links become visible in the viewport, wrap the link in the Prefetch component from @edgio/svelte

1<script>
2  import {Prefetch} from '@edgio/svelte';
3</script>
4
5<Prefetch url="/blog.json">
6  <a href="blog">Blog</a>
7</Prefetch>

Note that the behavior of the Prefetch component is different from Sapper’s built-in support for <a rel="prefetch"> in two ways:

• rel="prefetch" only prefetches data when the user hovers over the link. The Prefetch component will prefetch data when the link becomes visible, or, if the immediately prop is present, as soon as the page loads.
• Prefetch will only prefetch from the Performance cache, which means that additional traffic due to prefetching will never reach your API servers.

See Prefetching for more information.