Edgio
Edgio

Getting Started with Performance

Deploying your web application behind Edgio is the fastest and easiest way to start seeing the performance benefits made possible by the Performance network. As illustrated below, requests for your site will pass through Edgio’s globally distributed edge network and then to your origin server.

traffic

Serving production traffic over Edgio requires updating your site’s DNS to point to our service.

Learn more.

Learn how to use CDN-as-code to:

  • Define routes.
  • Set up edge caching.

Prerequisites

Before proceeding, you will need to create and deploy a property to Edgio.

Learn more.

Alternatively, you may deploy our sample site.

Project Files

Upon initializing a property (edgio init), Edgio creates the following files:

  • routes.js: Defines the set of routes that determine whether a request will be cached, prefetched, passed through without modification, or served as static content.
  • edgio.config.js: Defines settings through which you may fine-tune your project.

Configure Caching

Set up caching by defining routes within your property’s routes.js file. The following sample configuration proxies and caches all requests whose relative path matches the pattern defined using .match(...). In this case, this relative path must start with /api/. The .fallback(...) handler takes all unmatched requests and also proxies them to the origin backend. This backend is defined within the edgio.config.js file.

JavaScript./routes.js
1import { Router } from '@edgio/core/router'
2
3const ONE_HOUR = 60 * 60
4const ONE_DAY = 24 * ONE_HOUR
5
6export default new Router()
7 // Here is an example where we cache api/* at the edge but prevent caching in the browser
8 .match('/api/:path*', ({ proxy, cache }) => {
9 cache({
10 edge: {
11 maxAgeSeconds: ONE_DAY,
12 staleWhileRevalidateSeconds: ONE_HOUR,
13 },
14 browser: {
15 maxAgeSeconds: 0,
16 serviceWorkerSeconds: ONE_DAY,
17 },
18 })
19 proxy('origin')
20 })
21
22 // send any unmatched request to origin
23 .fallback(({ proxy }) => proxy('origin'))

Cache Constants

Cache constants in the routes.js have been abstracted out to enable reuse across different routes. You can also add additional constants such as year.

JavaScript./routes.js
1import { Router } from '@edgio/core/router'
2
3const ONE_HOUR = 60 * 60
4const ONE_DAY = 24 * ONE_HOUR
5const ONE_YEAR = 365 * ONE_DAY
6// ...

Learn more about:

Deploy Locally

You may run Edgio in local development mode to preview your website on your local machine prior to deployment. Local development mode allows for rapid development by allowing you to quickly test changes prior to deployment.

  1. From the command line or terminal, type edgio dev.
  2. Preview your website by loading https://127.0.0.1:3000 from within your preferred web browser.

Deploy to Edgio

Evaluate site performance and QA functionality by deploying your property to Edgio. Run the following command from your property’s root directory:

Bash
1edgio deploy

Assess performance and caching behavior from the Edgio Developer console. Fine-tune your configuration by adding routes and then redeploying your property.

Example

We provide links to a sample site and its source code below. You may also start experimenting with that site by clicking **Deploy to Edgio`.

Issues?

If you have any issues during this process, check our forums for assistance.