docs
Edgecast Console

Remix

This article guides you through the setup and deployment of a Remix + Express application to Edgecast.

Example

Try the Remix + Express Site Example
View the Code

Prerequisites

Setup requires:

Install the Edgecast CLI

If you have not already done so, install the Edgecast 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 Edgecast

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

Edgecast 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 Edgecast 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 Edgecast CLI dev server is running, it will automatically detect the Express server and use it to serve your Remix app.

Initialize with Edgecast

To initialize your project for deployment on Edgecast, 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 Edgecast dependencies and files to your project. These include:
  • The @edgio/core package - Allows you to declare routes and deploy your application on Edgecast
  • 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 Edgecast
  • routes.js - A default routes file that sends all requests to Remix.

Routing

Edgecast 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 Edgecast

Before running your app using the Edgecast 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 Edgecast CLI will use to serve your app.
Always be sure to build your app before running it with the Edgecast 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 Edgecast 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.