v4.6.0
SIGN UP
LOGIN
FORUMSSTATUS
SUPPORT

This guide shows you how to deploy a Svelte application on Layer0.

This Next.js example app uses server-side rendering and prefetching to provide lightning-fast transitions between pages.

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

If you have not already done so, install the Layer0 CLI

npm i -g @layer0/cli

If you don't already have a Svelte app, create one by running the following:

npx degit sveltejs/template-webpack svelte-app
cd svelte-app
npm install

You can verify your app works by running it locally with:

npm run dev

In the root directory of your project run layer0 init:

layer0 init

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

  • The @layer0/core package - Allows you to declare routes and deploy your application on Layer0
  • The @layer0/prefetch package - Allows you to configure a service worker to prefetch and cache pages to improve browsing speed
  • layer0.config.js - A configuration file for Layer0
  • routes.js - A default routes file that sends all requests to Svelte.

To add service worker to your Svelte app, run the following in the root folder of your project:

npm i process register-service-worker workbox-webpack-plugin

Create service-worker.js at the root of your project with the following:

import { skipWaiting, clientsClaim } from 'workbox-core'
import { precacheAndRoute } from 'workbox-precaching'
import { Prefetcher } from '@layer0/prefetch/sw'

skipWaiting()
clientsClaim()
precacheAndRoute(self.__WB_MANIFEST || [])

new Prefetcher().route()

To register the service worker, first create registerServiceWorker.js in the src folder:

/* eslint-disable no-console */

import { register } from 'register-service-worker'

if (process.env.NODE_ENV === 'production') {
  register(`/service-worker.js`, {
    ready() {
      console.log(
        'App is being served from cache by a service worker.\n' +
          'For more details, visit https://goo.gl/AFskqB',
      )
    },
    registered() {
      console.log('Service worker has been registered.')
    },
    cached() {
      console.log('Content has been cached for offline use.')
    },
    updatefound() {
      console.log('New content is downloading.')
    },
    updated() {
      console.log('New content is available; please refresh.')
    },
    offline() {
      console.log('No internet connection found. App is running in offline mode.')
    },
    error(error) {
      console.error('Error during service worker registration:', error)
    },
  })
}

and to include the service worker in the app, edit main.js (in the src folder) as follows:

import './global.css'
import App from './App.svelte'
+ import './registerServiceWorker'

const app = new App({
  target: document.body,
  props: {
    name: 'world',
  },
})

export default app

Now, in webpack.config.js make the following additions:

+ const { InjectManifest } = require("workbox-webpack-plugin");
+ const webpack = require('webpack')

  plugins: [
    + new webpack.ProvidePlugin({
    +   process: 'process/browser',
    + }),
    + new InjectManifest({
    +   swSrc: "./service-worker.js",
    + })
  ]

Next you'll need to configure Layer0 routing in the routes.js file. Replace the routes.js file that was created during layer0 init with the following:

const { Router } = require('@layer0/core/router')

module.exports = new Router()
  // Send requests to static assets in the build output folder `public`
  .static('public')

  // Send everything else to the App Shell
  .fallback(({ appShell }) => {
    appShell('public/index.html')
  })

The example above assumes you're using Svelte as a single page app. It routes the static assets (JavaScript, CSS, and Images) in the production build folder public and maps all other requests to the app shell in public/index.html.

Refer to the Routing guide for the full syntax of the routes.js file and how to configure it for your use case.

Create a production build of your app by running the following in your project's root directory:

npm run build

Run Layer0 on your local machine:

npm run layer0:dev

Load the site http://127.0.0.1:3000

Create a production build of your app by running the following in your project's root directory:

npm run build

Next, deploy the build to Layer0 by running the layer0 deploy command:

layer0 deploy

Refer to the Deploying guide for more information on the deploy command and its options.

Edit this guide on GitHub