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 @layer0/cli@latest

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 0 init:
Bash
10 init
This will automatically update your package.json and add all of the required Edgio dependencies and files to your project. These include:
  • The @layer0/core package - Allows you to declare routes and deploy your application on Edgio
  • The @layer0/prefetch package - Allows you to configure a service worker to prefetch and cache pages to improve browsing speed
  • layer0.config.js - A configuration file for Edgio
  • routes.js - A default routes file that sends all requests to Remix.

Install @layer0/express

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

Update Edgio Configuration

Update layer0.config.js at the root of your project to the following:
JavaScript
1// This file was automatically added by layer0 deploy.
2// You should commit this file to source control.
3module.exports = {
4  connector: '@layer0/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 layer0 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('@@layer0/core/router')
7

8module.exports = new Router()
9  // Prevent search engine bot(s) from indexing
10  // Read more on: https://docs.layer0.co/applications/cookbook#blocking-search-engine-crawlers
11  .noIndexPermalink()
12  .match('/', ({ cache }) => {
13    cache({
14      edge: {
15        maxAgeSeconds: ONE_DAY,
16      },
17      browser: false,
18    })
19  })
20  .match('/example-path', ({ cache }) => {
21    // other paths
22    cache({
23      edge: {
24        maxAgeSeconds: ONE_DAY,
25      },
26      browser: false,
27    })
28  })
29  .match('/build/:path*', ({ cache }) => {
30    // route build output files through Edgio
31    cache({
32      edge: {
33        maxAgeSeconds: ONE_DAY,
34        forcePrivateCaching: true,
35      },
36      browser: {
37        maxAgeSeconds: 0,
38        serviceWorkerSeconds: ONE_DAY,
39      },
40    })
41  })
42  .fallback(({ renderWithApp }) => renderWithApp())
Refer to the Routing 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
10 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
10 deploy
Refer to the Deploying guide for more information on the deploy command and its options.