Converting to Vite from Create React App - lower your boot time to almost nothing!

Written tutorials I used:

[sunilshah]

This guy is a gem, not every one shows the process of debugging and googling, but showing the process is truly splendid.

[makinopvp]

thank you very much homelander, you saved my project

[CadisDiEtrama]

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 👍

[chizidotdev]

Just needed to see what I’d have to go through before I propose this to the team… Lot of work😅

[da]

Oddly enough i actually enjoyed watching the debugging 😄

[Luka-qmri]

You look like the Homelander from The Boys from this angle at 1:00 hahah

[hamdiaminehkh]

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.

[josecastaneda]

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.

[mohitspg]

I have done migrations but hot reload "HMR" is not working, any fixes for that issue?

[thebuddy.]

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

[kennedydre]

Have they resolved the issues with vite not showing the error messages

[luisbrazilva]

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.

[martinWein]

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.