Stop Using Create React App
VloĆŸit
- Äas pĆidĂĄn 2. 11. 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 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
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.
You look like Homelaner from "The Boys"
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
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
Finally you switched to Vite đ
I was about to change to vite this week. But once you look for typescript and jest compatibility everything falls apart
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.
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.
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?
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
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 :)
Vite supports many of the Roll-up plugins, which is very cool.
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.
Will try this out
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
I have just migrated all react projects to vite and development experience is just incredible â€ïžđ
vite is great but when last time I checked it a few months ago, it did not support module federation.
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?
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
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
This channel should be the top of 10
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 >.>
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
Can you make the full vite setup video for beginners like me?)
"Create React App at this point is legacy software and should be treated as such." - Theo Browne
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
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
YOU ARE AMAZING!
Bro It helped me lotâ€
How about Jest? Does Vite support Jest?
the downside is you need to install A LOT of library to accomodate unit testing, not to mention Babel setup and jest config
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.
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*
Yo! Man that's shortcut cool.
Would have been nice if you explained why is it faster.
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
Used this for the first time recently and holy shit. Itâs lightning fast
Used Vite with Laravel 9 which replaced Mix in Laravel 9 Vite is fantastic
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.
I love I found out about vite very early into making a react application
Can I migrate from create-react-app to vite?
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
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.
But this VITE will display a blank screen when our code has errors instead of showing where the exact error is
How do people feel about vite vs next.js? I know they're a bit different.
Totally agree!!
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.
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?
How to you open and run project via vite which was created by creat-react-app??? Need help đ„ș
Thanks, man!
Best react setup so far
Vite does not stop running on any typescript error like create react app
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?
Commenting on this video so the CZcams shorts algorithm learns to stop showing my Andrew Tate videos
Bump
why not both ;)
haha
I agree, I want more of these
đ
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
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!
So can we implement the speedy web compiler (SWC) to Create React App? ...đ
how do i change the default tcp port of my vite application?
Vite makes development faster (starting server and compilling when making changes)
There is Snowpack , the faster frontend build tool. Can you make a video with this tool, Kyle?
Snowpack is no longer maintained.
Can I do the same with parcel? I've had bad experience with vite
As a beginner programmer... I understood nothing đ
đ take slow steps...
I hope now you are 1 year experienced developer now.
I used vite for a few Laravel project I honestly didn't even know u can do it
Thanks for this.
can someone tell me how to make shorts where I can show my browser and code in the same time I find it really very difficult
How long before Vite gets outdated?
Vite 2 just came out ;)
Just got up to the ready chapter In codecademy nice
React *
Thnx man thats really fast
Thanks for sharing
I'll try it today
Or you can just use whatever bundler you want and add react to it.
how to deploy react-ssr . can please make a video for that.or you can suggest me where i can try to deploy.
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.
@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.
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
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
Can we use vite for NextJS?
No and no need
Which keyboard do you use?
Parcel is a beastđ
What about bit reload issue?
can I migrate react app which already in CRA to vite way?
Thanks bro
And what minuses to use vite instead of cra?
I came across a vite-typescript bug, it was reported in github, was not solved.
Me who uses Expo Init: **Hmmm intensifies**
Could you make a video on using .env files in Vite. I had issue with using vite as it does not allow "process.env.API_KEY"
How to run diffrenet projects in one app?
This is not what computer programmers are supposed to look like...
If you want fast why using npm instead of yarn?
Thank you!!!
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
What's the speed versus NextJS?