Hello Vite + React!

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.

Comments

[Richard]

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

[Travis Ealy]

@richard . Have you used Vite with nextjs yet?

[Richard]

If you were meant to tag me then no I haven't used Vite with Next. I usually just use npx create-next-app I don't think vite has a NextJS template you could probably add it manually though.

[Travis Ealy]

Yea was just curious. Thanks for your reply. Appreciate it!

[Sattwik Sahu]

Yes yes amen. Ditch CRA hail ViteJS

[richi.codes]

Thanks to you for the support and comment the article! It's true that is fantastic and so fast!

[Sattwik Sahu]

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 parcel and 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! 🚀

[richi.codes]

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.

[Sattwik Sahu]

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

[Donny Brower]

Has anyone had issues with hot module reloading? I followed the guide, but HMR works kicks in maybe once every dozen tries.

[Donny Brower]

Never mind! A reboot did the trick. Interestingly, the HMR for Parcel Bundler wasn't working either.

[webgunti05]

Unable to create the app, below is the screenshot, could someone help me?

[richi.codes]

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.

[Blessing Hirwa]

This is what I was looking for.
Thanks a bunch!

[Marko Vujanic]

You guys realize this is not the same thing as CRA?. Sadly configuration hell back, eslint, prettier etc, etc needs to be done manually.

[Peter Witham]

Literally just discovered this and now going to try it out. Thank you so much for sharing.