Edgio
Edgio

React

This guide shows you how to serve a React application to Edgio. If you’re using Next.js specifically, we suggest using the Next.js guide.

Example

Connector

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

System Requirements

Sign up for Edgio

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

Install the Edgio CLI

If you have not already done so, install the Edgio CLI.

With npm:

Bash
1npm i -g @edgio/cli

With yarn:

Bash
1yarn global add @edgio/cli

Create React App

This guide will use Create React App to generate a project.

Bash
1npx create-react-app my-app

Initializing your project with Edgio

Then, in the root folder of your project, run:

Bash
1edgio init --connector=@edgio/react-cra

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

  • The @edgio/core package
  • The @edgio/cli package
  • The @edgio/react-cra package
  • edgio.config.js- Contains various configuration options for Edgio.
  • routes.js - A default routes file that sends all requests to the React. Update this file to add caching or proxy some URLs to a different origin.

Routing

The default routes.js file created by edgio init sends all requests to React server via a fallback route.

JavaScript
1// This file was automatically added by edgio deploy.
2// You should commit this file to source control.
3
4const { Router } = require('@edgio/core/router')
5const { reactCRARoutes } = require('@edgio/react-cra')
6
7module.exports = new Router()
8 // Prevent search engines from indexing permalink URLs
9 .noIndexPermalink()
10 .use(reactCRARoutes)

Running Locally

To test your app locally, run:

Bash
1edgio dev

You can do a production build of your app and test it locally using:

Bash
1edgio build && edgio run --production

Setting --production runs your app exactly as it will be when deployed to the Edgio cloud.

Deploy to Edgio

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

Bash
1edgio deploy

See Deployments for more information.

Prefetching

Install the @edgio/react to enable prefetching.

Bash
1npm i -D @edgio/react

Add the Prefetch component from @edgio/react to your links to cache pages before the user clicks on them. Here’s an example:

JavaScript
1import { Link } from 'react-router'
2import { Prefetch } from '@edgio/react'
3
4export default function ProductListing() {
5 return (
6 <div>
7 {/* The URL you need to prefetch is the API call that the page component will make when it mounts. It will vary based on how you've implemented your site. */}
8 <Prefetch url="/api/products/1.json">
9 <Link to="/p/1">Product 1</Link>
10 </Prefetch>
11 </div>
12 )
13}

By default, Prefetch waits until the link appears in the viewport before prefetching. You can prefetch immediately by setting the immediately prop:

JavaScript
1<Prefetch url="/api/products/1.json" immediately>
2 <Link to="/p/1">Product 1</Link>
3</Prefetch>

Service Worker

In order for prefetching to work, you need to configure a service worker that uses the Prefetcher class from @edgio/prefetch.

Following the Create React App example from above? Make sure to create a file in src/service-worker.js. Paste the code example below into that file.

JavaScript
1import { precacheAndRoute } from 'workbox-precaching'
2import { skipWaiting, clientsClaim } from 'workbox-core'
3import { Prefetcher } from '@edgio/prefetch/sw'
4
5skipWaiting()
6clientsClaim()
7precacheAndRoute(self.__WB_MANIFEST || [])
8
9new Prefetcher().route()

In order to install the service worker in the browser when your site loads, call the install function from @edgio/prefetch.

JavaScriptindex.js
1import { install } from '@edgio/prefetch/window'
2
3// Install Edgio Service Worker
4install()
5
6// import installDevtools from '@edgio/devtools/install'
7
8// Enable Edgio Devtools
9// installDevtools()