Architect Remix Plugin

avatar
Taylor Beseda
March 14, 2022

tl;dr
@architect/plugin-remix is an Architect plugin for Remix.
Check out an example project on GitHub.
It’s an early release, so give it a go and leave any feedback at github.com/architect/plugin-remix.

We, and a growing number of web developers, think Remix is pretty rad. Both the Architect and Remix teams have improved how the two projects integrate. Architect is a default option provided by the Remix CLI when setting up a new project with: npx create-remix@latest 😊

Today, the Architect team is releasing an early version of a new Arc 10 plugin that integrates Remix in an alternative way. Let’s run through the setup, some of the internals, and a few things to remember.

Installation and setup

Assuming we have an Architect app set up, install the plugin:

npm install --save-dev @architect/plugin-remix

Add Remix’s postinstall script to your package.json:

"scripts": {
  "postinstall": "remix setup node"
}

Install Remix + React:

npm i @remix-run/react react react-dom remix

Then we can add to our app.arc’s @plugins and enable it with the @remix pragma:

# app.arc
@app
arc-remix

@plugins
architect/plugin-remix

@remix

@static

The plugin requires a few things on disk: an ./app directory with your Remix app’s source code and a ./remix.config.js that exports at least an empty object.

// remix.config.js
module.exports = {
  ignoredRouteFiles: [".\*"],
}

Now when Sandbox is fired up, Remix’s watcher will kick in and build your app while Sandbox serves it from the root HTTP route of your app!

# from your project root
npx arc sandbox

You can see a working example with Remix’s basic example on GitHub.

Plugin features

Remix does a great job of building your source code into server and client programs. @architect/plugin-remix helps manage those built resources for running them on AWS.

Of course, it also works locally/offline during development in Architect Sandbox, the built-in AWS emulator.

Sandbox runs Remix’s watcher

With this plugin, Architect Sandbox wraps Remix’s built-in watcher so both Architect and Remix can do their thing in real time while you’re developing.

arc deploy builds your Remix app

When you use Architect to deploy to AWS, this plugin will automatically build your Remix server with all required dependencies and create an AWS Lambda behind API Gateway. Additionally, the plugin directs Remix client assets to an S3 bucket so the two can interact seamlessly.

Configuration

The directory in which your Remix app’s source code lives, the output build directory name, and a custom server handler (advanced usage) can be configured as a part of the @remix pragma in your app’s manifest:

@remix
app-directory remix
build-directory .build
server-handler custom-remix-handler.js

Things to remember

1 The exception would be if your code utilizes a helper library like @architect/functions that’s not a part of the default Arc toolchain.

2 It is totally possible to use @architect/plugin-typescript with other resources in your Arc app, but there is no need to apply it to your Remix app. Remix has it handled.

FAQ

Should I use this instead of the Remix CLI’s starter?

Definitely not yet. This plugin hasn’t seen much real-world testing yet.
Ultimately, they are two different approaches that net out at much the same place. Choose whichever suits your needs.

Is the Remix Architect starter going to be outdated?

Nope. The Architect team is also actively working with the Remix team on that implementation!

Is it fast? What about cold start times?

Yep (~80ms warm, ~1s cold). The function size directly correlates to Lambda function size, so it’s beneficial to keep the server as small as possible.

What’s a Lambda’s size limit?

512 MB. As function size increases, so do cold start times. Exceeding the disk limit will result in an ENOSPC error.
The example project’s Remix server clocks in at 38 MB.