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
You look like Homelaner from "The Boys"
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 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.
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
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
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.
Finally you switched to Vite 😍
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.
Nice. I'm a vue developer and I was looking for it! So cool I can use vite :)
Will try this out
Vite supports many of the Roll-up plugins, which is very cool.
thank you that's great and really helpful .. please do more like that one
I was about to change to vite this week. But once you look for typescript and jest compatibility everything falls apart
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
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 have just migrated all react projects to vite and development experience is just incredible ❤️🙏
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?
This channel should be the top of 10
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
I think making a multipages projects needs a way lot of configs!
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
vite is great until you find out it doesnt respect name spaces and packages dont work because of that
Bro It helped me lot❤
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.
Yo! Man that's shortcut cool.
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?
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
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
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 >.>
"Create React App at this point is legacy software and should be treated as such." - Theo Browne
vite is great but when last time I checked it a few months ago, it did not support module federation.
YOU ARE AMAZING!
Used this for the first time recently and holy shit. It’s lightning fast
Thanks, man!
Me who uses Expo Init: **Hmmm intensifies**
Used Vite with Laravel 9 which replaced Mix in Laravel 9 Vite is fantastic
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
Thnx man thats really fast
Parcel is a beast😂
Best react setup so far
I love I found out about vite very early into making a react application
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*
the downside is you need to install A LOT of library to accomodate unit testing, not to mention Babel setup and jest config
Thanks for this.
Totally agree!!
Can you make the full vite setup video for beginners like me?)
How about Jest? Does Vite support Jest?
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?
I'll try it today
Just got up to the ready chapter In codecademy nice
React *
Thanks for sharing
Ok vanilla ice I’ll give you a super thanks (just wait for it)
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.
Commenting on this video so the UA-cam shorts algorithm learns to stop showing my Andrew Tate videos
Bump
why not both ;)
haha
I agree, I want more of these
😂
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.
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
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!
I used vite for a few Laravel project I honestly didn't even know u can do it
Vite is god's gift to web development lol
Thanks bro
Thank you very much
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.
Good video, also if you have yarn installed, it's even shorter.
yarn create vite
pnpm better
@@hicoop Same command with pnpm too,
pnpm create vite
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.
Thank you!!!
Start using Svelte! ;)
Vite makes development faster (starting server and compilling when making changes)
CRA is reason enuf to move to svelte
There is Snowpack , the faster frontend build tool. Can you make a video with this tool, Kyle?
Snowpack is no longer maintained.
Thank u bro
Thank you
Which keyboard do you use?
I still pronounce Vite the same as you prenounce Kite but with the V instead of K. Its just feels better.
It's "fast" in French, so it's "veet". Evan You, the creator says so himself.
Thank you.
Yeah Vite is very fast and smooth compared to CRA and it has very less dependencies as well which gives it a wide edge.
The proxy usage is annoying tho’, i find CRA to have better one using the package.json so you dont have to do that api/ route.
As a beginner programmer... I understood nothing 😂
🙃 take slow steps...
I hope now you are 1 year experienced developer now.
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?
Would have been nice if you explained why is it faster.
Can I migrate from create-react-app to vite?
This is not what computer programmers are supposed to look like...
it's very easy, thanks
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
@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.
very useful video
Or you can just use whatever bundler you want and add react to it.
Can we use vite for NextJS?
No and no need
If you want fast why using npm instead of yarn?
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
Stop using react) I did and no regret. Faster delivery, less size and got real power of whole HTML5.
Are you using Vue or what
@@thecoolnewsguy JS.
@@alexfrozen how are you doing so? Don't you have problems using ES6 modules (import/export)? Are you using something like webpack or vite?
@@thecoolnewsguy It's long answer. Experiense. Short answer I use brain. And sober thinking. Own thinking. And have no problem at all. JS and HTML5 was developed by very and really smart people. Much-much smarter than all these vue/react/angular and many more creators. All you need is just listen to them. Hear their ideas. Their thinking. As I said, I did and no any regret. All my applications become smaller, faster and best delivery. I regret about time I spent digging in all these webpacks, eslints and many things I already forget as nightmare. They give illusion of help. And give a lot of pain dealing with their run/configs/updates/vulnerabilities. They eat part of brain and give less than HTML5/JS gives. No matter how beautiful framework, it limits technology. About your question about modules, I stopped using NPM modules. Just express. The only useful module for me.
How do people feel about vite vs next.js? I know they're a bit different.
How long before Vite gets outdated?
Vite 2 just came out ;)
Now there is Turbopack which is used by newest Next.js which says it's MUCH faster than vite
I cant wait the stable version
how to deploy react-ssr . can please make a video for that.or you can suggest me where i can try to deploy.
Can I do the same with parcel? I've had bad experience with vite
And what minuses to use vite instead of cra?