As part of our filing for Chapter 11 bankruptcy relief, Akamai has acquired select assets from Edgio, including certain customer contracts from our content delivery, applications, and security businesses, but not including Uplynk. We encourage any active Edgio delivery, applications, or security customers that are not already engaged with Akamai to migrate their services, to contact their local Akamai office or support@edg.io as soon as possible to help avoid service interruptions. Service will end on January 15, 2025.


Any Edgio Uplynk customers can reach out to support@uplynk.com for any questions or concerns.

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.