So you migrated an entire app to save 13 seconds what about all the time you wasted migrating the actual app? As for me, I will be using CRA for a very long time as I despise vite for so many reasons I can’t even count. Watchers be warned. It is not a simple question.
This video really shows realistically how this process may look like. I just did a migration of CRA with typescript and it was not without some headaches. But worst of all was migrating jest tests to Vitest. I have 500+ tests in my solution. That took a couple of days of googling, rewriting and cursing. You can count on that you’ll need to rewrite some, as mocks behaves differently in vitest compared to jest, for example. Another one is different names on requireActual and jest.fn now being vi.fn etc. While it is faster with Vite and Vitest, you’ll notice that it is still not as mature as CRA, there is just less information to google about compared to CRA and Vite has its issues as well. I guess that it will get there eventually.
For anyone facing this problem, I found most success just initializing a new Vite app, then just copy-pasting all the old files inside... Then you just need to adapt some of the config, App.tsx file, and you are basically done 👍
@@IanLenehan I was trying to get storybook to run on it and its a right pain in the ass - would not recommend and gave up in the end. I'm sure I will stubbornly continue to try and fail over the next few weeks for the challenge...
I went through the same process and the same steps; for 2 hours or more, I found myself changing imports, altering extensions, adjusting configurations, and so on without success. Eventually, I was compelled to cancel everything and revert to the React script. However, after watching this video, I feel encouraged to give the migration to Vite another try.
how to config tailwind and antd on vite? i followed ure steps, it's work but my css not working. vite showing @import must precede all other statements error.. how to fix these css errors..
@@IanLenehan vite doesn’t show error messages on the browser like create-react-app. When you encounter an error, all you get is a blank screen and the guessing game begins
I get it. It's fast but why is everyone ignoring the huge security risk of exposing your API connections and key because it serves the JSX files in the network activity tab without masking them or encoding them.
@@IanLenehan I retract my comment. I did a quick deploy to Netlify to make sure and it wasn't exposing the API. I made a mistake in my migration and forced the PROD: true in the import.meta.env Object.
So you migrated your entire app to save 13 seconds what about all the time it took to migrate the actual app???? as for me I will be sticking with react app for a very long time as I despise vite for too many reasons to count. watchers be warned. It is not a simple question when you realize you are no longer allowed to use a JS file and you are not being warned about unused hooks and you are damned.
This guy is a gem, not every one shows the process of debugging and googling, but showing the process is truly splendid.
thank you very much homelander, you saved my project
ahahah, thought the same
🤣🤣🤣🤣🤣
😂
Hahaha I hope I don't come across as a psychopath like him!
So you migrated an entire app to save 13 seconds what about all the time you wasted migrating the actual app? As for me, I will be using CRA for a very long time as I despise vite for so many reasons I can’t even count. Watchers be warned. It is not a simple question.
This video really shows realistically how this process may look like. I just did a migration of CRA with typescript and it was not without some headaches.
But worst of all was migrating jest tests to Vitest. I have 500+ tests in my solution.
That took a couple of days of googling, rewriting and cursing.
You can count on that you’ll need to rewrite some, as mocks behaves differently in vitest compared to jest, for example. Another one is different names on requireActual and jest.fn now being vi.fn etc.
While it is faster with Vite and Vitest, you’ll notice that it is still not as mature as CRA, there is just less information to google about compared to CRA and Vite has its issues as well. I guess that it will get there eventually.
For anyone facing this problem, I found most success just initializing a new Vite app, then just copy-pasting all the old files inside... Then you just need to adapt some of the config, App.tsx file, and you are basically done 👍
that’ll cause you to lose version history
You look like the Homelander from The Boys from this angle at 1:00 hahah
Just needed to see what I’d have to go through before I propose this to the team… Lot of work😅
Haha yeah. I looked at doing this at work and with a much more complex app. Too hard!
@@IanLenehan I was trying to get storybook to run on it and its a right pain in the ass - would not recommend and gave up in the end. I'm sure I will stubbornly continue to try and fail over the next few weeks for the challenge...
I went through the same process and the same steps; for 2 hours or more, I found myself changing imports, altering extensions, adjusting configurations, and so on without success. Eventually, I was compelled to cancel everything and revert to the React script. However, after watching this video, I feel encouraged to give the migration to Vite another try.
how did it go?
Oddly enough i actually enjoyed watching the debugging 😄
Haha I understand the satisfaction
Keep up the good work 🔥
Thanks, will do!
Thanks 😍
I have done migrations but hot reload "HMR" is not working, any fixes for that issue?
Hey, did you fix the CSS issue?
Loved it 😅
Thank you!
First link is not working anymore
Thanks it helped
I have a friend called Kartik Gupta, don't suppose that's you??
how to config tailwind and antd on vite? i followed ure steps, it's work but my css not working. vite showing @import must precede all other statements error.. how to fix these css errors..
Sorry it's a bit hard to debug this way but hopefully you can google the error message or find help on stack overflow or something like that!
Have they resolved the issues with vite not showing the error messages
I didn't know about this. Which error messages?
@@IanLenehan vite doesn’t show error messages on the browser like create-react-app. When you encounter an error, all you get is a blank screen and the guessing game begins
@@kennedydre8074 usually they show you the error on your browser console.
you need to configure eslint for vite to show those errors.
I get it. It's fast but why is everyone ignoring the huge security risk of exposing your API connections and key because it serves the JSX files in the network activity tab without masking them or encoding them.
Hey Luis - interesting, do you have a link to somewhere that explains this? I am not aware of a risk with it
@@IanLenehan By the way, I do love your work.
@@IanLenehan I retract my comment. I did a quick deploy to Netlify to make sure and it wasn't exposing the API. I made a mistake in my migration and forced the PROD: true in the import.meta.env Object.
So you migrated your entire app to save 13 seconds what about all the time it took to migrate the actual app???? as for me I will be sticking with react app for a very long time as I despise vite for too many reasons to count. watchers be warned. It is not a simple question when you realize you are no longer allowed to use a JS file and you are not being warned about unused hooks and you are damned.
.
Thanks ❤