#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!
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.
๐ 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.
๐ 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.
๐ 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.
๐ 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.
- remixbreeze.com
- remix-saas.fly.dev
- starter.saaskitty.com
- privacystack.bocoup.com
- github.com/yusukebe/hono-and-remix-on-vite
๐ 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
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