Merging Remix and React Router
We've been building a bridge from React Router to Remix, and we made it so good that we're going to merge the two projects.
We've been building a bridge from React Router to Remix, and we made it so good that we're going to merge the two projects.
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
- 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
A case study on how Shopify rapidly built a web version of their popular iOS/Android app Shop with Remix
Brooks walks through how to get started with Remix SPA mode (ssr: false) and how to setup a simple GitHub Action to deploy to GitHub Pages. Repo: https://github.com/brookslybrand/remix-gh-pages 00:00 - Intro 00:19 - Setting up a Remix SPA mode project 02:26 - Setting up GitHub Pages 03:47 - Setting up a GitHub Action 06:12 - Fixing asset 404s with basename 08:44 - Outro Learn more at https://remix.run
Learn how to implement internationalization (i18n) in your Remix project. Discover the significance of i18n, gain an understanding of the core principles, and learn various strategies for effective i18n management with Remix.
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
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
Learn how to create in-place optimistic UI to avoid flickering of state after submitting an action and waiting for the loader to revalidate. Explore the full code here 👉 COMING SOON 00:00 - Overview 00:57 - EditableText component 01:50 - Form submissions without optimistic UI 03:14 - Adding optimistic UI 06:58 - Handling focus management 10:19 - Demoing the optimistic UI Learn more at https://remix.run
With useNavigation we can render contextual pending UI to give our user feedback that our application is "thinking" while they way for an action to resolve. Explore the full code here 👉 COMING SOON 00:00 - Overview 00:45 - Adding pending UI via useNavigation 02:57 - Improving pending UI via formAction 04:10 - Pending UI for multiple actions Learn more at https://remix.run
By returning redirects we can improve the user's experience after they create a new board by changing a single line of code. Explore the full code here 👉 COMING SOON 00:00 - Overview 00:33 - Redirect after creating a record Learn more at https://remix.run
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
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
Remix makes it easy to protect routes that require the user to be authenticated. With a single function you can get the user's data if they're authenticated and otherwise redirect them to the login page. Explore the full code here 👉 COMING SOON 00:00 - Overview 00:36 - Requiring a user on routes 02:32 - Throwing a redirect 04:40 - Demoing the protected route Learn more at https://remix.run
Learn how to log users out by invalidating the auth Cookie and redirecting after submitting the logout form. Explore the full code here 👉 COMING SOON 00:00 - Creating a logout route 00:38 - Deleting the auth cookie 01:39 - Demoing the logout form Learn more at https://remix.run
Learn how to create new users on signup, and enhances the user validation by checking whether or not the user exists. Explore the full code here 👉 COMING SOON 00:00 - Overview 00:20 - Exploring the signup/queries module 00:58 - Validating account existence Learn more at https://remix.run
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
Remix's routing convention allows you to convert a route to a folder so you can co-locate modules and keep your route logic clean. Explore the full code here 👉 COMING SOON 00:00 - Overview 00:27 - Converting route files into folders 01:12 - Moving validation code outside the route 02:05 - Cleaning up the code Learn more at https://remix.run
Learn how to validate form data inside a Remix Action and display useful error messages to your user. Explore the full code here 👉 COMING SOON 00:00 - Overview 00:29 - Setting up placeholder error messages 02:17 - Validating form data in Remix Actions 06:03 - Rendering validation errors Learn more at https://remix.run
Learn the difference between submitting a form with a GET vs. a POST method, and how to access that information using an Action in Remix. Explore the full code here 👉 COMING SOON 00:00 - Overview 00:26 - Submitting a GET request 01:16 - Submitting a POST request 2:00 - Accessing form data on the server 4:24 - Review Learn more at https://remix.run
- Public roadmap 👉 https://github.com/orgs/remix-run/projects/5/views/1 - RFCs 👉 https://github.com/remix-run/remix/discussions/categories/official-rfcs - "Open Development" blog post 👉 https://remix.run/blog/open-development 00:00 - Introduction 02:47 - Middleware 25:37 - Server Context 50:24 - Client Middleware (Q&A) Learn more at https://remix.run
Andre teaches Brooks how to build a toast notification system in Remix using Cookies. Full Stack Web Development with Remix 👉 https://a.co/d/5BmioFi Repo (initial setup) 👉 https://github.com/PacktPublishing/Full-Stack-Web-Development-with-Remix/tree/main/15-advanced-session-management/bee-rich/solution Learn more about Andre 👉 https://github.com/andrelandgraf 00:00 - Introductions 06:33 - Setting up the project 12:53 - Client-side toast notifications 19:37 - Server-side toast notifications 28:00 - Cookie-driven toast notifications (diagram) 37:15 - Cookie-driven toast notifications (code) 1:10:30 - Progressively enhanced toast notifications 1:15:15 - Concluding thoughts Learn more at https://remix.run
- Public roadmap 👉 https://github.com/orgs/remix-run/projects/5/views/1 - 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 recap 01:27 - Bundle Shredding 🎸 for Lambda/Serverless Architecture 06:55 - RFC: React Elements and Promises as loader / action data 39:40 - Client Data 47:53 - Remix SPA Target 54:53 - Vite update (Q&A) 57:17 - unstable_parseMultipartFormData (Q&A) 1:00:15 - Middleware (Q&A) Learn more at https://remix.run
Alem teaches Brooks how to use Remix Forge and the Remix Dev Tools Remix Forge 👉 https://marketplace.visualstudio.com/items?itemName=CodeForge.remix-forge Remix Dev Tools 👉 https://github.com/Code-Forge-Net/Remix-Dev-Tools Learn more about/sponsor Alem 👉 https://github.com/AlemTuzlak 00:00 - Introductions 03:55 - Setting up the project 06:43 - Remix Forge 20:51 - Setting up the Remix Dev Tools 33:37 - Exploring the "Settings" tab 41:47 - Exploring the "Routes" tab 52:13 - Exploring the "Active page" tab 1:11:04 - Exploring the "Errors" tab 1:24:17 - New Vite plugin 1:33:46 - Remix Dev Tools plugins 1:36:19 - Remix Dev Tools enhanced logging 1:41:44 - Final thoughts Learn more at https://remix.run
Moishi Netzer teaches Brooks how to implement server-sent events in Remix! Repo 👉 https://github.com/moishinetzer/remix-live-loader Server-sent events docs 👉 https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events Learn more about Moishi 👉 https://github.com/moishinetzer 00:00 - Introductions 02:44 - Walkthrough of the app 08:50 - Setting up server-sent events 27:18 - Adding multiple listeners 39:14 - Live Chat 52:40 - Final thoughts Learn more at https://remix.run
Vite announcement blog post 👉 https://remix.run/blog/remix-heart-vite Migration guide 👉 https://remix.run/docs/en/dev/future/vite Vite announcement discussion 👉 https://www.youtube.com/watch?v=qyo5of7EDjY 0:00 - Migrating the default template 2:19 - Migrating the Express template 5:11 - Migrating the Indie Stack
Try it out the new plugin for yourself using a minimal server npx create-remix@latest --template remix-run/remix/templates/unstable-vite Or a custom Express server npx create-remix@latest --template remix-run/remix/templates/unstable-vite-express Learn more at https://remix.run/docs/future/vite 00:18 Initialize the project 00:39 HMR + HDR 03:08 MDX routes 05:29 Importing SVGs 07:36 Conclusion
Today we’re announcing that unstable support for Vite is available in Remix v2.2.0!
Brooks shows off the new experimental View Transition API in Remix v2.1.0 Release Notes 👉 https://github.com/remix-run/remix/releases/tag/remix%402.1.0 unstable_viewTransition API 👉 https://remix.run/docs/2.1.0/components/link#unstable_viewtransition Matt Brophy's React Router Demo 👉 https://github.com/brophdawg11/react-router-records Chapters 00:00 Introduction 02:41 Remix.run blog example 05:29 Transitioning specific elements 13:24 Accessibility and prefers-reduced-motion Learn more at https://remix.run
The second major release of Remix is stable today.
Check out the new v2_dev docs 👉 https://remix.run/docs/en/main/other-api/dev-v2 Indie stack 👉 https://github.com/remix-run/indie-stack
For a deeper dive, check out Pedro's talk at Remix Conf 2023 👉 https://pedrocattori.dev/blog/legendary-dx
Migration guide 👉 https://remix.run/docs/en/main/pages/v2#dev-server v2_dev docs 👉 https://remix.run/docs/en/main/other-api/dev-v2 Chapters 0:00 intro 0:15 Remix App Server 1:08 Express adapter 1:17 enable new dev server 2:02 package.json commands 3:40 removing require cache purging 5:03 broadcastDevReady 5:47 review 6:41 avoiding restarts
Speaker Bio: Ryan Florence has been obsessed with UX since using an Intellivision. https://remix.run/conf/2023/speakers/ryan-florence Speaker Bio: Michael Jackson, the author or Remix, not the pop star. https://remix.run/conf/2023/speakers/michael-jackson Learn more at https://remix.run
Learn more at https://remix.run https://remix.run/conf/2023 Join discord: https://rmx.as/discord CC https://event-captioner.deepgram.com/events/remix-2023
Learn more at https://remix.run/conf/2022 Chat at https://rmx.as/discord
We've introduced the concept of future flags to give you a smooth upgrade path for your Remix app.
Decoupling data-fetching from rendering introduces some complexities if you want to lazily load your route components. Check out how the newly introduced `route.lazy()` method helps solve this to keep your app bundles small and your UX snappy!
Learn more at https://remix.run
Learn to prevent scroll reset on navigation and how to take control over how it restores on back/forward. Learn more at https://remix.run
In this episode, Michael Jackson joins us to talk about Remix joining Shopify! We cover topics like Hydrogen (the Shopify stack for headless commerce), the future of Remix, and more! Links https://remix.run https://github.com/remix-run https://twitter.com/remixrun https://twitter.com/mjackson https://discord.com/invite/xwx7mMzVkA https://www.youtube.com/remixrun https://www.linkedin.com/in/mjijackson https://podrocket.logrocket.com/remix-run Tell us what you think of PodRocket We want to hear from you! We want to know what you love and hate about the podcast. What do you want to hear more about? Who do you want to see on the show? Our producers want to know, and if you talk with us, we’ll send you a $25 gift card! If you’re interested, schedule a call with us (https://podrocket.logrocket.com/contact-us) or you can email producer Kate Trahan at kate@logrocket.com (mailto:kate@logrocket.com) Follow us. Get free stickers. Follow us on Apple Podcasts, fill out this form (https://podrocket.logrocket.com/get-podrocket-stickers), and we’ll send you free PodRocket stickers! What does LogRocket do? LogRocket combines frontend monitoring, product analytics, and session replay to help software teams deliver the ideal product experience. Try LogRocket for free today. (https://logrocket.com/signup/?pdr) Special Guest: Michael Jackson .
Ryan shows us how to get granular with our errors and prevent slow, risky data loads from taking down the entire page if it has an error. Learn more at https://remix.run
Ryan takes us for a first look at Remix Streaming from the v1.11.0 release Learn more at https://remix.run
Learn more at https://remix.run
Learn more at https://remix.run
Learn more at https://remix.run
Learn more at https://remix.run
The React Router website
Apps that depend on Webpack loaders and plugins weren't able to incrementally migrate to Remix. Until now!
2-day single-track event. Remix is a full-stack web framework that lets you focus on the user interface and work back through web fundamentals to deli...
Remix takes the idea of “one-way data flow” and extends it across the network, so your UI truly is a function of state: from the client to the server and back again.
An objective comparison between Remix and Next.js
“The edge” isn’t just about static assets anymore. It’s increasingly becoming a place for dynamic assets resulting from compute. Remix is taking full advantage of this next generation of edge computing.
The web ecosystem can feel like it moves too fast sometimes. We're sensitive to that at Remix so we've designed it with your future in mind. Get good at Remix, get better at the web.
Decoupling data-fetching from rendering introduces some complexities if you want to lazily load your route components. Check out how the newly introduced `route.lazy()` method helps solve this to keep your app bundles small and your UX snappy!
We've introduced the concept of future flags to give you a smooth upgrade path for your Remix app.
A new package helps you upgrade from React Router v5 to v6 incrementally