#25 Trellix Demo, SPA Mode, and more – Remix Community Newsletter

Apologies for the late email, as it turns out I must schedule the email and press Send if I actually want it to go out. The next issue will be out in a week or two as scheduled.

At the start of last year, v1.10 was released as the first Remix version that was re-built on top of React Router v6, allowing Remix and React Router to develop in alignment.

What's happened since then?

v1.11 launched defer(), CSS bundling, and the flat route convention
v1.12 released the new dev server
v1.13 added built-in support for Tailwind and PostCSS
v1.14 introduced Hot Module Reloading to the dev server
v1.15 brought a new meta export format
v1.18 allowed submitting forms as JSON
v1.19 gave devs control over Node polyfills
v2.0 launches with ESM support
v2.1 adds support for View Transitions
v2.2 turns Remix into a vite plugin and adds fetcher persistence
v2.3 adds flushSync support to all imperative data APIs
v2.4 launches clientLoader and clientAction APIs
v2.5 (just think, if I published this issue on time I wouldn't get to announce this)

🔥 Remix v2.5 SPA Mode

And as of yesterday (relative to when I expected this to launch), v2.5 Remix launches an unstable SPA mode target for Remix Vite apps, tentatively bridging the migration path for all React Router apps.

Add unstable_ssr: false to your vite config to enable it

When you build, this will pre-render your root route into an index.html file
you can deploy this file along with the client bundle
pre-rendering non-root routes will come eventually, after the Single Fetch proposal is implemented

twitter.com/remix_run/status/1745508395208085778

💡 Remix Roadmap Planning 9

In Remix's 9th roadmap planning session they announce the above SPA mode feature, as well as some upcoming features

Cloudflare Dev Proxy, so you can use cloudflare features like D1 locally with Remix Vite
@remix-run/react and @remix-run/server-runtime are being merged into a remix package and 3rd party packages can just declare it as a peer dep to be runtime agnostic
unstable_serverBundles is an upcoming feature that allows you to build your Remix app into multiple bundles based on the routes. This feature was driven by Vercel who wanted users to be able to choose on a per route basis whether to deploy to their Node lambdas or to a V8 Edge function
Fog of War: Extremely large remix apps suffer from an infinitely growing route manifest. The Fog of War proposal only tells the client about routes connected to the current one, and adds new routes to the manifest as the user browses.

youtu.be/R29oC99rxAE

Featured 🔥 Ryan Florence's Trellix Demo

I was hesitant to feature this because it really stretches the definition of "community" contributions to include a demo from one of the founding authors, BUT this is incredible work and everyone needs to see it

"Remix Singles" are short videos from Ryan Florence that teach a specific Remix concept. In this latest batch, which feel less like singles and more like an album, Ryan builds a Trello clone with complex interactivity, solving flashes and bugs along the way.

If you're already comfortable with Remix, skip to the end and watch these last four. If you're not a Remix dev, try to rebuild this in your stack of choice and see what options your tools give you to achieve this kind of UX.

🔥 Trigger.dev

Trigger.dev is a powerful open-source background jobs framework that allows you to create long-running jobs directly in your codebase, without the need for serverless functions or additional infrastructure.

They've added a ton of new features recently

View all historical events
Filter task runs by environment and status
Tunnel to your local machine for development
Shopify integration

github.com/triggerdotdev/trigger.dev

🔥 Metronome v4 released and open sourced

Metronome is an analytics tool built in Remix for Remix users

detailed insights into user behavior, traffic patterns, and engagement metrics.
check web vitals over time

Creator Erick Tamayo has open sourced it with the launch of v4

metronome.sh

Favourite Remix Projects of 2023

These are my favourite remix projects in the community this year

Remix Dev Tools unlocks a ton of power and insight into your Remix app during development, with powerful tools for debugging requests, route modeling, and hydration errors.
The Epic Stack is an amazing and evolving starter kit for building modern applications.
Remix PWA provides offline-first development capabilities to Remix.

📄 More Than You Need to Know About flushSync

Remix has recently added unstable support for fetchers to wrap their submissions in flushSync, allowing you to do synchronous DOM operations immediately after the submission and without weird flashes.

Flush sync itself is a React feature but is explicitly warned against in the React docs because of its potential to harm performance, so Jules here has written up an article explaining how it works and when to use it safely.

julesblom.com/writing/flushsync

🔥 Remix Time-based One-time-passwords

With this module from Daniel Kanem, you can add time-based one-time-password authentication (TOTP) to any app using Remix Auth.

Plug it into a sessions table in your database of choice and let it send verification emails from your email provider of choice.

github.com/dev-xo/remix-auth-totp

🔥 Remix docs VS code extension

A VS Code extension for Remix that shows documentation directly inside the editor

github.com/ovi-ispas/remix-docs

💡 Remix Packs

This is one I'm most excited for

Michael Kiliman announces Remix Packs: a tool for packaging/installing individual features into Remix apps

testing
deployment
auth
routes

This will make it much easier to share features between projects that are more elaborate than simple npm packages.

twitter.com/kiliman/status/1733172404522738079

📄 Guide for migrating Remix CommonJS to ESM

Alem has written a step-by-step guide for migrating a project from CommonJS to ESM

alemtuzlak.hashnode.dev/migrating-a-v1-cjs-remix-project-to-remix-vite-esm

🔥 Remix Pocketbase starter

PocketBase is an open-source Go backend, and Jan Hofmann has put together a Pocketbase starter kit for Remix

github.com/ausminternet/remix-pocketbase-starter

🔥 Epic Web Invariant

This is a tiny but powerful Typescript library for throwing meaningful errors and responses instead of generic ones when your code follows unexpected paths

github.com/epicweb-dev/invariant

🔥 Remix Custom Fetchers

The useFetcher hook is the most powerful tool in the remix toolbox. You can submit data in one component and display the status of the request in others.

With custom fetchers, you can get reusable hooks that you can use anywhere in your app.

jacobparis.com/content/remix-custom-fetchers

📺 Implement View Transitions in Remix

You've seen the fancy demos of navigating from one page to another and having shared elements scale and reposition for that app-like feel

Alem shows how you can make that real in your own apps with View Transitions

youtu.be

📺You might not need state management

Daniel shows how Remix's data flow solves most of the problems React devs usually use state management libraries for

twitter.com/DanielKanem/status/1734601890636165219

🔥 Prefetch data for remix fetcher usage

Remix has a <PrefetchPageLinks> you can use to prefetch data from another page. This is useful to speed things up if you're going to navigate or load data from it soon.

sergiodxa.com/tutorials/prefetch-data-for-remix-fetcher-usage

🇦🇹 Meet the Remix Community in Vienna 🇦🇹

There are active Remix meetups all around the world. If you're interested in meeting other Remix users, learning more about the framework, or just hanging out with some cool folks, check out one of these meetups.

🇦🇹 NEW: Vienna, Austria
🇺🇸 Lehi, Utah
🇮🇳 Pune, India
🇬🇧 London, UK
🇺🇸 New York City
🇧🇷 Säo Paulo, Brasil
🇺🇸 Austin, Texas
🇺🇸 San Francisco, California
🇮🇱 Tel Aviv, Israel
🇲🇽 Mexico City, Mexico
🇩🇰 Copenhagen, Denmark
🇿🇦 Johannesburg, South Africa
🇸🇪 Uppsala, Sweden
🇨🇷 San Jose, Costa Rica

meetup.com/pro/remix-run

This is not a one-way conversation

On behalf of the whole Remix community, I’m really glad to have you here, and I want to hear from you.

If you find something cool you'd like featured, or have questions you'd like answered, that's what I'm here for. Just hit reply and let me know, or join the conversation directly in the Remix Discord

Thanks for reading!

— Jacob Paris