Dumped on Valentine’s Day: CRA Is Gone—Time to Try Vite?

On February 14, 2025, I woke up exhausted from overworking the night before. As the day went on, I daydreamed about chocolates and ‘universe when’-ed at pictures of happy couples, with zero clue that the React team had just announced the deprecation of Create React App. It wasn't until Monday of the following week, during standup, that a colleague had pointed it out and suggested that we might have to migrate the entire application soon. According to the announcement, CRA had been falling behind and the React team was simply giving it a well-earned retirement. This article talks about the deprecation of CRA and explores Vite, a modern alternative.

What is CRA?

Create React App (CRA) is a command-line interface tool that allows developers to set up a React project easily. It primarily serves as a project scaffolding tool, allowing you to create a new project with a single command: npx create-react-app <project-name>. CRA comes with tools like Webpack and Babel, which handle the bundling and transpiling of code. The tools are pre-configured. It comes with a development server that allows hot reloading, enabling you to see changes to your code reflected instantly.

Benefits of CRA

• With CRA, developers can quickly get started with building and not have to worry about spending time on complex configurations.

• It is ideal for beginners as it removes the complexity of setting up a React project.

• It provides a consistent project structure, making it easy for developers to collaborate.

• The hot reloading feature makes project development faster and more efficient.

• CRA makes integrating libraries like Redux and React Router easy without requiring complex Webpack and Babel configurations.

Why is CRA being deprecated?

CRA is being deprecated mainly because it lacks built-in solutions for essential features like routing (handling navigation between pages), data fetching (retrieving and managing external data), and code splitting (loading only the necessary code to improve performance). Another major reason is the lack of active maintainers. Without regular updates and bug fixes, it became difficult to keep up with modern development needs. This is why contributing to open source is very important.

A lot of tools and frameworks rely on community support to stay updated and functional. When developers and companies use open source projects without giving back—whether by writing code, improving documentation, or providing support—those projects can become outdated or even shut down. Contributing helps keep them running and makes sure the tools you rely on stay useful and up to date. If you're interested in getting started with open source, check out this guide on contributing and explore communities like CHAOSS, and OpenSauced to find projects that match your interests. If you are a fan of listening to podcasts then definitely check out The Open Source Education podcast.

The React team recommends migrating to modern frameworks like Next.js or using build tools like Vite or Parcel. Frameworks provide a structured approach with built-in features, while build tools offer more flexibility and control over your application’s setup. If you prefer a more customized project structure, build tools might be the better choice.

Vite: The Modern Alternative

Vite is a modern frontend build tool used to develop fast and super efficient web applications. It serves files instantly and ensures that changes are updated immediately after they are implemented. It makes use of Rollup for optimized builds and has support for when you want to build a Javascript library (instead of a full app).

Features of Vite

Some of the features that make vite awesome include:

• Lightning-fast HMR: HMR stands for Hot Module Replacement. HMR makes sure that changes are updated without reloading the entire page. For example, when you change the colour of a button or the label of a form. The colour of the button or the label text is updated instantly without refreshing the whole page.

• Instant Server Start: Vite makes use of native ESM (ECMAScript Modules) to serve unbundled files on demand. This eliminates bundling on starting the server, thus allowing the server to start instantly.

• Optimized build: Vite ensures your app is fast and optimized for production by using Rollup, a powerful bundler that efficiently processes your code. It supports multi-page applications, allowing different sections to load separately for better performance, and includes library mode (building javascript libraries instead of a full application), making it easy to build reusable components. With pre-configured settings, Vite eliminates the need for manual setup, providing a solid foundation for scalable and high-performance web apps.

• Native TypeScript & JSX Support: Vite supports TypeScript, JSX, Vue, and other modern frameworks right out of the box.

Advantages of Vite over CRA

• It makes use of ESM, unlike CRA’s Webpack which bundles files when the server is started. This makes CRA’s server startup slower and takes a longer time.

• When changes are made in a vite application, the page does not refresh and state is not lost. It only updates the module or component that the developer intended to change without losing state.

• The HMR in Vite remains fast no matter the size of the project unlike that of CRA.

• Vite natively supports TypeScript, JSX, CSS preprocessors (Sass, Less, etc.), and dynamic imports.

• Vite allows building multi-page applications (MPAs) and JavaScript libraries easily, while CRA is mainly optimized for single-page applications (SPAs).

• Lastly and most importantly, Vite is faster than CRA.

Setting up your first Vite project

To setup a Vite project, you first need to install it by running these commands:

npm create vite@latest
Or 
yarn create vite

After running the above command, you will be shown the following prompts listed below. Select the options that best suit the project.

• Select a framework (React, Vue, Angular, Vanilla e.t.c).

• Select a variant (JavaScript, TypeScript e.t.c).

• Then run npm install or yarn install to install dependencies.

• After installing the dependencies, run yarn dev or npm dev to start the server.

To learn more about scaffolding a vite project, check out the vite documentation.

Limitations of Vite.

While Vite offers a faster and more efficient process, it still has its limitations.

• An example is browser compatibility. Vite makes use of native ESM which makes for instant server start, but the use of native ESM makes it incompatible with older browsers that do not have ESM support.

• Another drawback of Vite is the small plugin ecosystem. This might limit the availability of specific tools and integration. Vite is very fast when developing an app, but when building the final version for production, it uses Rollup, which can slow things down for very large applications.

• Lastly, as projects grow, Vite and other build tools like it consume more CPU and take longer to build, especially during production, due to the extensive optimizations performed by Rollup.

Final thoughts

The deprecation of Create-React-App marks a shift towards more modern and efficient development tools. While CRA provided an easy way to set up React projects, its limitations made it less suitable for modern web development. As developers, it is also important to know when to use frameworks and build tools. Frameworks like Next.js offer a structured approach with built-in features for handling server-side rendering (SSR) and static site generation (SSG), and build tools like Vite give developers more flexibility and control over their project setup. Choosing between the two depends on the specific needs of your project.

For developers transitioning from CRA, Vite is a solid alternative and it ensures better speed and flexibility. Whether it is a simple React project or a complex web application, adopting modern build tools like Vite can significantly improve your workflow and development experience. To learn more about the deprecation announcement by the React team, visit here.