Stop Using Create React App
ฝัง
- เผยแพร่เมื่อ 2 พ.ย. 2022
- Sorry about the bad audio quality. My computer changed my mic to use my webcam mic instead of my actual microphone.
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
#Shorts
The fun fact : Creator of vite is EVAN who is also the creator of vuejs
wait what??? really??? thanks for sharing man
Indeed
ok
Just created it overnight cuz he's bored. Look it up!
@@mel-182 Vite is not a bundler. Is an abstraction layer for Rollup. Rollup config it can be over complicated for simple projects.
Once a react developer use vite, they will never do create react app again
yes sir
worth to try
@@user-gw5lu8ze5s Vite는 '반응 앱 만들기'가 아닌 기본적으로 반응 응용 프로그램을 만드는 데 채택 될 가치가 있습니다.
I use nextjs instead of react
I use nextjs tbh
I swear, everytime we newbies learn something, we quickly learn that it's obsolete, our information is incomplete, or there's something wrong with the practice.
learning should be exciting, you're discovering things.
That is true.
When something new comes out - just ignore it if you are already halfway into a project. I did that for react and CRA for years but now I am still working as a React Dev. Only learn it if it will directly make you money. I use CRA for my side hustle. When its finished. I will look at the market and see what the best thing to upgrade it to is - rather than start it AGAIN (AGAIN) in vite.
Right on the money my man
Welcome to modern software development - particularly web development. React will be obsolete in a year or two, and vite will be superseded by something else.
for a second I thought you were going to configure the entire webpack manually
And whats the problem with that? Nothing like have full control of your project
🤭
@@HenriqueAraujo174 I agree as someone who does not value his time.
@@Pilosofia 😂😂😂😂
doing that is easier than u think
I overclocked my PC to run Create React.
it's so trash and takes forever. My project is getting big so it takes sooo long to start up and now i'm switching to vite.
That's some gamer stuff.
Fr it takes forever to create the app or even start the dev server. I am glad that I found vite.
I started learning React a few months ago, and our teacher told us to always try to use a smaller package installer cause natively React has a lot of stuff you won’t necessarily use
You look like Homelaner from "The Boys"
you are the true hero
homelaner lol
Vite seems cool. The problem is its eco system isn't anywhere near as robust as webpack's. And its edge cases (including solutions) aren't as established. That means its far harder to find a library you may need, and if you run into a rare issue or conflict, you're far less likely to come across someone else who encountered it or how they solved it.
Now we also have mono repo which’s way faster
By creator or webpacks
Now we also have Turbopack which is 700× faster than webpack
Nah Vite Ecosystem, maintainer team, and userbase is huge. Name one problem solved by webpack that isn’t solved by Vite in a better, more modern way. I’ll wait.
@@bradyfractal6653I have an honest question? How does the build system of Vite compare to that of CRA once you eject? I basically use CRA as a codegen to get the best practices and then tweak the webpack setup to remove stuff I don’t need. There’s like 1000 lines of webpack setup, much of which is there to address issues that wouldn’t have presented themselves for a while.
react svg, next svg, node versions, refresh problems, react native debugging, build issues, islands@@bradyfractal6653
Finally you switched to Vite 😍
The only problem is that vite doesn’t run with cloud flare pages to host your app live right away 😢… so I’ve been using create React app
I was about to change to vite this week. But once you look for typescript and jest compatibility everything falls apart
This was actually extremely helpful. I'm just getting started with node, and trying to use TypeScript with create-react-app was turning out to be rather tedious and non-trivial. With vite, I got up and running with TypeScript in seconds.
vite is great until you find out it doesnt respect name spaces and packages dont work because of that
Nice. I'm a vue developer and I was looking for it! So cool I can use vite :)
I was working with vite for a while, but when I used it with Material UI I ran into so many problems one of them was (not recognizing the custom theme) I had to switch back for CRA
same here
bro do u still have issues with it in 2023? I still haven't used it @@brightkingsley4771
For some reason Vite puts all the CSS in style tags in the HTML head, instead of separate CSS files. I've had quite a bit of trouble integrating Tailwind with other component libraries when I migrated to Vite from CRA
Will try this out
I switched to Vite a week ago and love it.
It's great for non React too.
Haven't figured out how to host from lan properly though. And I missed the auto load page but thankfully there is a config for that.
Coming back to this video. I figured out both a long time ago and fairly straight forward.
Vite supports many of the Roll-up plugins, which is very cool.
I use Vite for some smaller projects at work but as it currently stands, it doesn’t have the community support of something like Webpack. For example, CRA will fail to compile and throw a warning on your app if ESLint finds an issue or you mess up your TypeScript types. Vite on the other hand will let you compile basically anything so long as it’s valid JS syntax. There is an ESLint plugin for Vite that I use but I find it’s inconsistent at times. Overall, I do love Vite and it’s really only a matter of time before it beats out Webpack in community support.
You can update the Eslint rules, that has nothing to do with create-react-app or vite
@@wij8044 It does because CRA bakes in an ESLint configuration by default whereas Vite does not. With Vite, you need to install a Vite plugin for ESLint and then you need to install additional ESLint rules for React.
That said, since I posted this comment, the plugin has gotten better so my original point on it being “inconsistent” seems to no longer be valid. Been using the plugin in a new project recently and it works great.
@@KasimAhmic is it ok to have no idea what u people are talking about even though i have 3 year experience in react development?
@@aps9369 Yeah, you’re probably fine lol That’s the benefit of create-react-app after all; abstracting away all this nonsense and letting you just write React code.
That said, with CRA seemingly being abandoned soon, it might be a good idea to familiarize yourself with build tooling like Vite, ESLint, SWC, etc. Fair warning though, it’s a rabbit hole full of its own rabbit holes lol Vite does a good job of explaining things and handling the bulk of the work for you, but eventually you’ll come across something that takes a week or two to debug. The joys of web dev…
@@KasimAhmic to consider someone as a expert react developer what are the react skills or knowledge he need to have?
Can we have a full vid?
Theo made a great video about it, just look it up on yt
@@Chris-zt4ol Definitely! He did a great job. I just think going more in-depth and step by step could help with beginners' understanding between both of them and how to use them.
@@thecamarokid4230 that theo dude is always coming up with useless dumbest things ever
@@thecamarokid4230 just go to the documentation
theres nothing more to talk about, theo`s video says it all, and you can also find stuff by yourself
I think making a multipages projects needs a way lot of configs!
thank you that's great and really helpful .. please do more like that one
The question is which to prefer, time to init your project or the stability of your project in a long term basis
Vite is a million times better. Vite has a ton of awesome plugins all you have to do is import and pass to the config. It even has Vitest and UnoCSS. The real question is React Vite vs NextJS.
vite is great but when last time I checked it a few months ago, it did not support module federation.
"Create React App at this point is legacy software and should be treated as such." - Theo Browne
Javascript truly is a nightmarish junkyard of a language held together with duct tape, bubble gum, and tears
Even Scratch is less trashy, I'm not kidding, JavaScript is hell on earth for whoever wants to type code.
JavaScript is the wild west at this point. I like it but also really hate it.
@@PalmDevs ok maybe I went too far, but JS is still caos
Held together by ur mom
@@kirin9991 man at least I have a mom
I have just migrated all react projects to vite and development experience is just incredible ❤️🙏
Fantastic tutorial! How you can develop parts of the application features using this method and integrate it with an existing application that is based on angularjs?
Also, CRA is not being updated anymore, so it's best to use vite as replacenent
Absolutely, switched from CRA to Vite and haven’t looked back
Thanks, man!
This channel should be the top of 10
the downside is you need to install A LOT of library to accomodate unit testing, not to mention Babel setup and jest config
FYI, you cannot create standalone apps with VITE, it only works with CRA. It's something dumb in the end that makes the difference, but I only use VITE for hosted apps and CRA for standalones
Kinda doubt it'll be a better use case than the custom one we have for work but if it's faster to setup for fun messing around projects >.>
Bro It helped me lot❤
About a month ago I transferred react application from CRA 3 to Vite.
Process was smooth and it took only about 1 day to solve all quirks and tune everything up for our team.
As result we gained x2 (or even more) boost in production build and instant startup in development mode.
Also, in this whole process we wrapped all main routes in lazy loaded components which gave us ability to split app into multipart-bundle.
Conclusion - Vite is better than CRA (at least for fast start and almost zero-configuration). CRA is just kinda outdated
Commenting on this video so the TH-cam shorts algorithm learns to stop showing my Andrew Tate videos
"your"?
W
Yo! Man that's shortcut cool.
Used this for the first time recently and holy shit. It’s lightning fast
vite is just amazing 👌
Of course it is, it was created by the creators of Vue and Svelte
@@interclosure
"And Svelte" ???
Its creator was the creator of only Vue not Svelte.
I know I'm 1 year late, but vite uses roll-up which is created by the creator of svelte@@Dev-Siri
Thanks bro
Parcel is a beast😂
But this VITE will display a blank screen when our code has errors instead of showing where the exact error is
Me who uses Expo Init: **Hmmm intensifies**
I love I found out about vite very early into making a react application
Can I migrate from create-react-app to vite?
YOU ARE AMAZING!
Would have been nice if you explained why is it faster.
Thnx man thats really fast
Yes, this is great for a quick application or a really small/personal project. But vite is a different bundler from webpack and it still has a lot of issues, specially with testing (vitest library is yet not recommend for production projects)
Vitest is great
The whole thing for perfectly fit the Vue eco-sys
Creat your app with Vite
Test it with Vitest
This fucking grinding devs are full of shit don't listen to them they don't know what they talk about the points he said here are complete garbage and not true.
I'll try it today
How does this scale with large apps? If we are optimizing an app I'm not sure the build time would be the first thing I look at when we are measuring in milliseconds or seconds.
Used Vite with Laravel 9 which replaced Mix in Laravel 9 Vite is fantastic
Thank you very much
" npm run dev -- --host " allows you to view your application on devices on the same network.
Thanks, I like getting updates on how to get going with vite and other modernization improvements, and getting a sense of how stable or unstable they are.
Thanks for the support!
If I use Vite for my project, the domain will be: 127.0.0.
But If I use firebase authentication, It is not going to work.
I want to change the current domain to localhost.
How about Jest? Does Vite support Jest?
Best react setup so far
Could you do a vid on deploying a React site to Github Pages?
Just do npm i - d gh-pages then hit npm run deploy. Next go to pages and make sure the project is building the gh-pages branch and voila....
* -d no spaces
@@1stblackpm Wow this is a lot easier than I thought it would be. I thought I remember having to customize stuff in the package.json before deployment and adding some scripts. Is this not the case?
@@EdgyVidyaGeneral oh ya. U gotta add one more thing to scripts, I'll share that with you in a bit
@@1stblackpm *3 hrs lateur*
This is not what computer programmers are supposed to look like...
What about for a small business where you want to get up and running fast, like for a hotel/Airbnb type business? Would next.js’ SEO feature be better for the business?
As a beginner programmer... I understood nothing 😂
🙃 take slow steps...
I hope now you are 1 year experienced developer now.
Can you make the full vite setup video for beginners like me?)
Thanks for this.
I did it 5 months ago and it was the best choice in my life. Ok not in my life but still a great choice.
The problem with veet is that there isn't much help in the internet and some libraries like aws-sdk have problems with veet. There aren't much answers, but most'y questions
If you want fast why using npm instead of yarn?
Yeah Vite is very fast and smooth compared to CRA and it has very less dependencies as well which gives it a wide edge.
Thanks for sharing
it's very easy, thanks
How to migrate existing cra app to use vite?
it's pretty easy. I just did it a few days ago. just Google your question and you'll get a good article
Dude why didn't I see this a year ago. The hell
how to deploy react-ssr . can please make a video for that.or you can suggest me where i can try to deploy.
Totally agree!!
CRA is reason enuf to move to svelte
I love using vite but I have a genuine question. ⁉️
When i create a react app using create-react-app then run it, and let's say i forgot to add a dependency in my useEffect, it let's me know in the terminal there's a missing dependency.
But when i use vite for my react app, it doesn't give me any info regarding missing dependency if i have one.
How can i get those messages in the terminal using Vite. Any help is greatly appreciated
Vite makes development faster (starting server and compilling when making changes)
I used vite for a few Laravel project I honestly didn't even know u can do it
@WebDevSimplified Is there a way to deploy vite app without bundling and minification. We would like to see the source code in devtools. Adding build: { minify: true} did not stop bundling and minification when we ran npm run build.
And what minuses to use vite instead of cra?
i stopped using CRA when it tooks almost an hour just to install dependencies. Vite is just better for me
Ok vanilla ice I’ll give you a super thanks (just wait for it)
Just got up to the ready chapter In codecademy nice
React *
very useful video
How to you open and run project via vite which was created by creat-react-app??? Need help 🥺
How do people feel about vite vs next.js? I know they're a bit different.
Which keyboard do you use?
How to run diffrenet projects in one app?
Vite does not stop running on any typescript error like create react app
Or you can just use whatever bundler you want and add react to it.
does anyone know how I can create a Vite react setup that is similar to Create react app? it doesn't include eslint and some other things by default
how do i change the default tcp port of my vite application?
Anyone know how to use Vite with a docker deployment with custom environmental variables? Vite doesn’t use process.env, and the workaround I used to get docker env vars to work with Vite was incredibly messy.
Can I do the same with parcel? I've had bad experience with vite
I deliberately skip any video that is titled “Stop using …”
I have tried vite and i had some problems with relative and absolute paths, would you tell us if you had this problems and how you fixed it ?
I'd love to use vite, but i need to work around this problem first
Are you talking about static files or imports in general?
What the benifit of it rather than faster create app .. because idc, it is not like I create react app every time, also refrech is instant for me in react and my pc is mid
use pnpm instead of npm with lightning speeds you never wanna go back.