Are you still using ‘create-react-app’? Introduction to Vite

React being an open-source JavaScript library built by the tech giant Facebook is one of the most popular choices when it comes to robust and scalable frontend development. It’s growing every day and its relevancy is not going down anytime soon, and the reasons are pretty simple it has a Strong Ecosystem, a huge active community, and yes you can get jobs more quickly as a React developer than any other framework.

When we talk about React app development, create-react-app is a prime choice to do so. If you have any interaction with React development even a tiny bit, you would be aware of what ‘create-react-app’ do. It’s an easy but solid way of creating react boilerplate application. It is popular, I mean extremely popular, every new developer or experienced one leverages this tool to make their life easy.

It provides features like a local development server, production bundling, hot module replacement, and others.

But the question is, is it worth using create-react-app in 2022?

It’s almost the end of 2022 and developers are opting for the faster ecosystem, and it should be that way, who wants to spend time waiting for operations that are not related to the development directly

And one thing that I always observed when working with create-react-app is that it is SLOW. It creates an initial project which is almost 150MB in size and takes around 3 minutes for the setup, and when the project increases in size, its performance deteriorates significantly. It uses webpack behind the scenes, which is a good tool but when javascript code increases in size, bundling, compilation and even the hot module replacement become slow.

So, What’s the solution? and what is Vite? 😕

This is where Vite comes into the picture, it is a tool that lets you do everything that create-react-app can but faster, blazingly faster.

Vite was created by Evan You (who created Vue.js) to speed up and simplify the build process. It creates the initial boilerplate for frontend apps very fast (within a minute or so) with less size (like 40mbs). It uses ES Modules(native to javascript) which lets it handle only the code that is required at the time, instead of using bundlers like webpack it leverages esbuild which is written with GO language and is extremely fast( it can create a production bundle in like less than around 100 times what other bundlers will take ).

And one amazing thing is that Vite is not limited to react. It supports template presets for –

Want to know more about why Vite is better, check here https://vitejs.dev/guide/why.html

So let’s see how we can create a react app with vite –

Navigate to the folder where you want to create your react app and open the terminal, then run this command

$ npm create vite@latest

It will ask for a project name, framework, and variant

Now all you have to do is to traverse to your app folder and install the required packages

$ cd vite-react-app
$ npm install

Once all packages are installed, you can start the development server

$ npm run dev

and that’s all, now you can start the real development.

The folder structure will look something like this –

To learn more about vite, check out here – https://vitejs.dev/

Happy Coding 😉