Edgio
Edgio Console

Serving Static Sites

This guide shows you how to serve generic static sites to Edgio.

Example Static Sites

Here are a few examples of common static sites served by Edgio.
Try the (Static) Backbone.js Site Example
View the Code
Try the (Static) React Site Example
View the Code
Try the (Static) Vue.js 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@^6.0.0

Getting Started

To prepare your static app for deployment on Edgio, run the following command in your project’s root directory:
Bash
1edgio init --edgioVersion ^6.0.0
This will automatically add all of the required dependencies and files to your project. These include:
  • The @edgio/core package - Allows you to declare routes and deploy your application on Edgio
  • The @edgio/prefetch package - Allows you to configure a service worker to prefetch and cache pages to improve browsing speed
  • edgio.config.js - The main configuration file for Edgio.
  • routes.js - A default routes file that sends all requests to Next.js. Update this file to add caching or proxy some URLs to a different origin.
  • sw/service-worker.js A service worker implemented using Workbox.

Generate Static Resources

If you’re building an app that bundles static resources, you will want to generate those files before contuining. Typically, this is handled using a build script such as npm run build. This may differ depending on your framework.
The built version of your app will typically reside in a /build or /dist directory.

Router Configuration

The Edgio router is used for configuring where the static resources reside and how to serve them. Using the example above, let’s assume your site is bundled under the /build directory and has the following structure:
  • /build/index.html
  • /build/static/css/main.css
  • /build/static/js/main.js
You can use the router’s static method to serve everything in the build directory:
JavaScript
1// routes.js
2

3const { Router } = require('@edgio/core/router')
4

5module.exports = new Router().static('build')
If your site does not use a bundler for generating a build output, you can still serve the assets using serveStatic and reference the relative path to the resources. Any resource referenced using serveStatic or appShell will automatically be included in the Edgio deployment. An example of serving assets from your src directory:
JavaScript
1// routes.js
2

3const { Router } = require('@edgio/core/router')
4

5const ONE_YEAR = 365 * 24 * 60 * 60
6

7const edgeOnly = {
8  browser: false,
9  edge: { maxAgeSeconds: ONE_YEAR },
10}
11

12const edgeAndBrowser = {
13  browser: { maxAgeSeconds: ONE_YEAR },
14  edge: { maxAgeSeconds: ONE_YEAR },
15}
16

17const handler = ({ cache, serveStatic }, cacheConfig, path) => {
18  cache(cacheConfig)
19  serveStatic(path)
20}
21

22module.exports = new Router()
23

24  // Assets (Hashed and Cached on Edge and in the Browser)
25  .get('/css/:path*', res => handler(res, edgeAndBrowser, 'src/css/:path*'))
26  .get('/js/:path*', res => handler(res, edgeAndBrowser, 'src/js/:path*'))
27

28  // Path(s) that do not have a "." as well as "/" to serve the fallback page
29  .get('/:path*/:file([^\\.]+|)', res => handler(res, edgeOnly, 'src/index.html'))
30

31  // All other paths to be served from the src directory
32  .get('/:path*', res => handler(res, edgeOnly, 'src/:path*'))

Deploying

Deploy your app to the Sites by running the following command in your project’s root directory:
Bash
1edgio deploy
For more on deploying, see Deploying.