Architect Remix Plugin

Taylor Beseda’s avatar

by Taylor Beseda
@tbeseda
on

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

  • It is best to install Architect as a project dependency.
  • Remix doesn’t run any Architect code1. Arc is the orchestration tooling around your app’s actual code.
  • There is no long-running Remix server in Architect. It is booted up for each request — don’t worry, it’s really fast.
  • The Remix server handles all routes, unlike typical Arc apps where each route is a separate HTTP function. But again, we’ve found it to be very performant.
  • You’ll probably want to add Remix build directories (defaults to “.remix”) to .gitignore.
  • Don’t double compile Remix output2.
  • It is not recommended to use Architect’s livereload feature in combination with this plugin at this time.
  • Set NODE_ENV to "development" to take advantage of Remix’s live reload feature.
    • Pro-tip: Sandbox will load a .env file automatically.
    • Architect does not use NODE_ENV, so this won’t affect how Arc runs your code.

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.