#23 Remix Utils v7 and Remix becomes a Vite plugin – Remix Community Newsletter
Let's get to it!
Featured 🔥 Remix Utils v7
Sergio has pushed a big update to Remix Utils, with some big changes
- everything's upgraded to Remix v2
- it's now ESM only, so if you're using CJS you'll need to add it to your serverDependenciesToBundle
- It comes with a new useDebounceFetcher hook
- Other cool utils like CSRF token generation
- Each util can be imported individually without forcing you to import the whole package and unnecessary dependencies
https://github.com/sergiodxa/remix-utils
🙋♂️ Remix Planning
With the big releases behind them, Remix goes back to the drawing board for what's coming next. As part of their Open Development Initiative, they're going to live stream the planning meeting on November 7th
remix.run/blog/open-development
🔥 Remix is a Vite Plugin now
With the launch of Remix v2.2, Remix now ships a Vite plugin that makes it easy to use Vite's dev server and build tools with Remix.
That means Remix is no longer the bottleneck in your application: the entire ecosystem of Vite plugins is now available to Remix apps.
Along with this, Remix is now an official Gold sponsor of Vite.
remix.run/blog/remix-heart-vite
BONUS: At the one year anniversary of the Remix NYC meetup on November 8th, Pedro Cattori from the Remix team will be presenting a (streamed!) talk on Vite and how it improves the developer experience of Remix
meetup.com/remix-nyc/events/296951742
📄 And the community dives into Vite immediately
Alem Tuzlak (of Remix Dev Tools fame) has written a quick dive into Remix and Vite. It's a great place to start if you want to see what the integration looks like
alemtuzlak.hashnode.dev/exploring-remix-with-vite
🔥 Remix + PayloadCMS on Vite
Payload is a CMS admin UI with its own backend that you can use to manage content for your Remix app, and it's been updated to Remix Vite too.
🔥 Module Federation with Remix + Vite
If you want microfrontends, where multiple apps can be composed together into a single route tree, Vite unlocks that with Module Federation.
James Restall integrates Native Federation with Remix and Vite to show how you can build a federated app with Remix.
https://github.com/jrestall/remix-federation
🔥 Remix in Astro via Vite
Astro is an all-in-one framework for building websites with React, Vue, Svelte, and more.
JLarky has built a proof of concept using Remix inside of Astro via Vite.
twitter.com/JLarky/status/1719964918420840496
🔥 Remix + Effect + Vite
Effect is an ecosystem of functional programming tools for TypeScript, making it easier to write robust code that properly handles errors, side effects, async operations, streaming, concurrency, etc
With the help of Vite, Michael Arnaldi has built an example of using Effect server-side in Remix, with new patterns like effectLoader and effectAction
github.com/mikearnaldi/vite-remix-effect
🚀 Epic web launches off
After MUCH anticipation, Kent C Dodds and team have launched the first volume of their Epic Web course, covering practical web development skills while you build a real app with Remix.
- Full Stack Foundations
- Professional Web Forms
- Data Modeling Deep Dive
- Authentication Strategies & Implementation
- Web Application Testing
📄 Generate open graph images in Remix
The vercel-og package only works on Vercel infrastructure, but if you look inside most of its functionality comes from two other libraries. Satori, for turning JSX into SVG, and Resvg, for turning SVG into PNG.
You can use those libraries directly in a Remix resource route to create your own open graph images on any infrastructure.
jacobparis.com/content/remix-og
🔥 Elysia with Remix + Bun
Elysia is a server library (like a modern express) that runs on Bun with full type safety, OpenAPI support, and its own RPC system, and it works with Remix
github.com/jjhiggz/elysia-remix-demo
📄 Upload images to Supabase
Stream image uploads straight through a Remix action to Supabase
- full progressive enhancement
- compatible with fancy file pickers
alemtuzlak.hashnode.dev/uploading-images-to-supabase-with-remix
📄 Upload images to Remix
To upload images directly to your own server, you can use Remix's built-in file upload handler
- use file upload handler to write the upload to a file and return the path
- use memory upload handler to extract and return the other form fields
sergiodxa.com/tutorials/upload-images-in-remix-apps
📄 Use VS Code snippets for Remix
Remix doesn't take much boilerplate, but almost every route is going to have at least a default export and a loader, and it can be tedious to type that every time.
Here's a VS Code snippet file that will automatically insert loaders, actions, meta/links/header functions, shouldRevalidate functions, and more
- Let each snippet import the dependencies it needs
- Use the 'import/no-duplicates': 'warn' eslint rule with autofix to merge your imports on save
- Customize these to add your own auth guards or other common patterns
jacobparis.com/content/remix-snippets
📄 Type inference with loaders + actions
You can get autocomplete and type safety for your useLoaderData and useActionData hooks without specifying the types of your data
- use the LoaderFunctionArgs type instead of LoaderFunction so it doesn't override the return type
- add the type parameter to the hooks like
useLoaderData<typeof loader>()
twitter.com/DanielKanem/status/1719371755645444191
📺 Remix tutorial walkthrough with Nikos
The launch of Remix v2 came with a new updated tutorial, and Nikos has recorded a walkthrough if you want to follow along
🔥 Debug invalid HTML
Invalid HTML breaks React's hydration and can be frustrating to debug.
- forms within forms
- links inside links
Remix dev tools will now detect this and show errors that you can click to jump right to the offending code.
github.com/Code-Forge-Net/Remix-Dev-Tools
📄 Only use GET and POST
Browsers only support GET and POST forms, so if a user submits your DELETE form before javascript loads, they're gonna have a bad time
Stick to GET and POST in the browser and leave the other methods for backend calls to external APIs.
epicweb.dev/tips/only-use-get-and-post
📄 Redirect from a resource route
Redirect routes are resource routes that run some server logic to determine where to redirect the user
You might use these to triage users who haven't finished logging in or who need to set up their accounts, or to create an items/4/next route that redirects to the next item in a list
jacobparis.com/content/remix-redirect-routes
📄 Write a reusable progress spinner component that integrates with your loaders
The useNavigation hook gives you access to the current transition state, so you can use that to make a progress spinner component that works with any loader
alemtuzlak.hashnode.dev/reusable-progress-component-in-remix-or-react-router-with-tailwind
📺 Vendure remix storefront with view transitions
Vendure is a headless ecommerce platform and one of its starter templates is a Remix stack.
They've updated it to Remix v2.1 and added some cool view transitions you can see in this video
🔥 Embed Remix in Directus
Directus is an open source CMS that normally runs its own server and backend, but since it exposes an API for custom express routes, you can embed Remix into Directus and keep them all in the same server
echobind.com/post/embedding-remix-in-directus
📄 Love letter to remix's loader
A route's loader is its source of truth, and BezoMaxo has written a lovely article about how all the loader can do for you
laconicwit.com/a-love-letter-to-the-remix-loader
🔥 Partykit live stream watering hole
If you're into giraffes, you'll love this live safari watering hole camera, built with Partykit's Remix starter
blog.partykit.io/posts/single-serving-waterhole
🔥 Remix toast
Using flash session data, Alem has built remix-toast, a library that gives you redirectWithToast, redirectWithError, and more helpful functions to send messages across page reloads
github.com/Code-Forge-Net/remix-toast
📺 Remix Austin Meetup
This month's Remix Austin meetup showed
- Brooks updating the Remix Austin website to v2
- A talk by Paul Bratzlavsky about using Remix and Strapi together for rapid prototyping, including a starter template
There's more community meetups than ever
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.
- 🇺🇸 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
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
