Edgio
Edgio Console

Remix

This article is incompatible with recent Remix changes. Contact your account manager or our sales department at 1 (866) 200 - 5463 to get started with Remix and the latest version of Edgio Applications.
This guide shows you how to deploy a Remix application to Edgio.

Example

Try the Remix Express 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

Create a new Remix app

If you don’t already have a Remix app, create one by running the following:
Bash
1npx create-remix@latest
2# Choose express server
3cd project-name
You can verify your app works by running it locally with:
Bash
1npm run dev

Configuring your Remix app for Edgio

Initialize your project

In the root directory of your project run edgio init:
Bash
1edgio init --edgioVersion ^6.0.0
This will automatically update your package.json and add all of the required Edgio 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 - A configuration file for Edgio
  • routes.js - A default routes file that sends all requests to Remix.

Install @edgio/express

Install @edgio/express by running the following:
Bash
1npm install @edgio/express

Update Edgio Configuration

Update edgio.config.js at the root of your project to the following:
JavaScript
1// This file was automatically added by edgio deploy.
2// You should commit this file to source control.
3module.exports = {
4  connector: '@edgio/express',
5  express: {
6    appPath: './server/index.js',
7  },
8  includeFiles: {
9    public: true,
10  },
11}

Configure the routes

Update routes.js at the root of your project to the following:
JavaScript
1// This file was added by edgio init.
2// You should commit this file to source control.
3const ONE_HOUR = 60 * 60
4const ONE_DAY = 24 * ONE_HOUR
5

6const { Router } = require('@@edgio/core/router')
7

8module.exports = new Router()
9  .match('/', ({ cache }) => {
10    cache({
11      edge: {
12        maxAgeSeconds: ONE_DAY,
13      },
14      browser: false,
15    })
16  })
17  .match('/example-path', ({ cache }) => {
18    // other paths
19    cache({
20      edge: {
21        maxAgeSeconds: ONE_DAY,
22      },
23      browser: false,
24    })
25  })
26  .match('/build/:path*', ({ cache }) => {
27    // route build output files through Edgio
28    cache({
29      edge: {
30        maxAgeSeconds: ONE_DAY,
31        forcePrivateCaching: true,
32      },
33      browser: {
34        maxAgeSeconds: 0,
35        serviceWorkerSeconds: ONE_DAY,
36      },
37    })
38  })
39  .fallback(({ renderWithApp }) => renderWithApp())
Refer to the CDN-as-code guide for the full syntax of the routes.js file and how to configure it for your use case.

Run the Remix app locally on Edgio

Create a production build of your app by running the following in your project’s root directory:
Bash
1npm run build
Run Edgio on your local machine:
Bash
1edgio run --production
Load the site http://127.0.0.1:3000

Deploying

Create a production build of your app by running the following in your project’s root directory:
Bash
1npm run build
Deploy your app to the Sites by running the following command in your project’s root directory:
Bash
1edgio deploy
Refer to the Deployments guide for more information on the deploy command and its options.