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
Prerequisites
Setup requires:
- An Edgio account. Sign up for free.
- An Edgio property. Learn how to create a property.
- Node.js. View supported versions and installation steps.
- Edgio CLI.
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';56export 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';34export 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';45skipWaiting();6clientsClaim();7precacheAndRoute(self.__WB_MANIFEST || []);89new 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';23// Install Edgio Service Worker4install();56// import installDevtools from '@edgio/devtools/install'78// Enable Edgio Devtools9// installDevtools()