Create a React project with Vite

In this Article we’re going to see together how to create a brand new React project with Vite.

Wait, what is Vite?

Vite is an open-source, next-generation build tool and development server for web applications, created by Evan You, the creator of the Vue.js framework. It is designed to provide an extremely fast and optimized development experience by leveraging modern web technologies, such as the native ES modules (ECMAScript modules), which allows developers to import and use modules directly in the browser without the need for bundling during development.

Key features:

• Lightning-fast development server thanks to native ES modules
• Optimized production builds thanks to tree-shaking and code splitting
• Flexible build system supporting React, Svelte, Vue… (not Angular)
• Extensible plugin system
• Hot Module Replacement (HMR)

Create a new React project

The standard has been for years the following:

npm create-react-app

Now, using Vite, we can change this command with:

npm create vite

You’ll be asked for:

• project name: fradev-rocks
• framework to use: React
• variant: Javascript if your getting started with web development, Typescript otherwise

After the 3rd step, our project is now created and what we’ll have to do is:

• cd fradev-rocks where the project has been created
• run npm install to install all the dependencies
• run npm run dev to start the local development web server
• open your browser at the address received in output and you should see

And that’s it! You have now your React code inside the src folder.

Vite vs create-react-app (CRA)

Vite and Create React App (CRA) are both tools that help set up and streamline the development process for React applications. However, they have some key differences in terms of architecture, development experience, and build process.

Architecture

Vite uses native ES modules, while CRA relies on Webpack for bundling and handling modules. Native ES modules allow Vite to provide a faster development experience, as it doesn’t require bundling during development.

Development experience

Vite offers a lightning-fast development server, which reduces build and reload times, resulting in a more efficient and enjoyable development experience. On the other hand, CRA might be slower in development due to Webpack’s bundling and processing.

Build process

Vite utilizes the Rollup bundler for production builds, which is known for its efficiency and support for tree-shaking and code splitting. CRA uses Webpack for production builds, which also supports these features but may have slightly different configuration options and performance characteristics.

Configuration

CRA follows a “zero-config” approach, meaning it comes with a pre-configured setup that works well for most React applications out of the box. While this is convenient for getting started quickly, it can be limiting when you need more advanced customizations. Vite, on the other hand, offers more flexibility in terms of configuration, allowing developers to tailor the setup to their specific needs.

Ejecting

With CRA, you may need to “eject” your application if you require advanced customizations that aren’t supported by default. Ejecting creates a more complex configuration, which can be harder to manage. Vite does not have an ejecting process, as it already allows developers to configure the build process as needed.

Compatibility

CRA has better out-of-the-box compatibility with some React-specific tools, like React Fast Refresh, while Vite may require additional plugins or configurations for seamless integration.

Considerations

Vite offers a faster development experience and more flexible configuration options, making it a great choice for developers who prioritize speed and customization. Create React App provides a more opinionated, zero-config setup for React applications, which can be more suitable for beginners or those who prefer a streamlined approach with less configuration.