Remix ❤️ Vite: Introducing the new Remix Vite Plugin
Вставка
- Опубліковано 23 жов 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
This is what Vercel should've done instead of leaving us hanging with Webpack (can't really use Turbopack at the moment)
Turbopack doesn't work for me at all. I am using Next.js build in Docker container though.
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
A dream comes true ❤ thanks remix team for this awesome work.
Love the video format btw 👍
Alright, I've been putting off trying Remix for long enough. This has convinced me. You guys crushed it!
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)
I am exactly in the same position 😅😬
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
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.
Does MUI create a ton of javascript objects for every little style?
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
@@ReactTipsWithBrooks makes sense, can't wait to give it a go
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!
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!
Hell yeah! Great work Remix team, and hoping for more videos Brooks!
This is huge! ❤ Also, amazing walkthrough, Brooks!
Its stable now and very awesome🎉
Much love to you guys. This is super awesome.
Awesome, although I currently looking forward to official bun runtime support …
Keep going ! Remix rules
thanks Remix team, this is good news.
Wow, this is great! Love it!!!😍
Remix is even scarier now 💪🏼
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.
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
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!)
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 ….
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`
subarashiii
Amazingly well done ✅
Just to confirm, _index.js is quite like _app.js in NextJS right? a HOC
fantastic move, love vite
vry col thx
Awesome stuff!
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.
is this meaning that you will implement vite for shopify with hydrogen any view transitioning as in astro ?
can it handle plugin for SSR styled-components? 🙏
Do not use CSS-in-JS long term it will not be supported
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.
Magic!
Remix FTW
This is wild
Nice
Where can we deploy this?
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
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
please solve hydration issue problem 👍👍👍👍👍
Should be fixed with React 18.3
What's the issue?
@@ZeroRegretz basically some chrome extensions break react hydration
react 18.3 canary fixed hydration errors from extensions modifying the html head for me.
Thanks all of you guys 👍👍👍😊
@varcel