Frontity

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

Example #

Connector #

This framework has a connector developed for Edgio. See Connectors for more information.

System Requirements #

• Install Node.js 14.19.0

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:

1npx frontity create my-app

To prepare your Frontity app for deployment on Edgio, run the following in the root folder of your project:

1npm i -g @edgio/cli # yarn global add @edgio/cli
2edgio init

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

• The @edgio/core package - Allows you to declare routes and deploy your application on Edgio
• The @edgio/frontity package - Provides router middleware that automatically adds Frontity routes to the Edgio router.
• The @edgio/prefetch package - Allows you to configure a service worker to prefetch and cache pages to improve browsing speed
• The @edgio/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.
• edgio.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 @edgio/prefetch/window in a useEffect hook when the app first loads. For example, you can alter the Header component in your theme as follows:

1// mars-theme/src/components/header.js
2import { useEffect } from 'react'
3import { install } from '@edgio/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 @edgio/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:

1import { Prefetch } from '@edgio/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:

1edgio dev

Simulate edge caching locally #

To simulate edge caching locally, run:

1edgio dev --cache

Deploying #

Deploy your app to the Sites by running the following command in your project’s root directory:

1edgio deploy

See Deployments for more information.