Edgio
Edgio Console

Frontity

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

System Requirements

Install Node.js

Sign up for Edgio

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

Getting Started

If you don’t already have a Frontity app, use the terminal (or command prompt on Windows) to create one using the commands below:
Bash
1npx frontity create my-app
To prepare your Frontity 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/cli
20 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/frontity package - Provides router middleware that automatically adds Frontity 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/react package - Provides a Prefetch component for prefetching pages
  • routes.js - A default routes file that sends all requests to Frontity. Update this file to add caching or proxy some URLs to a different origin.
  • sw/service-worker.js - The source code for your service worker, which enables prefetching when running on Edgio.
  • layer0.config.js - Contains configuration options for deploying on Edgio.

Adding the Edgio Service Worker

To add the Edgio service worker to your app, call the install function from @layer0/prefetch/window in a useEffect hook when the app first loads. For example, you can alter the Header component in your theme as follows:
JavaScript
1// mars-theme/src/components/header.js
2import { useEffect } from 'react'
3import { install } from '@layer0/prefetch/window'
4

5const Header = ({ state }) => {
6  useEffect(() => {
7    if (process.env.NODE_ENV === 'production') {
8      install()
9    }
10  }, [])
11}

Prefetching Content

To prefetch data into the browser cache using the service worker, use the Prefetch component from @layer0/react. This component prefetches a specific url from the Edgio edge when it becomes visible in the viewport. You typically wrap it around links. For example:
JavaScript
1import { Prefetch } from '@layer0/react'
2

3function MyComponent() {
4  return (
5    <Prefetch url="/some/data/url.json">
6      {/* When this link is scrolled into view, */}
7      {/* /some/data/url.json in JSON will be fetched in */}
8      {/* the background and put in the browser cache */}
9      <a href="/link/to/page">My Page</a>
10    </Prefetch>
11  )
12}

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.