How to Debug Remix loaders and actions in VS Code

This video shows how to configure VS Code to debug your Remix loaders and actions. NOTE: You can now use the `debugger` statement instead of the external `debug()` function. I tried this before, but it didn't work. Not sure why it works now. You still can't set a breakpoint inside a route module, but you can add `debugger` statement and it will break there. You can then step through your code. I will be re-recording this video with this new info. Get the launch configuration here: https://rmx.fyi/debug

HTTP vs. Server-side Cache in Remix by sergiodxa

When you build a web application, you may reach a point where some performance problems could be solved by a...

Test Remix loaders and actions by sergiodxa

If you are using Remix, most of your application code will live in the loaders and actions instead of React compo...

Build a Realtime Chat App with Remix and Supabase

Supabase is a collection of open-source tools that wrap around a PostgreSQL database. In this course, we look at building a realtime chat application with Remix, using Supabase for db hosting, authentication, authorization and subscribe to realtime db events - updating the UI as the database changes. We will learn about: loaders and actions in Remix querying and mutating data with Supabase authentication with GitHub authorization with RLS merging client and server state with realtime events deploying a Remix app to Vercel This course is 100% TypeScript, however, don't stress if you don't have any experience with TS, as Supabase does most of the heavy lifting here! 🎉

Validating Remix Form Data Using Zod and TypeScript

You can use Zod to validate form input and create typed TypeScript objects in a Remix action function that is handling the form data.

Building a full stack app with Remix, Prisma, and Supabase

There is a misconception that Remix is only for static sites. This is a how-to guide for building a full-stack app with the new framework + Prisma + Supabase, and deploying it to Vercel.

Remix for Next.js Developers

Snippets of code translated from Next.js to Remix. Learn Remix by example.

Remix Run - Introduction to HTTP Caching

HTTP Caching is a web fundamental every web developer should eventually learn. The quickest way to a slow website is to not understand caching and ofc, the best way to make your website fast is to take advantage of it. In this video we'll explain the basics of HTTP caching, how web browsers respond to it, and how CDNs take advantage of it, by building a bare-bones Node.js server and then quickly see how to specify caching headers in a Remix App.

E2E test Remix with Vitest and Puppeteer by sergiodxa

Vitest is a testing framework, similar to Jest, but way faster, built on top of Vite, which uses esbuil...

Use Remix with socket.io by sergiodxa

If you want to add real-time capabilities to your Remix app without using an external service, the easiest way is proba...

debounced-search.tsx

The useMatches hook in Remix by sergiodxa

If you use Remix, there's a hook that you can use called useMatches, this hook is a way to access some internal d...

Build a server-side filter UI with Remix

Create a filter bar that stores its state in the URL. Use the OData query string format to parse and serialize the filters. Create a custom hook to manage the filter state.

Debug server-side Remix using VSCode

Remix Cookbook - Easy to follow recipes for Remix.run

Easy to follow recipes for the Remix.run framework

Loader vs Route Cache Headers in Remix by sergiodxa

Document Request So, let's say you have a route at /my-super-route, and there you have a loader fun...

Supabase Auth with Remix

Authentication helpers for loaders and actions in Remix.

Authentication in Remix

As apps grow, almost all will need user authentication. Fortunately, Remix gives us tools to make this easy. In this post, we'll look at how we can add authentication to an app using Remix.

Add rolling sessions to Remix by sergiodxa

Rolling sessions is a technique to extend the maxAge of a session cookie by resetting the cookie's expiration date...

Improving Web Vitals in Remix

**[Your Remix app](https://remix.run/docs/en/v1/pages/stacks)** is fast by default, but with a few edits to **root.tsx** you can make it feel even faster...

Progressively enhance the useFetcher hook in Remix by sergiodxa

If you're using multiple forms on the same route, you may use the useFetcher hook, which also...

Easy Stripe Integration in your Remix.run App

In Today's episode will cover: - @Stripe Integration - Webhook Setup - Checkout Session and Payment Testing These videos are free and created for the community, support will be much appreciated! 🫶

How to Upload Images in a Remix Application by sergiodxa

The blog of sergiodxa

How to Redirect with Search Param in Remix by sergiodxa

The blog of sergiodxa