Edgio
Edgio Console

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

Try the React Site Example
View the Code

Prerequisites

Setup requires:

Install the Edgio CLI

If you have not already done so, install the Edgio CLI.
Bash
1npm i -g @edgio/cli@latest

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 --edgioVersion latest
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/connectors 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 added by edgio init.
2// You should commit this file to source control.
3import {Router} from '@edgio/core';
4import {connectorRoutes} from '@edgio/connectors';
5

6export default new Router().use(connectorRoutes);

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
Your initial CDN-as-code deployment will generate system-defined origin configurations along with those defined within your edgio.config.js. Learn more about system-defined origins.
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()