Edgio

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

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.