Discover
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-09-23

EVERYTHING you need to KNOW about Remix.run ACTIONS

Today we go over how actions inside of React Router v7 / Remix.run work. How you submit to them, what happens when you do, how they re-trigger loaders, resource routes, multiple forms on a single page handling. Custom HoC and middleware and much much more! šŸ‘ Don't forget to like, comment, and subscribe for more episodes in this series! Join our coding community and let's build something amazing together. šŸ“Œ Stay Connected: Twitter: https://twitter.com/AlemTuzlak GitHub: https://github.com/AlemTuzlak Company Github: https://github.com/forge42dev ā±ļø Timestamps: 00:00 - Intro 00:33 - What are remix actions? 01:04 - Usual submission flow 03:37 - Action submission flow 06:13 - loaders re-triggering flow 07:19 - what you can use re-triggers for 07:59 - Why re-triggers are awesome 08:26 - what happens when you submit to an action? 08:46 - returning response from an action 09:36 - throwing responses 09:57 - throwing a redirect response 10:36 - when is it useful to throw responses 11:02 - throwing non-redirect responses 12:05 - difference between a thrown redirect and normal response 12:53 - useActionData important info 13:45 - resource routes 15:28 - why are resource routes awesome 17:13 - setting up the playground 17:56 - adding a progressively enhanced form 18:37 - triggering an action 19:03 - adding fields to the form 19:37 - seeing our server data 20:23 - progressive enhancement with no JS 22:19 - handling multiple forms on a page with single action 26:05 - handling multiple forms on a page with resource routes & tRPC like loaders 29:59 - redirecting from actions to new routes 31:30 - throwing responses & errors into error boundaries 33:03 - redirecting on successful submissions 33:39 - adding action middleware 35:20 - outro šŸ”– Tags: Remix framework, Vite, Remix Vite, web development, frontend development, Remix tutorial, coding tutorial, Remix Vite tutorial, open source, coding community, remix framework tutorial

others / www.youtube.com2024-09-09

Everything YOU need to KNOW about Remix loaders

Today we go over how loaders inside of React Router v7 / Remix.run work. How you can cache loaders, how you can optimize them, where and how they re-trigger, and by the end of this video you will be ready to use them for any situation that might come up. šŸ‘ Don't forget to like, comment, and subscribe for more episodes in this series! Join our coding community and let's build something amazing together. šŸ“Œ Stay Connected: Twitter: https://twitter.com/AlemTuzlak GitHub: https://github.com/AlemTuzlak Company Github: https://github.com/forge42dev ā±ļø Timestamps: 00:56 - What are loaders exactly? 04:19 - Single fetch approach with loaders 07:40 - What can you return from loaders 08:32 - Successful responses 08:50 - Thrown responses 09:25 - Error responses 09:54 - Streaming the data 11:53 - Streaming the data with single fetch 13:28 - When do loaders re-fire 13:43 - re-fire on action submission 14:40 - re-fire on param change 15:56 - re-fire on search param change 16:37 - re-fire on useRevalidate trigger 17:04 - re-fire on navigation to the same page 18:02 - how to stop loader re-triggers 20:14 - Practical examples 23:29 - Defering slow requests 25:56 - Using server caching for faster response times 28:25 - Caching with headers 30:25 - Using shouldRevalidate 32:44 - clientLoader caching (with remix-client-cache) 32:59 - Defer with single fetch šŸ”– Tags: Remix framework, Vite, Remix Vite, web development, frontend development, Remix tutorial, coding tutorial, Remix Vite tutorial, open source, coding community, remix framework tutorial

others / www.youtube.com2024-08-28

How to Create the Perfect Hono + Remix Server in under 10 minutes

Today we go over how to switch your Remix vanilla server over to Hono.js in your remix vite projects, how to type your AppLoadContext with TypeScript tricks and how to use middleware in Remix. We also use the i18n middleware for localization and internationalization. šŸ”— Resources and Links: GitHub Repo: https://github.com/AlemTuzlak/remix-ecommerce šŸ‘ Don't forget to like, comment, and subscribe for more episodes in this series! Join our coding community and let's build something amazing together. šŸ“Œ Stay Connected: Twitter: https://twitter.com/AlemTuzlak GitHub: https://github.com/AlemTuzlak Company Github: https://github.com/forge42dev ā±ļø Timestamps: 00:00 - Intro 00:28 - Going over what we need 01:25 - Adding the Hono server to Remix vite 02:20 - Extending our vite config 03:10 - Creating the load context 05:55 - Typing our app load context 07:28 - Adding internationalization i18n middleware 08:04 - Modifing our project 10:02 - Going over our implementation 11:10 - Going over what else you could do šŸ”– Tags: Remix framework, Vite, Remix Vite, web development, frontend development, Remix tutorial, coding tutorial, Remix Vite tutorial, open source, coding community, Hono.js

others / www.youtube.com2024-05-22

FUTURE of react-router v7 and Remix.run v3 EXPLAINED.

Curious about the future of React Router v7 and Remix.run? Watch this video for a detailed explanation of what's to come! Learn about the exciting updates and improvements in store for these popular tools. šŸ”— Resources and Links: The article: https://remix.run/blog/merging-remix-and-react-router Remix package RFC: https://github.com/remix-run/remix/discussions/7823 Single-fetch RFC: https://github.com/remix-run/remix/discussions/7640 šŸ‘ Don't forget to like, comment, and subscribe for more episodes in this series! Join our coding community and let's build something amazing together. šŸ“Œ Stay Connected: Twitter: https://twitter.com/AlemTuzlak GitHub: https://github.com/AlemTuzlak Company Github: https://github.com/forge42dev ā±ļø Timestamps: 00:00 - Intro 00:08 - Going over the announcement 01:22 - Why this makes sense in depth explanation 04:29 - Going through the rest of the article. 07:35 - Remix package RFC 10:45 - Remix Single Fetch RFC 14:47 - Remix future TL:DR 15:09 - The future of the packages and the great transition 17:15 - Outro šŸ”– Tags: Remix framework, Vite, Remix Vite, web development, frontend development, Remix tutorial, coding tutorial, Remix Vite tutorial, open source, coding community, Vite

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-05-08

Roadmap Planning #11

- 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 00:00 - Introduction and current work 10:18 - Overview of "In Progress" 13:44 - Fog of War 18:50 - Split out client loaders/actions 24:19 - Middleware and Server Context 40:48 - SSG Learn more at https://remix.run