Vite is the better Create React App alternative

The landscape of frontend development is always shifting, and React is no exception to this trend. Recent updates to the React documentation show a significant shift away from Create React App (CRA) as the go-to method for bootstrapping new React applications. The change has led developers toward frameworks like Next.js and Remix, but what if you're looking for something a bit leaner—a library, perhaps? Enter Vite, a next-generation frontend tooling library that could just be the answer to many of your development concerns.

Click the image below to watch the YouTube video version of this blog post:

What's wrong with Create React App?

While Create React App (CRA) has been a popular choice for bootstrapping React applications, it's important to note that it's not inherently "wrong" or "bad." Rather, there are limitations and scenarios where other tools may be a better fit. Below are some common critiques developers have about Create React App:

• Lack of maintainability: Create React App is a large project with a lot of moving parts. As such, it can be difficult to maintain and update. This is especially true when you consider that Create React App isn't maintained by the React core team or any other official organization.

• Limited to Webpack: CRA is tightly coupled with webpack. While webpack is powerful, it can be complex to configure, and it's not the only module bundler out there. Alternatives like Vite use the native ES modules feature in modern browsers for faster development and smaller builds, without relying on webpack.

• Bad tree shaking: Although webpack supports tree shaking, CRA does not make it as straightforward as some developers would like. In other tools like Vite or Rollup, tree shaking is often more efficient, which helps in reducing the final bundle size.

And much more can be said about why React developers started to dislike using Create React App.

Why Vite Over Create React App?

While Create React App has been an industry standard for bootstrapping React applications, it's not without its limitations—namely, its lack of build optimizations for production-grade applications. On the other hand, Vite offers various features and optimizations aimed at improving both your build size and development speed. Here are some of the key benefits of using Vite over Create React App:

• Faster development: Vite offers a lightning-fast development server that leverages native ES modules in modern browsers. This means that your code is compiled on the fly, which results in faster development times.

• Proper maintenance: Vite is maintained by the Vue core team, which means that it's more likely to receive updates and bug fixes than Create React App.

• Smaller bundle size: Vite uses Rollup under the hood, which is a module bundler that's known for its tree-shaking capabilities. This means that Vite can produce smaller bundles than Create React App.

As you can see from the list above it's an excellent choice for those who have found Create React App's capabilities limiting.

Setting Up a New Project with Vite

Starting a new project with Vite is as easy as running a single command:

npx create-vite

Upon running this command, you'll be prompted to answer a few questions, including the name for your new project. For this example, let's go with "vite-project". One of Vite's standout features is its compatibility with a range of JavaScript flavors and frameworks—not just React, but also Preact, Lit, Svelte, and even vanilla JavaScript.

After setup, your project directory will look quite familiar if you've ever used Create React App before. You'll see directories like public and src containing your static assets and React components, respectively. Additionally, you'll find crucial configuration files like package.json and vite.config.js. If you're into TypeScript, it's good to know that a tsconfig.json will also be present.

To install all dependencies, execute:

npm install

Open your project in your IDE of choice — let's use Visual Studio Code for this example. Vite's primary configuration can be found in vite.config.ts. Unlike Create React App, which relies heavily on webpack, Vite allows you to place all your plugins and configurations within this single file.

To fire up your local development server, run:

npm run dev

Doing this will launch your Vite application, which you can then view in your browser. The development server offers hot-reloading and other features that make development a breeze.

Building Your React App

Once the development server is running, building out your React application using Vite is fundamentally the same as it would be with Create React App. You're free to create new components, apply styles using CSS, or even employ other styling libraries like Tailwind CSS. Additional configurations for certain libraries can be made in the vite.config.ts file, but Vite is generally designed to be compatible with most existing libraries.

If you've been following the latest advice from the React core team, you might find Vite to be a recommended alternative to Create React App for future projects. It's a promising choice for those looking to stay ahead of the curve in the rapidly evolving frontend development landscape.

Conclusion

Vite is positioning itself as the modern solution for building efficient and fast React applications. With features designed to optimize both build size and development speed, it stands as a compelling alternative to Create React App. So why not give Vite a try? It could be the game-changer you've been waiting for in your React development.

If you found this article useful, let me know on Twitter at @gethackteam. Please share it around the web or subscribe to my YouTube channel for more exciting content on web technologies.