Approximate time to completion: 7 mins

Enabling Layer0 on an existing site is the fastest and easiest way to start seeing performance benefits made possible by the Layer0 Edge Network. In the guide below, we will generate a node project, configure it to cache some static assets, deploy it, and visit the live site. By enabling the Edge Network, we will get both edge caching and predictive prefetching.

If any point, you want a more detailed guide, we've got that too.

As shown below, Layer0 becomes the main CDN for your site:

traffic

Requests for your site will now pass through Layer0's globally distributed edge network and then to your origin server.

A full production deployment requires changing your site's DNS to allow requests to come to Layer0 first. View our production guide for that process.

If you do not have an account yet, visit Layer0 to create one. Do not create a site in the UI at this point, we will be deploying from the command line.

Install the Layer0 CLI

npm i -g @layer0/cli

Create your project using Layer0's create module:

npm create layer0-app@latest

The Layer0 create module will prompt you for the following information:

  • Name: Give your project name.
  • Template: Select the Default template option.
  • Hostname: Enter the domain of the origin server that Layer0 will be accelerating.
  • Package manager: Pick npm unless you have strong preference and experience with yarn. This guide will assume npm.

Refer to the layer0.config.js guide for more details

In the src folder, there are the following files:

  • service-worker.ts: prefetches content and stores in cache
  • shoppingFlowRouteHandler.ts: implements caching rules
  • cache.ts: contains values applied to caching rules in shoppingFlowRouteHandler.ts
  • routes.ts: routes to be cached and prefetched are defined, as well as what to pass through without modification and what to serve up as static content.
  • browser.ts: entry point for the main.js javascript bundle which is added to the window.

We need to configure caching in our newly created project. The project contains some generic starter routes already, but these should be customized to fit your site. These routes should be added in the routes.ts file.

At this point, the only item that should require changing is a path match. We suggest starting with a few basic routes to get the feel for how it works.

// src/routes.ts
import { Router } from '@layer0/core/router'
import shoppingFlowRouteHandler from './shoppingFlowRouteHandler'

export default new Router()
  .get('/', shoppingFlowRouteHandler)
  .get('/collections/*path', shoppingFlowRouteHandler)
  .get('/products/*path', shoppingFlowRouteHandler)

The handler function passed into a route match will determine the behavior of the cache for the request. Abstracting this handler function, allows it to apply to multiple routes.

// src/shoppingFlowRouteHandler.ts
import { CACHE_PAGES } from './cache'
import { RouteHandler } from '@layer0/core/router/Router'

const handler: RouteHandler = async ({ cache, removeResponseHeader, proxy }) => {
  cache(CACHE_PAGES)
  removeUpstreamResponseHeader('set-cookie') // The presence of a set-cookie header would prevent the response from being cached, so ensure set-cookie headers are removed.
  proxy('origin')
}

export default handler

Abstracting out the constants of the cache allows them to be reused across different routes.

// src/cache.ts
const ONE_HOUR = 60 * 60
const ONE_DAY = 24 * ONE_HOUR
const ONE_YEAR = 365 * ONE_DAY

/**
 * The default cache setting for pages in the shopping flow
 */
export const CACHE_PAGES = {
  edge: {
    maxAgeSeconds: ONE_HOUR,
  },
  browser: {
    maxAgeSeconds: 0,
    serviceWorkerSeconds: ONE_HOUR,
  },
}

Refer to the guides on Routing and Caching for the full syntax to use in your routes.js file.

Learn advanced prefetching techniques to achieve the best possible performance.

Now that you're satisfied with your site in local development, it's time to deploy it to Layer0 Cloud. Once your code is deployed to Layer0 Cloud, you can formally evaluate site performance and QA functionality.

To deploy your site to Layer0, you must first sign up for an account.

Deploy your site with the following command:

# Root of project
0 deploy

Once your project code is up and running, you can view its performance from within the app.layer0.co cockpit. Using the tools available here, you can understanding the caching behavior of the routes you have added. Continue adding routes and dialing in your config until you are ready to launch the site and code.

If you have any issues during this process, check our forums for assistance.

Edit this guide on GitHub