Remix
Remix
  • Видео 140
  • Просмотров 1 270 262
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 👉 github.com/kiliman/remix-express-vite-plugin
Learn more about Kiliman 👉 kiliman/
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...
Просмотров: 2 433

Видео

Deploying Remix to GitHub Pages
Просмотров 3,7 тыс.4 месяца назад
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: 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 remix.run
Build Anything with Remix and Strapi (feat. Paul Bratslavsky)
Просмотров 2,7 тыс.6 месяцев назад
Paul shows Brooks how easy it is to build anything with Remix using Strapi as your headless CSM. Strapi Remix Starter 👉 github.com/PaulBratslavsky/strapi-remix-starter Learn more about Paul 👉 codingthirty 00:00 - Introduction 03:44 - Bootstrapping the project 08:49 - Using the Strapi dashboard to drive content 13:51 - Overview of roles and permissions 17:54 - Leveraging middleware 2...
Searching IndexedDB in Remix
Просмотров 7 тыс.6 месяцев назад
Learn how to push all the caching strategies explored so far to the max and provide a UI with instant search and navigation 🤩 Play with this demo 👉 remix-movies.pages.dev/ Checkout the code 👉 github.com/remix-run/example-movies 00:00 - Search logic overview 02:40 - Search demonstration 05:12 - Optimizing search with IndexedDB 09:35 - Optimized search demonstration 13:11 - Deploying the applicat...
Persistent Managed Caches with Remix Client Loader
Просмотров 5 тыс.6 месяцев назад
Take fine-grained control of your site's user experience by leveraging clientLoader to cache data directly in the browser. Play with this demo 👉 remix-movies.pages.dev/ Checkout the code 👉 github.com/remix-run/example-movies 00:00 - Previous caching strategies overview 00:46 - Client-side caching with browser storage 04:45 - Demonstration of the persistent cache 06:27 - Inspecting IndexedDB 08:...
Cache Control in Remix Loaders
Просмотров 6 тыс.6 месяцев назад
Learn how to easily optimize subsequent requests to the same page by adding a Cache Control headers to Remix Loaders. Play with this demo 👉 remix-movies.pages.dev/ Checkout the code 👉 github.com/remix-run/example-movies 00:00 - Navigations with cache control 01:28 - Adding Cache Control to the Loader 03:10 - Previewing the site with Cache Control Learn more at remix.run
Prefetching Links in Remix
Просмотров 5 тыс.6 месяцев назад
Optimize your user's experience with instant navigations by prefetching route data. Play with this demo 👉 remix-movies.pages.dev/ Checkout the code 👉 github.com/remix-run/example-movies 00:00 - Navigation without prefetching 01:13 - Prefetching pages on hover & focus 04:14 - Prefetching images 06:46 - How does Remix prefetching work? Learn more at remix.run
How to Fix CJS/ESM Bugs in Remix
Просмотров 3,7 тыс.6 месяцев назад
Learn how to eliminate CJS/ESM bugs in your Remix application Remix Vite Plugin troubleshooting docs 👉 remix.run/docs/en/dev/future/vite#troubleshooting Learn more at remix.run
Caching Data in Memory with Remix Client Loaders
Просмотров 8 тыс.6 месяцев назад
Learn how to improve your user's experience and websites performance by caching data in memory on the client using clientLoader Play with this demo 👉 remix-movies.pages.dev/ Checkout the code 👉 github.com/remix-run/example-movies 00:00 - Problem explained 01:21 - Setting up a clientLoader 02:44 - Adding a client-side cache 05:54 - Bug with the initial request 06:40 - Enabling clientLoader durin...
Deferring Data + Streaming in Remix
Просмотров 13 тыс.6 месяцев назад
Learn how to reduce your website's load time by deferring and streaming data using defer, Suspense, and Await. Play with this demo 👉 remix-movies.pages.dev/ Checkout the code 👉 github.com/remix-run/example-movies 00:00 - Project overview 00:45 - Previewing the deployed site 01:45 - Real-world profiling with WebPageTest 02:46 - What are we waiting on? 03:55 - Using defer to improve the page spee...
Passkey-Based Auth in Remix (feat. Alex Anderson)
Просмотров 2,9 тыс.7 месяцев назад
Passkey-Based Auth in Remix (feat. Alex Anderson)
Optimistic Drag and Drop
Просмотров 9 тыс.7 месяцев назад
Optimistic Drag and Drop
Optimistic Add
Просмотров 7 тыс.7 месяцев назад
Optimistic Add
In-Place Optimistic UI
Просмотров 8 тыс.7 месяцев назад
In-Place Optimistic UI
User Feedback with Busy Indicators
Просмотров 6 тыс.7 месяцев назад
User Feedback with Busy Indicators
Redirecting to New Records
Просмотров 3,1 тыс.7 месяцев назад
Redirecting to New Records
Creating Records
Просмотров 4,4 тыс.7 месяцев назад
Creating Records
Redirecting Logged in Users
Просмотров 4,4 тыс.7 месяцев назад
Redirecting Logged in Users
Protecting Routes with Auth
Просмотров 8 тыс.7 месяцев назад
Protecting Routes with Auth
Logging in Users
Просмотров 3,9 тыс.7 месяцев назад
Logging in Users
Creating User Accounts
Просмотров 4,2 тыс.7 месяцев назад
Creating User Accounts
Implementing Logout
Просмотров 4,1 тыс.7 месяцев назад
Implementing Logout
Cookies in Remix
Просмотров 9 тыс.7 месяцев назад
Cookies in Remix
Module Co-Location with Route Folders
Просмотров 6 тыс.7 месяцев назад
Module Co-Location with Route Folders
Form Validation
Просмотров 8 тыс.7 месяцев назад
Form Validation
Forms: GET vs. POST and Remix Actions
Просмотров 14 тыс.7 месяцев назад
Forms: GET vs. POST and Remix Actions
Background Jobs in Remix with Trigger.dev (feat. Eric Allam)
Просмотров 2,5 тыс.8 месяцев назад
Background Jobs in Remix with Trigger.dev (feat. Eric Allam)
Remixing Toast Notifications (feat. Andre Landgraf)
Просмотров 4,7 тыс.8 месяцев назад
Remixing Toast Notifications (feat. Andre Landgraf)
Remix Dev Tools (feat. Alem Tuzlak)
Просмотров 2,8 тыс.8 месяцев назад
Remix Dev Tools (feat. Alem Tuzlak)
Server-Sent Events in Remix (feat. Moishi Netzer)
Просмотров 5 тыс.8 месяцев назад
Server-Sent Events in Remix (feat. Moishi Netzer)

Комментарии

  • @malachibergman902
    @malachibergman902 2 дня назад

    Ummmm, I’m just hearing about this! What! This is a game changer. I’ve been staying away from SSR, but man, this makes me want to try this combined with my current stack which is primarily ts-rest / koa and express. Yes both koa and express, very easy to do with just some sub path handling middleware in the koa router. I even have separate body parser for each, which is necessary because of how they parse the body differently.

    • @malachibergman902
      @malachibergman902 2 дня назад

      Point is, I’ve stayed away from SSR because it by definition is a convolution of concerns, primarily authentication and security concerns. I think at this point those concerns are FAR outweighed by the possibility of a monorepo that has FULL control and the least duplication of data structure typing and all of the issues that you run into with having a completely unmarried front end and backend, with the additional upsides of SSR, but not forced to use SSR, no restrictions on having to use server functions which would eliminate the possibility of using web sockets… this is really really really underrated

    • @malachibergman902
      @malachibergman902 2 дня назад

      I think the biggest challenge in todays programming world lies in DevOps, primarily in the level of devotion and skills it takes to scale using kubernetes, that is, unless you’re using Google cloud which seems to do quite a bit for you automatically ( you can even have it started up your servers right from VSCode apparently!)

    • @malachibergman902
      @malachibergman902 2 дня назад

      But if you go that route, then you’re still dealing with the issues of database because now you might be restricted in what database you choose. Plenty of options there, definitely need a good bag of tools available for different projects when it comes to database ….

  • @ManojAP
    @ManojAP 5 дней назад

    please add tw css option in create cli

  • @alexm6978
    @alexm6978 5 дней назад

    really nice tutorial better than most of the youtube hackjobs , where it feels disconnected and rushed

  • @cannabisanomaly
    @cannabisanomaly 7 дней назад

    test

  • @asramaa
    @asramaa 11 дней назад

    Thank you for this awesome stuff along with good tips.

  • @sreeharsharaveendra289
    @sreeharsharaveendra289 12 дней назад

    I have been learning about reactive programming on the backend, seeing even-driven non-waterfall approach in remix is amazing

  • @Rarests
    @Rarests 15 дней назад

    Fantastic!

  • @ammariqbal8363
    @ammariqbal8363 19 дней назад

    Are they gonna implement RSC in RR 7.

  • @juanganma9806
    @juanganma9806 25 дней назад

    thank you so much

  • @mpbros.official
    @mpbros.official 26 дней назад

    Thank you a lot guys, doin’ great job! I’ve never was so excited about web technologies as much as remix(rr). I think rr team gonna beat next and its business model (dont like it at all)

  • @giroda
    @giroda 27 дней назад

    THIS IS HOW AN INSTRUCTION VIDEO SHOULD BE MADE IN YT.

  • @jitujazz123
    @jitujazz123 27 дней назад

    Thanks for the great tutorial there. Can we send some data from clientLoader to serverLoader when calling the serverLoader function? My serverLoader returns a few things and I want to cache only a piece of that info and not the complete response. It would work if I could send some flag to the serverLoader to not load data from the DB as the localStorage has that data

  • @kabal911
    @kabal911 29 дней назад

    That defer trick is golden

  • @MonoMario89
    @MonoMario89 Месяц назад

    I'm already picturing my code with the new APIs. Tasty

  • @levimk101
    @levimk101 Месяц назад

    Oh man, native middleware in Remix would be so good.

  • @cmmartti
    @cmmartti Месяц назад

    Love the marm discussion and inventing contractions on the fly!

  • @keepforever726
    @keepforever726 Месяц назад

    THE FUTURE IS BRIGHT ! ! !

  • @eleah2665
    @eleah2665 Месяц назад

    Hi and thanks.

  • @lukejagodzinski
    @lukejagodzinski Месяц назад

    I just love the idea of middleware being responsible for modifying response and not exposing response stub in the loader - it's so elegant and simple. It's funny that you came up with this idea on live stream :D

  • @danestevens1
    @danestevens1 Месяц назад

    Middleware is a global loader. Loader adds additional route specific data

  • @VanNguyen-cr6ns
    @VanNguyen-cr6ns Месяц назад

    Can I setup aws cloudfront for this app, client side is slow in the first time using app.

  • @pcv-free-as-a-bird
    @pcv-free-as-a-bird Месяц назад

    Hi Remix! I’m building right now a headless ecommerce using Remix and Hydrogen. The problem is that I’m trying to deal with a package called @sanity/image-url from Sanity and I have this Vite SSR problem. The thing is that I did both solution from the video and it’s still not working.. any idea?

  • @kudorgyozo
    @kudorgyozo Месяц назад

    These videos are awesome. Thanks!

  • @SumitSingh-c8n
    @SumitSingh-c8n Месяц назад

    how to get the data from dynamic generating input fields :]

  • @pcv-free-as-a-bird
    @pcv-free-as-a-bird Месяц назад

    You guys should release a prefetch for the image in the v3 🙌

  • @pcv-free-as-a-bird
    @pcv-free-as-a-bird Месяц назад

    Super cool! For prefetching (render) I would have a question. Are the links downloaded after the initial load with the loader data or at the same time? Would it slow my initial load? Anyone? Thank you

  • @AlexBlack-xz8hp
    @AlexBlack-xz8hp Месяц назад

    This is awesome!

  • @mr.daniish
    @mr.daniish Месяц назад

    Ryan, ily 🫶

  • @henrikrinne3639
    @henrikrinne3639 Месяц назад

    Hello from the future

  • @DaveVedder
    @DaveVedder Месяц назад

    For anyone watching this now, `useTransition` was renamed `useNavigation` in Remix.

  • @SikarinPunsawat
    @SikarinPunsawat Месяц назад

    Defer still good for SEO ? I was try it and what in pagesource it seem that show loading... component

  • @BolatbekYeraliyev
    @BolatbekYeraliyev Месяц назад

    no single comment about texture of his shirt and video compression?))) thank you Ryan for recording this video. amazin presentation and lots of stuff to learn about

  • @sahilmulla1680
    @sahilmulla1680 Месяц назад

    is there an onPrefetch on Links?

  • @jwdotjs
    @jwdotjs 2 месяца назад

    Great updates 🎉

  • @moishinetzer
    @moishinetzer 2 месяца назад

    Awesome session! Another big win of defineRoute$ is that you get type hints for all Remix route-level APIs (some beginners I have helped don’t know many of them)

  • @jamshediqbal7936
    @jamshediqbal7936 2 месяца назад

    Is remix merging into react-router?

    • @samiullahsheikh5015
      @samiullahsheikh5015 Месяц назад

      Yes it is almost merged into react-router and in v7 of react-router it will the the react-router + vite = remix. They officially announced that in reactis conference

  • @user-kt1iz4vc3x
    @user-kt1iz4vc3x 2 месяца назад

    you can't argue against michael "what are you doin with the remix branding blah blah" talking like a idiot lol

  • @jtrenda333
    @jtrenda333 2 месяца назад

    Literally as you're talking about not knowing how to notify people that it's starting, I'm sitting here thinking to myself, "Dang, I missed it..." Oh well, at least it's still here to watch after the fact.

  • @lucasgiunta8874
    @lucasgiunta8874 2 месяца назад

    Can we already find documentation about this single fetch ? What's mean exactly for our loader function ?

    • @Remix-Run
      @Remix-Run 2 месяца назад

      Single Fetch is currently behind an unstable future flag as we're still working out the API You can view the current docs here: remix.run/docs/en/main/guides/single-fetch

  • @joyayitey538
    @joyayitey538 2 месяца назад

    Awesome stuff! Am I the only one that noticed Ryan is using Vim-based editor?

  • @eleah2665
    @eleah2665 2 месяца назад

    Hi and thanks. Say hi to Brooks for me. Let's have lunch in Austin some time.

  • @user-jn3yi8rm1p
    @user-jn3yi8rm1p 2 месяца назад

    which tool do you use for disalbe/enable javascript on developer mode?

  • @SilvaOnTube
    @SilvaOnTube 2 месяца назад

    This is singularly unhelpful for someone like me who knows nothing about Remix.

  • @beakerbkr
    @beakerbkr 2 месяца назад

    I know this video is 2 years old but there is still no better way to handle life cycle events (onSuccess, onError etc..) outside of react-query. There are some RFC's on the Remix and React-Router repos that discuss adding these lifecycle events. I just want to add my voice in support of including these for useSubmit and useFetcher Still loving Remix and we are using it to build some amazing applications at my work.

  • @sbogdaniuk
    @sbogdaniuk 2 месяца назад

    Thanks! This is the really best DOCs for me, when I watch how designer of the product uses his product. Also I can see how Ryan is thinking while coding. PS: Ryan, I want to buy for you some cubes to learn time, sort of how babies learn things :D fun to watch u struggling with it ))

  • @hectorleon431
    @hectorleon431 2 месяца назад

    This steps do not solve exports is not defined from any library, ¿is anyone with same issue?

  • @VladyVeselinov
    @VladyVeselinov 2 месяца назад

    Kiliman is the embodiment your of the inner developer voice.

    • @Kiliman3970
      @Kiliman3970 2 месяца назад

      Thanks for the kind words.

  • @mannuelf
    @mannuelf 2 месяца назад

    Thank you for this, vite-plugin-cjs-interop for the win ❤

  • @resulterror2381
    @resulterror2381 2 месяца назад

    can i use github pages for deploy shopify remix app ?

  • @nodeguru7663
    @nodeguru7663 2 месяца назад

    I'm curious to know how we can upload files in Remix please make a video.