Deploy your Svelte app with Layer0
Tags: svelte, layer0, static, hosting
Published: 2021-09-11 16:21:25

## Configuring your Svelte app for Layer0
This guide assumes that you're using Webpack with Svelte.

Find the GitHub Repo containing the entire setup at [rishi-raj-jain/svelte-layer0-example](https://github.com/rishi-raj-jain/svelte-layer0-example)

Deployed link: https://rishi-raj-jain-svelte-default.layer0.link/

### [Optional] Svelte template with Webpack
To create a new project based on this template using degit:

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

### Installation
To install the Layer0 CLI run

```bash
npm i -g @layer0/cli
```

### Initialize your project

In the root directory of your project run:

```bash
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.

### Adding Layer0 Service Worker

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

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

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

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

```js
/* 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:

```diff
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` at the root of your project with the following config:

```js
+ const { InjectManifest } = require("workbox-webpack-plugin");
+ const webpack = require('webpack')
....rest of the config
  plugins: [
    + new webpack.ProvidePlugin({
    +   process: 'process/browser',
    + }),
    + new InjectManifest({
    +   swSrc: "./service-worker.js",
    + })
    ...rest of plugins
  ]
```

### Configure the routes

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:

```js
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`.

### Run the Svelte app locally on Layer0

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

```bash
npm run build
```

Run layer0 on your local machine:

```bash
npm run layer0: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
npm run build
layer0 run --production
```

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

```bash
layer0 deploy
```