Vite VS Create-React-App - What you need to know

Over the years, Create-React-App(CRA) has been a go-to tool for building React applications.
Create-React-App is a popular command line tool that help developers quickly set up and build single-page React applications, especially for applications that don't require advanced customization. It solved the challenges of needing to set up React from scratch or writing React manually.

However, Create-React-App(CRA) still relies on slow and traditional technologies, making it more suitable for building smaller projects.
Building large modern real-world applications requires fast and modern technologies that improve the entire front-end development experience. This is where Vite comes in.

Vite is a modern build tool that contains templates of frameworks, including React, for setting up projects. It offers a faster development and deployment process.

Vite is a tool that addresses the major setbacks of the Create-React-App(CRA). It has gained popularity among developers and is now a recommended tool for building modern real-world applications.
 
A study showed that build time is 4 times, development time is 15 times, and hot reloading time is 10 times faster for the React application built with Vite than the application built with CRA (Gurung, Bhabishya, 2024).

You might be wondering—why is it recommended for modern real-world applications? What features makes it different from CRA?
 
This article has answers to these questions. While various tools for setting up React exist, this article aims to explore the built-in features of Vite that makes it a preferred choice, the differences between CRA and Vite, and the steps for setting up Vite using Node Package Manager (NPM).

Whether you're just starting with React, you want to switch to Vite or have an insight on what this tool is all about. This article is for you.

Built-in features of Vite

The features of Vite majorly focus on speed, configuration and flexibility.

Here are some of the key built-in features in Vite:
 

1. Fast Hot Module Replacement (HMR):
   HMR is a development feature that allows update to module—which means small pieces of code, each managing a specific functionality in an application—to be introduced into a running application without a full reload of the browser.Vite has a fast Hot Module Replacement (HMR), enabling changes to appear on the browser instantly, thus speeding up development.
   For instance, if you update the code in a module, Vite only reloads that modified module, not all the modules.
   Create-React-App (CRA), on the other hand, relies on bundler that packages files together. All modules need to be compiled and bundled using the Webpack bundler before changes are seen in the browser, often leading to slower updates when working on large projects.

2. Use of native ES Modules:
   Native ES modules are a standardized way to organize JavaScript code, introduced in ES6. They allow developers to structure code into separate modules that can be imported and exported, supporting reusability.
   Vite uses native ES Modules, serving the modules directly to the browser without any initial bundling. Browsers can load modules independently as changes are made, thus speeding up development process.
    
   Create React App (CRA) does support native ES modules but it relies on Webpack to bundle and serve these modules during development, instead of serving them directly in their native form as Vite does.
    

3. RollUp as it's Bundler:
   RollUp is a bundler known for its exceptional function in producing a smaller and highly optimized bundler. RollUp also has tree-shaking features—a technique used in module bundlers to remove unused code, reducing the final bundle size. Vite relies on RollUp for its production builds as it create smaller bundles.
   CRA uses the Webpack as its bundler, which also supports tree-shaking but can create larger bundles and may not be as efficient as RollUp.
    

4. Support Multiple Frameworks:
   Vite supports multiple frameworks such as Svelte, Vue, Preact, etc, which makes it a multipurpose tool.
   CRA is React-specific.
    

5. Built-in EsBuild tool:
   Esbuild is an ultra-fast JavaScript bundler that hastens the building process in modern web development.
   Vite uses the EsBuild tool for its development server and HMR and relies on RollUp for its production build.
    CRA, by contrast, does not. Instead, it relies entirely on Webpack for bundling and development process.

6. Supports JavaScript and Typescript:
   Vite has built-in support for modern JavaScript (JS), Typescript (TS), and additional features like CSS, JSX, and more plugins without requiring additional configuration.
   CRA may require additional configuration to completely support some features.
    

7. PlugIn API: 
   One of the features that makes vite exceptional is the plugin API. Developers can customize Vite's functionality using the plugin API. 
   Additionally, the plugin API is compatible with the RollUp PlugIn. 
   There isn't a plugin API included with Create-React-App (CRA). The CRA offers a zero-configuration setup; although it permits some customization using environment variables, plugins are not supported natively.

Key Differences

Step-by-step guide using NPM

1.Open the terminal.

npm create vite@latest

2.Input the project name

project-name

1. It would display a list of frameworks. Select your preferred framework. In this case, its React

> React

4.Select JavaScript only from the list of languages provided if you'll be using JavaScript

> Javascript

5.Install the npm

npm install

6.Run the code on the server

npm run dev

`
Yay! You're good to go.

Tip

Vite's index.html file is located in the root directory, unlike in CRA, where the file is in the public folder. Avoid moving it, as this can disrupt the project's setup.

Final Thoughts

In conclusion, Vite is a tool well-suited for either small or large real-world applications, while CRA could be considered when building smaller applications. If you haven't tried Vite yet, ensure you give it a shot.
This article has covered the modern built-in features of Vite, its differences from CRA, and the steps for setting up Vite.
I hope you found this article useful. Feel free to drop your suggestions in the comment box.

Further Reading

Why Vite

Vite- Server Side Rendering(SSR)
Study Site
ES Modules
Study Citation
Check out stack overflow for common errors that can arise when using Vite.

Glossary

• Modules: small pieces of code, each managing a specific functionality in an application

• Hot Module Replacement(HMR): HMR is a development feature that allows update to module to be introduced into a running application without a full reload of the browser.

• Native ES Modules: are a standardized way to organize JavaScript code, introduced in ES6. They use import and export statements to manage dependencies, allowing for better code organization and tree shaking.

• Tree Shaking: is an optimization technique used in module bundlers to eliminate unused code, reducing the final bundle size and improving performance.