#28 Express and SVG Vite plugins, Simple RBAC – Remix Community Newsletter

Hey everyone!

It's Jacob Paris here with the 28th issue of Moulton

Here's a BIG roundup of about 2 months worth of Remix community content.

FEATURED 🔥 Remix Express Vite plugin

Michael Kiliman brings us a new Vite plugin that sits next to Remix in your vite.config.ts and generates a fully configurable typescript Express server

This gets built by Vite so it supports importing code from your app, which previously required a separate build step.

It also comes with its own middleware features!

youtu.be/_dbMs9D5kdQ

https://github.com/kiliman/remix-express-vite-plugin

📺 What's next in Remix?

The Remix team has been heads down working on the next version, which completes a migration path for all Remix v2 apps and all React Router v6 apps to incrementally adopt the latest React features.

But they've recently launched Fog of War, which allows Remix to discover routes page by page and no longer need to send every possible route in the manifest on initial page load.

That means Remix now performs the same whether you have 1 route or 1000.

youtu.be/f5z_axCofW0

🔌 Spritesheet SVG Icons Vite Plugin

SVG spritesheets have gone through a lot of iterations in the community: from rmx-cli to custom build scripts to dedicated CLIs, and now to a vite plugin, which I think is the ideal API for this.

vite-plugin-icons-spritesheet

🔔 Remix PWA looking for maintainer!

The Remix PWA project is looking to add another maintainer. If you work with progressive web applications and want to contribute, reach out here!

x.com/ShafSpecs/status/1805630508660863342

📄 Simple RBAC in Remix

Guard your Remix actions/loaders with one line

await requireUser(request, ['write:users'])

This is a simple RBAC implementation

each user gets a role
roles are buckets of permissions
can be hardcoded or db-backed

jacobparis.com/content/simple-rbac

📄 Remix for Next Devs

If you're more familiar with Next.js's (what's the proper possessive there?) routing, here's a guide from Tommy D. Rossi on how to translate your knowledge to Remix's default routing convention.

remixfornextdevs.com

📄 Data fetching in useEffect vs Remix loader

I see people fetching data in useEffect incorrectly ALL THE TIME. Here's a quick guide on how to do it correctly, as well as how much easier it is to do it with a loader.

jacobparis.com/content/use-effect-fetching

🔥 Component Error Boundary

Kiliman releases a library that allows you to wrap components in an error boundary that will catch errors from fetchers and display a nice fallback error message.

github.com/kiliman/remix-component-errorboundary

🔥 Medama – Self hostable, privacy focused analytics

Medama is an open source, Node.js based analytics system that's self-hostable and privacy focused with no cookies or other identifiers.

github.com/medama-io/medama

📄 Translate your Remix.run app with Lingui - Simon Depelchin

Lots of apps use i18next to translate their text but Lingui is a compelling alternative with automatic text extraction and a keyless development experience.

Simon Depelchin shows how to set up Lingui in a Remix app.

simondepelchin.be/articles/translate-your-remix-run-app-with-lingui

📄 Custom routing with Remix

Remix supports any route convention you want, whether that's every route specified explicitly or a file based system.

You can combine a file based convention with some extra rules to keep _layout and ($lang) segments out of the file path.

jacobparis.com/content/remix-custom-routing

📄 The Secret to Maintainable Remix Apps: Hexagonal Architecture

Here's a guide explaining a hexagonal "ports and adapters" architecture and some guidelines for how to apply it to Remix.

laconicwit.com/the-secret-to-maintainable-remix-apps-hexagonal-architecture

🔥 New Remix starters and boilerplates

If you're starting a new project or want inspiration on how to set things up for yourself, take a look at these starters and boilerplates.

📄 Nested arrays and objects in Form Data with Conform

Conform’s parseWithZod lets you create PHP style structured form data based on the input names

arrays use inputs with the same name
objects use dot notation like "address.street"
arrays of objects use brackets like "user[1].name"

jacobparis.com/content/conform-nested-formdata

📄 Speed up your Remix knowledge

Tiger Abrodi has been learning in public lately and wrote a few different articles covering cache control, prefetching, and other remix features and APIs.

tigerabrodi.blog/prefetching-links-and-images-with-remix tigerabrodi.blog/cache-control-and-remix-answering-my-own-questions tigerabrodi.blog/speed-up-your-remix-knowledge

📄 Use API keys to connect apps and services

Had to put together a little API key solution the other day

easiest way is just comparing an environment variable on each service to make sure they match
when needed, you can switch to database backed keys

jacobparis.com/content/api-keys

📄 Tanstack React Query adapter for Remix

In this tweet Alem demonstrates a simple adapter for Remix Client Cache that automatically seeds React Query's cache with loader data on page load.

x.com/AlemTuzlak/status/1763883874310820343

🔌 Remix Forge extension for VS Code

Remix Forge is a VS Code plugin with power-user tools for remix devs, such as generating useful snippets, initializing libraries, and creating test files.

marketplace.visualstudio.com/items?itemName=CodeForge.remix-forge

📄 Simplify Component Imports with TypeScript Namespaces

Sergio shows how to use typescript namespaces to export types with the same name as your components, which allows them to be imported together.

sergiodxa.com/tutorials/simplify-component-imports-with-typescript-namespaces

🔥 Remix Hook Form v5

Remix Hook Form adds SSR and progressive enhancement support to React Hook Form

github.com/forge42dev/remix-hook-form

📄 Validate Form in Remix with clientAction

Sergio shows how to use clientAction to intercept form submissions and validate them client side before passing the data along to the server.

sergiodxa.com/tutorials/validate-form-in-remix-with-clientaction

🔥 Counterscale and the New Self-Hosted Analytics

Sentry's Ben Vinegar has built a self-hostable analytics system with a Remix dashboard that I'm now using on my own blog to track page views.

benv.ca/blog/posts/counterscale-and-the-new-self-hosted

📄 When to use Route Modal in React Router

Route based modals are good when you want to fetch more data inside them or be able to share a URL with the modal open, but otherwise they introduce overhead that might not be worth dealing with.

sergiodxa.com/articles/when-to-use-route-modal-in-react-router

🔥 Remix Dev Tools

Remix Dev Tools now has support for Single Fetch

github.com/forge42dev/Remix-Dev-Tools/releases

🔥 useAsyncFetcher with XState

This code snippet shows how to build a useAsyncFetcher hook that uses XState to handle loading and error states.

gist.github.com/rphlmr/637e9393

📄 Deploying Remix on Lambda

Gautier shows how to deploy Remix using Pulumi, covering setup, server bundling, S3 for static assets, Lambda functions, API Gateway, and CloudFront.

gautierblandin.com/articles/deploy-remix-vite-on-lambda-using-pulumi

🇫🇷🇯🇵🇺🇸 Meet the Community

There are new Remix meetups in Tokyo, Seattle, and Paris! If you want to start your own, the Remix team has released guides showing how, plus some tips for making meetups great!

github.com/remix-run/meetup-guides

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.

🇺🇸 Seattle, USA
🇯🇵 Tokyo, Japan
🇫🇷 Paris, France
🇺🇸 Lehi, Utah
🇮🇳 Pune, India
🇬🇧 London, UK
🇺🇸 New York City
🇧🇷 Säo Paulo, Brasil
🇺🇸 Austin, Texas
🇺🇸 San Francisco, California
🇲🇽 Mexico City, Mexico
🇩🇰 Copenhagen, Denmark
🇲🇦 Casablanca, Morocco
🇧🇦 Sarajevo, Bosnia-Herzegovina
🇬🇭 Accra, Ghana
🇺🇸 Los Angeles, USA
🇦🇹 Vienna, Austria

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