Remix ❤️ Vite: Introducing the new Remix Vite Plugin

Поделиться
HTML-код
  • Опубликовано: 15 сен 2024
  • 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 remix.run/docs...
    00:18 Initialize the project
    00:39 HMR + HDR
    03:08 MDX routes
    05:29 Importing SVGs
    07:36 Conclusion
  • НаукаНаука

Комментарии • 53

  • @ruijdacd
    @ruijdacd 10 месяцев назад +75

    This is what Vercel should've done instead of leaving us hanging with Webpack (can't really use Turbopack at the moment)

    • @Channelcustomization832
      @Channelcustomization832 10 месяцев назад +1

      Turbopack doesn't work for me at all. I am using Next.js build in Docker container though.

    • @neofox2526
      @neofox2526 10 месяцев назад

      its insane turbopack still doesnt work. i was like ok i havent tried it since next 13.4 so it should work in 14 and it still cant compile my app

  • @matanon8454
    @matanon8454 10 месяцев назад +29

    A dream comes true ❤ thanks remix team for this awesome work.
    Love the video format btw 👍

  • @miGuHD
    @miGuHD 10 месяцев назад +18

    Just when I was (almost) decided to try SvelteKit, you pull me back in the doubt territory and now I need to reconsider between Svelte & Remix ONCE MORE (I come from Next)

    • @matanon8454
      @matanon8454 10 месяцев назад +2

      I am exactly in the same position 😅😬

    • @tomm5765
      @tomm5765 10 месяцев назад

      I think you should try both that way you can make an informed choice which one you prefer and why 👍 also that way if people ask why you prefer one over the other you can answer from your experience

  • @willsmith4140
    @willsmith4140 10 месяцев назад +8

    I remember also being blown away by the old one when watching a hello world demo, but add a thousand files using MUI and it slows to more like 5 seconds per reload.
    I'd love to see a more life-like example when looking at performance.

    • @derek123wil0
      @derek123wil0 10 месяцев назад

      Does MUI create a ton of javascript objects for every little style?

    • @ReactTipsWithBrooks
      @ReactTipsWithBrooks 10 месяцев назад +4

      Totally valid! It's hard to show everything. I know MUI and AntD were libraries we've run into issues with in the past, so the team definitely stress tested on them. The way Vite works it'll prebundle these large libraries, so the 5 second reloads should be totally eliminated. Definitely reach out if that's not the case for you

    • @willsmith4140
      @willsmith4140 10 месяцев назад

      @@ReactTipsWithBrooks makes sense, can't wait to give it a go

  • @JackSparrah
    @JackSparrah 10 месяцев назад +4

    Alright, I've been putting off trying Remix for long enough. This has convinced me. You guys crushed it!

  • @simonswiss
    @simonswiss 10 месяцев назад +3

    Hot damn - the storytelling in this video is really great! Love the natural, casual but very punchy delivery. And the (maybe) staged trip-ups like "oh, my types don't work - aha, we can add this env.d.ts line". Super good stuff and Remix + Vite is very impressive!

    • @ReactTipsWithBrooks
      @ReactTipsWithBrooks 10 месяцев назад +2

      What can I say, I'm a good actor 😉
      Thanks for the kind words! I'm glad the storytelling felt the way you described it, that's exactly what I was going for!

  • @DrewLytle
    @DrewLytle 10 месяцев назад +8

    Hell yeah! Great work Remix team, and hoping for more videos Brooks!

  • @DEV_XO
    @DEV_XO 10 месяцев назад +3

    This is huge! ❤ Also, amazing walkthrough, Brooks!

  • @enochabassey2786
    @enochabassey2786 10 месяцев назад

    Much love to you guys. This is super awesome.

  • @fpigeonjr
    @fpigeonjr 10 месяцев назад

    thanks Remix team, this is good news.

  • @TEMISsX
    @TEMISsX 10 месяцев назад +1

    Keep going ! Remix rules

  • @teknolovedigital
    @teknolovedigital 6 месяцев назад

    Its stable now and very awesome🎉

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

    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 Месяц назад

      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 Месяц назад

      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 Месяц назад

      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 ….

  • @tririfandani1876
    @tririfandani1876 10 месяцев назад +1

    Thanks so much for this. The awesomeness will be complete, if `unstable_vitePlugin` will replaced by just `vitePlugin` or maybe might as well renamed it to `remix`

  • @mtin79
    @mtin79 10 месяцев назад +3

    Awesome, although I currently looking forward to official bun runtime support …

  • @erwinnurhaq
    @erwinnurhaq 10 месяцев назад +2

    subarashiii

  • @septrabbitl5438
    @septrabbitl5438 10 месяцев назад

    Wow, this is great! Love it!!!😍

  • @Beyram1501
    @Beyram1501 10 месяцев назад

    Remix is even scarier now 💪🏼

  • @plusplus940
    @plusplus940 10 месяцев назад

    fantastic move, love vite

  • @guhaprasaanthnandagopal8486
    @guhaprasaanthnandagopal8486 10 месяцев назад +1

    Just to confirm, _index.js is quite like _app.js in NextJS right? a HOC

  • @pawan29121991
    @pawan29121991 10 месяцев назад

    Amazingly well done ✅

  • @alemtuzlak
    @alemtuzlak 10 месяцев назад

    Awesome stuff!

  • @iwanttopunchtheosface
    @iwanttopunchtheosface 10 месяцев назад

    Amazing!

  • @DanielTolentino42
    @DanielTolentino42 10 месяцев назад

    Magic!

  • @phantazzor
    @phantazzor 10 месяцев назад

    is this meaning that you will implement vite for shopify with hydrogen any view transitioning as in astro ?

  • @user-ll9cp3cu7n
    @user-ll9cp3cu7n 10 месяцев назад

    This is wild

  • @sarthakmalhotra7912
    @sarthakmalhotra7912 10 месяцев назад

    As a nextjs user who has to to wait for the page to reload after changing a fking tailwind class it is blowing my fking mind.

  • @kasperwargua8082
    @kasperwargua8082 10 месяцев назад +2

    can it handle plugin for SSR styled-components? 🙏

    • @magnusred2945
      @magnusred2945 10 месяцев назад +3

      Do not use CSS-in-JS long term it will not be supported

    • @ReactTipsWithBrooks
      @ReactTipsWithBrooks 10 месяцев назад +1

      As long as there's a Vite plugin (which I imagine their is, just haven't really messed with) it should work fine!
      Personally I would recommend avoiding css-in-js libraries that don't support a static output or work with React 18 streaming. I believe styled-components has been exploring this, but I'm not sure where they're at.
      This just my personal opinions coming from a place where that particular library caused us a lot of perf and upgrade pain. If you're forced to stay on it, my hope is the Vite plugin means you can at least use it in Remix.

  • @laptopuser5198
    @laptopuser5198 10 месяцев назад

    Remix FTW

  • @omarcardenas3728
    @omarcardenas3728 10 месяцев назад

    Nice

  • @Taylor-ps1ln
    @Taylor-ps1ln 10 месяцев назад

    Where can we deploy this?

    • @Remix-Run
      @Remix-Run  10 месяцев назад +1

      Since Vite is a dev/build too, you _should_ be able to deploy this to all the same environments as before. Remix is very intent on always being a "bring your own server" framework.
      That said, currently this is not supported for Vercel, since they fork Remix to enable some features of their platform. They are already working on support: github.com/vercel/remix/issues/63
      The other one the team is working on is Cloudflare support, which we plan to have supported before removing the "unstable_" prefix from this feature

    • @Taylor-ps1ln
      @Taylor-ps1ln 10 месяцев назад

      That's awesome! Do you guys have a timeline for Cloudflare support? Will you guys be using Hono? Thank you for all your work! @@Remix-Run

  • @tedogirma
    @tedogirma 10 месяцев назад +1

    please solve hydration issue problem 👍👍👍👍👍

    • @magnusred2945
      @magnusred2945 10 месяцев назад +4

      Should be fixed with React 18.3

    • @ZeroRegretz
      @ZeroRegretz 10 месяцев назад +1

      What's the issue?

    • @magnusred2945
      @magnusred2945 10 месяцев назад +2

      @@ZeroRegretz basically some chrome extensions break react hydration

    • @james.restall
      @james.restall 10 месяцев назад +2

      react 18.3 canary fixed hydration errors from extensions modifying the html head for me.

    • @tedogirma
      @tedogirma 10 месяцев назад

      Thanks all of you guys 👍👍👍😊

  • @ha_ks799
    @ha_ks799 10 месяцев назад +1

    @varcel