#27 Epic Web Conf 2024 Recap and more – Remix Community Newsletter
Hey folks!
It's Jacob Paris here with the 27th issue of Moulton
Last month's issue was delayed due to prep for Epic Web Conf and many (MANY) international travels but I'm back to stability so here we go!
I travelled to Park City Utah to speak at Epic Web Conf and meet some amazing people in the community, including several folks from the Remix team themselves.
It wasn't a Remix conference, but Remix appeared in several talks.
FEATURED 🎤 What makes the web Epic?
Kent opened the conference with a talk on web development and the web platform and what makes it different from mobile or desktop platforms which are governed by marketplaces.
🎤 The Recipe for Local First
At Epic Web Conf, R. Alex Anderson shows how to use Replicache within remix to build a local-first application that works offline
🎤 Things you probably didn't know about Remix
Lina Mahrouch explains Remix's routing and data flow features.
🎤 High Performance CRUD
I took a look at many features that different apps could have and showed how to use Remix to support most of them and then to improve performance by layering on a cache with clientLoader and optimistic UI with some useFetcher based tools.
At the end of the talk I formally announced that I am launching a workshop with EpicWeb.dev teaching how to build high performance CRUD applications in Remix! I'll talk more about that in the next issue.
📺 What's next in Remix?
In Remix's last planning meeting, they mentioned a few cool things coming up next
There's gonna be some SSG as an enhancement to SPA mode, where you'll be able to define a list of routes that you want pre-rendered at build time, possibly similar to Next's old getStaticPaths.
Remix is working on their initial React Server Components implementation, which will allow you to return JSX directly from loaders and actions.
And they're also doing an initial step toward Server Actions with a proposal called "Action Functions". Anywhere a form or submit function allows you to specify a URL, you'll be able to pass a function and Remix will call that function when the form is submitted. Initially this will only be client side, but eventually by just adding "use server" the function will be hoisted to an endpoint, so that'll be much less work to create actions.
📄 Epic PWA Offline Guide
The Remix PWA team has converted the Epic Stack into a progressive web application, allowing it to work fully offline. This guide documents how to do it.
remix-pwa.run/docs/main/offline
📺📄 Migrating Remix to Vite
Daniel recorded a video walkthrough migrating an old Remix app to Vite
Fernando wrote a post mortem on his experience migrating a 2.5 year old remix project to Vite
fernandoabolafio.medium.com/migrating-remix-to-vite
🔥 Remix Global App Data
Kiliman showed how to define global data server-side and use it anywhere in your app, including error boundaries.
github.com/kiliman/remix-global-data
📄 Add i18n to a Remix app
Sergio wrote a tutorial showing how to use remix-i18n to set the user's locale in a cookie and use that for language internationalization.
sergiodxa.com/tutorials/add-i18n-to-a-remix-vite-app
🔥 Remix Vite + Nitro
Nitro is an open source server toolkit that powers Nuxt and other frameworks. Allesandro built an example showing how to use Remix with Nitro via Vite
github.com/alessandrojcm/remix-nitro
📺 Deploy Remix SPA Mode to GitHub Pages
Brooks from the Remix team recorded a demo showing how to compile a Remix app into an SPA and deploy it to GitHub Pages
You'll set up GitHub Pages, create an Action that builds the app on CI, and learn how to set up your assets to work well here
📄 Remix + Cloudflare Pages
I wrote a few articles on how to set up Remix on Cloudflare pages, and then integration guides for Drizzle on either Cloudflare D1 or with a Postgres database
jacobparis.com/content/remix-cloudflare-pages
jacobparis.com/content/remix-drizzle-cloudflare-d1
jacobparis.com/content/remix-drizzle-cloudflare-pg
📄 Create your first Remix app
The Valley of Code has produced a new beginner level Remix tutorial that walks you through creating your first Remix app
🔥 Zero config Vite PWA for Remix
The Vite PWA project launched a new plugin for creating progressive web applications with Remix
📄 Build a simple login and logout
Sergio wrote a tutorial showing how to build a simple auth system with cookie session storage
sergiodxa.com/tutorials/build-a-simple-login-and-logout-with-remix
🔥 File based routing for React Router
This is a Vite plugin that adds a file based routing convention similar to Remix's, but for regular React Router apps
github.com/ws-rush/unplugin-remix-router
🔥 Remix Electron Llamafile
Jacob Ebey from the Remix team built a local LLM chat app template running on Electron.
github.com/jacob-ebey/remix-electron-llamafile
📄 Handle both JSON and FormData in Remix
Remix can submit both JSON and FormData to actions and use them in fetcher hooks, but they need to be handled separately. This article contains parseRequest and useFetcherBySchema utilities that let you handle both at once.
jacobparis.com/content/conform-json-formdata
🔥 Remix Deno Vite Template
This is a starter template using Remix Vite with Deno.
github.com/redabacha/remix-deno-vite-template
📺 Integrate Stripe in a Remix app
Daniel recorded a video covering Stripe integration, webhook setup, and the payment flow.
🔥 Remix Dev Tools 4.0
The Remix Dev Tools are now an ESM only Vite plugin, reducing the bundle size by 90%
remix-development-tools.fly.dev
📄 Upload handler for Cloudflare R2 Buckets
Alex Anderson created a small form handler to upload files to Cloudflare R2 buckets.
gist.github.com/alexanderson1993/77d7ca83314fbf5965944055babef4fe
🔥 Epic Stripe
Saurabh put together an example SaaS starter using the Epic Stack by integrating it with Stripe
github.com/saurabhp75/epic-stripe
🔥📄 Typed Single Data Fetch
Kiliman wrote an example and readme for using Remix's new Single Data Fetch api and returning typed responses. It includes some helper functions for inferring the types and for encoding custom data.
github.com/kiliman/remix-single-fetch
🔥 Remix on Lambda Rust Axum
Furkan built a url shortener app on Remix using AWS Lambda with a Rust Axum function
github.com/furkankly/url-shortener
🔥 Reset suspense boundaries on client navigation
Suspense boundaries will show the fallback on first load, but if you navigate to that route again they will show the old data until new data comes in.
If you want it to show the fallback every time, add a key to the Suspense boundary.
github.com/kiliman/remix-suspense
🐦 Build a useOptimisticLocation hook
During a form navigation, Remix won't update the location until the new loader's data is ready.
Matt Aitken from Trigger.dev made a new hook that shows the new location during pending navigations.
twitter.com/mattaitken/status/1764682261683945903
🇲🇦 Meet the Remix Community in Morocco and Bosnia 🇧🇦
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: Casablanca, Morocco
- 🇧🇦 NEW: Sarajevo, Bosnia-Herzegovina
- 🇺🇸 Lehi, Utah
- 🇮🇳 Pune, India
- 🇬🇧 London, UK
- 🇺🇸 New York City
- 🇧🇷 Säo Paulo, Brasil
- 🇺🇸 Austin, Texas
- 🇺🇸 San Francisco, California
- 🇲🇽 Mexico City, Mexico
- 🇩🇰 Copenhagen, Denmark
- 🇿🇦 Johannesburg, South Africa
- 🇨🇷 San Jose, Costa Rica
- 🇬🇭 Accra, Ghana
- 🇦🇹 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
