Vite VS Create react app: All you need to know

Introduction.

It is no longer news that React is one of the most used JaveScript Frameworks, preferred by most developers over alternatives like Vue, Angular etc. But, do you know spinning up your React applications can sometimes be a hassle?

Over the years, developers have found the waiting time required to initialize a new React environment using the create-react-app tool to be a bottleneck, especially developers in places where the internet connection is poor. There is a common joke among developers: "The longer the loading time, the more Twitter feeds you get to read", hahaha get It?

Well, you don't always want to check your feeds while waiting for your development environment to spin up. In this article, you'll learn a new and faster way to spin up your React apps: create-Vite

What Is Vite?

Vite is a modern development tool that is used to build a fast and well-optimized web application, created by Evans You- the creator of Vue.js. It has gone ahead to be one of the most popular tools for modern development. Due to its superfast Hot Module Reload(HMR), it can add and remove modules while the application is running eliminating the constant need for reloads during development.

Unique Features of Vite.

Lazy Loading of Modules: This simply means that In Vite a code(module) is loaded only when it is required. This generally leads to smaller bundle sizes and even faster loading times for your users, as the noncritical codes in your program will only be loaded when required.
Built-in development Server: Vite ships with a fast and efficient development server that not only allows you to build and test your application in real-time but also allows automatic reload of your code so you do not have to manually reload your development server to see the changes you have made.
Instant Server Start: Vite eliminates the need for bundling, by serving your modules instantly.
Support For CSS modules: Vite Ships with built-in support for CSS modules, therefore, eliminating the need for extra dependencies downloaded by you.
Support for modern tools: Vite provides an out-of-the-box support for modern development tools such as JSX, TypeScript, Dynamic Imports, Svelte etc.
Server Side Rendering(SSR).

How to SetUp Your React Projects with Vite.

Run npm create vite@latest in your terminal
```
  npm create vite@latest
```
After running the above code, vite will prompt you to enter a project name- In this example, you'll enter "test-app"
```
  output:

  npm create vite@latest
  project name: test-app
```

Vite will then prompt you to select your preferred framework-In this example, you'll select React.

  Output

  ? Select a framework: » - Use arrow-keys. Return to submit.
  Vanilla
  Vue
  > React
  Preact
  Lit
  Svelte
  Others

Next, Vite will prompt you to select your preferred development language-In this example you will select JavaScript.

  Output

  ? Select a variant: » - Use arrow-keys. Return to submit.
  > JavaScript
  TypeScript
  JavaScript + SWC
  TypeScript + SWC

Done! You'll see a prompt informing you that your project has been scaffolded, with an instruction on how to install your project dependencies using npm

  Output
  Done:
  Scaffolding project in User\Projects\test-app...

  Done. Now run:

  cd test-app
  npm install
  npm run dev

  Done in 120.89s

Now go to the new project folder
```
  cd test-app
```
Install dependencies by running npm install
```
  npm install
```
Start development server by running npm run dev
```
  npm run dev
```

Voila! You're all done now, you will get a prompt showing where your development server is being served

  VITE v4.0.4 ready in 247 ms

  ➜ Local: http://localhost:5173/
  ➜ Network: use --host to expose
  ➜ press h to show help

Visit localhost:5173 (from the code snippet above, yours could be different) in your browser to see your development page.
You can run all of these commands in your computer's default CLI or you can use the terminal provided by your code editor.

Comparing Vite with create-react-app(CRA).

The Table below summarizes the basic differences between Vite 4.0 and CRA

PROPERTY	VITE	CRA
SPEED	Fast development setup	Slow development setup
Hot Module Reload	Yes	No
Bundler	ESbuild	Webpack
Out-of-the-box Support for TypeScript	Yes	No
Server Side Rendering(SSR)	Yes	No
Dynamic Imports	Yes	No

Conclusion

In this article, you have learned the unique features of Vite and how it can help optimize your development process. Personally, ever since I started using Vite to spin up my development environment, it has been great! You no longer have to quit and restart your development server before seeing the changes you have made, the out-of-the-box support for TypeScript and the Increased development Speed are very impressive features. Once you go to Vite, with its incredible features and active community, you will never want to leave!

That's all for now folks, Let me know what you think about this article in the comment section below; Until next time: code-eat-sleep-repeat!

Moyosore’s blog