Vite: A faster alternative to CRA

If in 2023 you are still using create-react-app to start your single-page applications, I got bad news for you, you are doing it wrong. CRA is still not officially deprecated, but now the official React docs are suggesting the use of fully-fledged React frameworks like Next.js, Remix, or Gatsby instead of create-react-app.

However, if you prefer to use React without a framework, and this is often the case if you are a React beginner, Vite is a fantastic option.

Vite (French word for "quick", pronounced "vit"???? ) stands out from traditional React app creation methods by offering unparalleled speed and efficiency, perfect for production-ready projects. Vite's architecture is inherently faster compared to the conventional create-react-app approach, enabling rapid development and a smoother developer experience.

Plugins

Another aspect of using Vite for your React projects is its robust plugin support. Vite's ecosystem empowers developers to extend the functionality of their applications by integrating a variety of plugins. This flexibility allows you to inject and modify features within your Vite project effortlessly, aligning them with your specific requirements.

Moreover, Vite comes with built-in support for modern web technologies like PostCSS, which provides you with powerful tools for handling CSS transformations directly out of the box. These conveniences, along with several others, are readily available in Vite, streamlining your development process right from the start.

Vite's versatility

Vite's versatility doesn't end with React; it's a highly adaptable build tool capable of handling Svelte, Vue, vanilla JavaScript, and many other frameworks or libraries. Whatever your project requirements may be, Vite is designed to cater to a diverse range of web development scenarios. I recently started with Typescript, and Vite offers built-in TypeScript support, simplifying the process of setting up a TypeScript-based React application. If you're looking to leverage TypeScript's static typing benefits for more robust and maintainable code, Vite's got you covered. A few commands in the terminal, and you're on your way to crafting a TypeScript-driven React app that's ready for production. As from che official documentation "Vite uses esbuild to transpile TypeScript into JavaScript which is about 20~30x faster than vanilla tsc, and HMR updates can reflect in the browser in under 50ms".

Server-side rendering

Vite is suited for smaller to medium scale projects or those intended solely for the client side, providing an excellent choice for quick and efficient development cycles. While it excels in this area it also provides built-in support for server-side rendering (SSR). SSR specifically refers to front-end frameworks (for example React, Preact, Vue, and Svelte) that support running the same application in Node.js, pre-rendering it to HTML, and finally hydrating it on the client. While I prefer using Astro with react or NextJs when i need to use SSR (and suggest you do the same). Vite gives you also this option if you are interested. For a more solid approch to SSR with , way you could use Vike .

We will walk you through the process of installing React using Vite in this article.

Installing React with Vite: A Beginner’s Guide

Before we begin, ensure that you have Node.js installed on your system. If you haven't installed it yet (and if so, why are you here btw???), you can easily download it from the official Node.js website.

Step 1: Create a new Vite project

To create a new Vite project, open your terminal and run the following command:

npm create vite@latest my-app -- --template react          

Replace "your-project-name" with the desired name for your project. Vite supports various frameworks, but in this case, we specifically mention the react template using the --template react option.

Step 2: Navigate to the project directory

Once the Vite project is created, navigate to the project directory using the following command:

cd my-app        

Remember to replace "your-project-name" with the actual name you chose for your project (unless you want to keep this name as your project name).

Step 3: Install dependencies and run the development server

Next, install the required dependencies and start the development server using the following commands:

npm install        

npm run dev        

NOTE: can also run all the commands in one line:

cd your-project-name && npm install && npm run dev        

After executing these commands, you should see a message in your terminal indicating that your React website is running on a specific port. The default port number is https://localhost:5173.

Now, open your browser and visit the provided URL to see your React website in action. Now, go ahead and start writing some code!

For more information on React and Vite, check out the official documentation:

- React documentation: https://reactjs.org/

- Vite documentation: https://vitejs.dev/

Credits:

This article is based on https://www.dhirubhai.net/pulse/installing-react-vite-beginners-guide-richard-oliver-bray/ by Richard Oliver Bray

Remember to always refer to the official documentation and resources for the most up-to-date and detailed information. Happy coding!