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.

System Requirements #

• Install Node.js 14.19.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

Getting Started #

To prepare your static app for deployment on Edgio, run the following command in your project’s root directory:

1edgio init

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:

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:

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:

1edgio deploy

For more on deploying, see Deploying.