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.
System Requirements
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:
Bash
1# for Rollup2npx degit "sveltejs/sapper-template#rollup" my-app34# for webpack5npx degit "sveltejs/sapper-template#webpack" my-app67cd my-app8npm install9npm 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:
Bash
1npm i -g @layer0/cli # yarn global add @layer0/cli20 init
This will automatically add all of the required dependencies and files to your project. These include:
- The
@layer0/core
package - Allows you to declare routes and deploy your application on Edgio - The
@layer0/sapper
package - Provides router middleware that automatically adds Sapper routes to the Edgio router. - The
@layer0/prefetch
package - Allows you to configure a service worker to prefetch and cache pages to improve browsing speed - The
@layer0/svelte
package - Provides aPrefetch
component for prefetching pages layer0.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:JavaScript
1output: config.server.output(),2 target: 'node',3 resolve: { alias, extensions, mainFields },4-externals: Object.keys(pkg.dependencies).concat('encoding'),5+externals: ['encoding'],6 module: {7 rules: [8 {
Rollup
If you’re using Rollup to build your app, install
@rollup/plugin-json
:Bash
1npm i -D @rollup/plugin-json
Then make the following changes to
rollup.config.js
:JavaScript
1import babel from '@rollup/plugin-babel';2 import { terser } from 'rollup-plugin-terser';3 import config from 'sapper/config/rollup.js';4-import pkg from './package.json';5+import json from '@rollup/plugin-json';67 const mode = process.env.NODE_ENV;8 const dev = mode === 'development';
… and make the following changes to the
server
config …JavaScript
1input: config.server.input(),2 output: config.server.output(),3 plugins: [4+ json(),5 replace({6 'process.browser': false,7 'process.env.NODE_ENV': JSON.stringify(mode)
and
JavaScript
1-external: Object.keys(pkg.dependencies).concat(require('module').builtinModules),2+external: 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:
Bash
10 dev
Simulate edge caching locally
To simulate edge caching locally, run:
Bash
10 dev --cache
Deploying
Deploy your app to the Sites by running the following command in your project’s root directory:
Bash
10 deploy
See deploying for more information.
Prefetching
Follow these steps to add prefetching to your app:
Service Worker
Add the following to
src/service-worker.js
:JavaScript
1import { timestamp, files, shell, routes } from '@sapper/service-worker'23/* begin: add this to src/service-worker.js */4import { precacheAndRoute } from 'workbox-precaching'5import { Prefetcher } from '@layer0/prefetch/sw'67precacheAndRoute([])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 @layer0/svelte
HTML
1<script>2 import { Prefetch } from '@layer0/svelte'3</script>45<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. ThePrefetch
component will prefetch data when the link becomes visible, or, if theimmediately
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.