First of all introduce what is Vite ?
Vite is a Next Generation Frontend Tooling created by Evan You, the creator of the open source JavaScript framework Vue.js.
Why React?
So if it's from Vue.js you might wonder... how come I use it to create a React project if it represents that it would be the direct competition? Well, because Vite is an authoring tool, totally agnostic and the tool itself guides us to create a React application as we will see below.
And I can already tell you that the result is impressive, the speed with which it is created and the speed with which you can start working on your project.
How to get started?
yarn create @vitejs/app
Put the name of the project.
In my case richi.codes
Choose the template:
Scaffolding project in /richi.codes....
? Select a template: ...
vanilla
vue
vue-ts
āÆ react
react-ts
preact
preact-ts
lit-element
lit-element-ts
I choose React.
And that's it!
We already have our project created now we just need to install and run it.
cd richi.codes
yarn
yarn dev
āØ Done in 130.42s.
Ready really fast
Conclusion
I have to say that compared to create-react-app, Vite is really faster and the result is amazing. It also seems that the project size is smaller than create-react-app, so if you are going to create a new project, Vite is really an option to consider.
Top comments (16)
This is fantastic!!! Thank you so much for sharing! I used create react app or NextJs for everything. I was under the impression that vite was only for Vue but wow I tried it after reading your post and ITS SO FAST!! It's my time to ditch CRA. Thank you!!
@richard . Have you used Vite with nextjs yet?
If you were meant to tag me then no I haven't used Vite with Next. I usually just use
npx create-next-appI don't think vite has a NextJS template you could probably add it manually though.Yea was just curious. Thanks for your reply. Appreciate it!
Yes yes amen. Ditch CRA hail ViteJS
Thanks to you for the support and comment the article! It's true that is fantastic and so fast!
When I started out with React, I used
create-react-app. It was way too bloated and took a grand chunk of my time to set up.Then I got to know about
parceland I set up React projects from scratch. But this one looks like it sets up real quick and no preconfig required. Certainly giving it a try today! šDid you try it!? Works for you? It's real quick and easy but I guess if you need some specific config you should learn how to do it but it seems easier and for sure is faster.
Idk... It worked for me right out of the box! I didn't do any extra config for it but then THAT IS AWWWEEESOOOMEE!!! š„ š„ š„
ViteJS is ā¤ļøā¤ļøā¤ļø I'll definitely use this for all projects now and recommend it to everyone.
Thank you so much for introducing this lifesaver to poor little Devs like me ššš
God bless ya, gold-hearted one
Has anyone had issues with hot module reloading? I followed the guide, but HMR works kicks in maybe once every dozen tries.
Never mind! A reboot did the trick. Interestingly, the HMR for Parcel Bundler wasn't working either.
Unable to create the app, below is the screenshot, could someone help me?
I can't see the screenshot but if you follow the example step by step it should work. Try to send the screenshot again and I will try to help you.
This is what I was looking for.
Thanks a bunch!
You guys realize this is not the same thing as CRA?. Sadly configuration hell back, eslint, prettier etc, etc needs to be done manually.
Literally just discovered this and now going to try it out. Thank you so much for sharing.