Official
others / www.youtube.com2024-10-15

Remix Roadmap Planning #16

Join Ryan and Michael as they walk through the Remix/React Router Roadmap - Public roadmap 👉 https://github.com/orgs/remix-run/projects/5 - RFCs 👉 https://github.com/remix-run/remix/discussions/categories/official-rfcs - "Open Development" blog post 👉 https://remix.run/blog/open-development - React Router Prerelease docs 👉 https://reactrouter.com/dev/ 0:00 Bumper 0:42 React Router v7 Overview 9:10 React Router v7 demo 11:12 Improved routing config with routes.ts 15:22 Automatic type-safe routing 25:31 How the type-safe routing works 32:33 "Are we forced into every new feature"? 41:06 Pre-rendering 49:59 Single fetch/turbo-stream 56:48 Final notes Learn more at https://remix.run

others / www.youtube.com2024-05-11

Homegrown Remix Middleware (feat. Kiliman)

Kiliman shows Brooks how to use two new packages he's created for homegrown session context and middleware, and walks him through authentication and session management examples in a Remix application. remix-express-vite-plugin 👉 https://github.com/kiliman/remix-express-vite-plugin Learn more about Kiliman 👉 https://twitter.com/codingthirty 00:00 - Introduction 00:44 - Kiliman's background with Remix 02:44 - Thoughts on Remix's routing convention 06:47 - Motivation for homegrown middleware 09:24 - Setting up the project 11:03 - Setting up express-dev-server and remix-create-express-app 18:36 - Setting up middleware 19:38 - Implementing session middleware 31:23 - Implementing auth middleware 40:55 - Comparing with the RFC 47:33 - Final thoughts Learn more at https://remix.run

others / www.youtube.com2024-01-01

Optimistic Drag and Drop

Tying all of the previous Trellix Singles together, this videos shows how you can build something as complex as optimistic Drag and Drop with the simple primitives of Remix. Explore the full code here 👉 COMING SOON 00:00 - Overview 00:46 - Drag and Drop implementation 05:45 - UX before optimistic UI 06:52 - Board state implementation 07:45 - Adding optimistic drag and drop 11:42 - UX with optimistic UI 12:28 - Canceling fetches with fetcher keys Learn more at https://remix.run

others / www.youtube.com2024-01-01

Optimistic Add

Learn how to leverage useSubmit and useFetchers to handle the complex use case of optimistically updating multiple forms without a single useState or useEffect. Explore the full code here 👉 COMING SOON 00:00 - Overview 02:14 - Before optimistic UI 04:16 - Using useSubmit 06:47 - Update data with pending items 09:45 - Get pending items with useFetchers 15:54 - Add pending items to data 17:50 - Demoing optimistic UI 18:26 - Auto scroll with flushSync 21:15 - Review Learn more at https://remix.run

others / www.youtube.com2024-01-01

Creating Records

This video brings everything together from the first 9 videos to allow authenticated users to create a new board and automatically see their new board once it's created. This is the loader, component, action trifecta that makes Remix so powerful. Explore the full code here 👉 COMING SOON 00:00 - Overview 01:31 - Setting up a Remix Action 02:24 - Validating the form data 05:08 - Creating a new board 05:27 - Essential vs. incidental complexity Learn more at https://remix.run

others / www.youtube.com2023-12-19

Redirecting Logged in Users

Like protecting routes from unauthenticated users, sometimes you also want to redirect authenticated users away from other routes. This video shows you the best way to handle redirecting a users from the root of Trellix to the "home" route. Explore the full code here 👉 COMING SOON 00:00 - Overview 00:19 - Redirecting from the root route (❌) 02:11 - Redirecting from the index route (✔️) 03:44 - Demoing redirecting logged in users 04:44 - Remix in the future: middleware Learn more at https://remix.run

others / www.youtube.com2023-12-16

Cookies in Remix

A cookie is a small piece of information that your server sends someone in a HTTP response that their browser will send back on subsequent requests. In this Single we explore how to create, write, and read cookies to manage user authentication. Explore the full code here 👉 COMING SOON 00:00 - Overview 00:39 - Scaffolding a createAccount function 03:20 - Creating a cookie 04:14 - Writing the cookie 05:30 - Cookie attributes explained 09:03 - Reading the cookie 11:22 - Review Learn more at https://remix.run

Show more