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 #

• Install Node.js 16.16.0

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.

1npm i -g @edgio/cli

Create React App #

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

1npx create-react-app my-app

Initializing your project with Edgio #

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

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.

1// This file was added by edgio init.
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().use(reactCRARoutes);

Running Locally #

To test your app locally, run:

1edgio dev

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

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:

1edgio deploy

See Deployments for more information.

Prefetching #

Install the @edgio/react to enable prefetching.

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:

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:

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.

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.

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()