Edgio
Edgio Console

Remix

This article guides you through the setup and deployment of a Remix + Express 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@latest

Create a new Remix app

If you don’t already have a Remix app that uses an Express server, create one using a template by running the following:
Bash
1npx create-remix@latest --template remix-run/remix/templates/express
In the root of your project, you can verify your app works by running it locally with:
Bash
1npm run dev

Configuring your Remix app for Edgio

This section is relevant only if you have an existing Remix project without Express or the Remix adapter installed. If you already have Express and the Remix adapter installed or have created a new Remix app as described under Create a new Remix app, you may skip this step.

Configure Express Middleware

Edgio requires an Express server to run your Remix app. The following sections will help you configure your Express server. Refer to the Remix Quick Start guide for more information.

Install Express and Remix Adapter

Install Express and the Remix Express adapter. You should also uninstall the default Remix server or any other server you are using:
Bash
1# Install Express and Remix adapter
2npm i express @remix-run/express cross-env
3

4# Uninstall the default Remix server
5npm uninstall @remix-run/serve

Create an Express server

Create an Express server at the root of your project named ./server.js with the following content:
JavaScript./server.js
1import {createRequestHandler} from '@remix-run/express';
2import express from 'express';
3

4import * as build from './build/server/index.js';
5

6const port = process.env.PORT || 3000;
7

8const app = express();
9app.use(express.static('build/client'));
10

11app.all('*', createRequestHandler({build}));
12

13app.listen(port, () => {
14  console.log(`Express listening on http://localhost:${port}`);
15});
16

17export default app;
If you already have an existing Express server, it should conform to the structure above to ensure Edgio is able to run the server.
With the Express server in place, you can verify that it works by running the following command in the root directory of your project:
Bash
1node server.js
When the Edgio CLI dev server is running, it will automatically detect the Express server and use it to serve your Remix app.

Initialize with Edgio

To initialize your project for deployment on Edgio, run the following command in the root directory of your project:
Bash
1edgio init --edgioVersion latest
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/connectors package - Handles requests to the Express server
  • 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.

Routing

Edgio uses a routes.js file to define how requests are routed to your application. By default, all requests are sent to Remix. You can customize this file to add additional routes or modify the default behavior such as defining cache rules.
JavaScript./routes.js
1// This file was automatically added by edgio init.
2// You should commit this file to source control.
3import {Router} from '@edgio/core';
4import {connectorRoutes} from '@edgio/connectors';
5

6export default new Router().use(connectorRoutes).static('public');
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

Before running your app using the Edgio CLI, you must first build your Remix app. To do this, run the following command in the root directory of your project:
Bash
1npm run build
This will create a production build of your app in the build directory that the Edgio CLI will use to serve your app.
Always be sure to build your app before running it with the Edgio CLI.
To start the Remix app in development mode, run the following command in the root directory of your project:
Bash
1edgio dev
To start the Remix app simulating an Edgio production environment, first create a production build
Bash
1edgio build
Then run the following command in the root directory of your project:
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
1edgio 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.