What Exactly Is Create React App? And Vite, For That Matter?
Very simply, Create React App (hereafter referred to as CRA) and Vite (pronounced veet, means fast in French) are tools that help you create new React applications.
Any new app will have a lot of boilerplate things that you will want to set up every time:
- A development environment, so you can code your app and view it in the browser
- Linting your code so any errors are flagged
- Transpiling your code to a syntax older browsers can understand
- The ability to build/bundle your app so you can deploy it online
This can be time consuming and fiddly to set up manually, when really all you want to do is start coding! These tools are designed to configure all this for you and take the hassle out of starting a new project from scratch.
What’s Wrong With Create React App?
Look, it's been the default method for so long for a reason. It's a great way to create your React apps, and it's been so commonly used that it's been refined and perfected over the years.
Traditionally, React applications have commonly been created using CRA:
However, there are downsides to CRA that Vite hopes to address. As your project grows in size, development and build times increase substantially. The reason for this is because whenever changes are made, CRA rebuilds the whole application. If you have a large number of files, this process can be very time consuming.
Vite provide a diagram demonstrating this behaviour:
Why Should We Be Using Vite?
Unlike CRA, Vite does not rebuild the whole app whenever changes are made, it is built on demand. It splits the app into two categories; dependencies and the source code.
Source code is served over native ESM (ECMAScript modules). The benefit of this method is that there is no need for bundling, they are called on demand when required, and it is incredibly fast.
Just How Fast Are We Talking?
To answer this question for myself, I went on the hunt for some sizeable, open source CRA apps which I could convert to using Vite in order to see the results!
Example 1 - Cypress Real World App
Create React App - Development Server Startup
gnomon that you see at the end of each command is an npm package I used to let me see how long the commands took to execute.
As it stands, this app took 80 seconds to start up the development server:
Vite - Development Server Startup
The result after converting the app to use Vite is quite astonishing! Vite was ready in just 876 ms!
Not quite believing my eyes, I went on the hunt for another open source app to test.
Example 2 - Write with me
Create React App - Development Server Startup
As it stands, this app took 6 seconds to start up the development server:
Vite Start - Development Server Startup
Again, Vite blew this out of the water, starting up after just 991 ms. Pretty mind-blowing.
I'm Convinced! How Do I Use Vite?
For A Brand New Project
- Super simple. You can create a Vite project using your favourite package manager.
- Enter your project name at the prompt:
- Select which framework you would like for your project. I've selected React in this example:
- Vite will go on to create your project based on your selections:
If you like, you can also specify the project name and the template as command line options, instead of going through each of the steps individually:
For An Existing Create React App Project
- Open your
package.jsonfile and remove the
react-scriptsentry from dependencies:
Note: You may have a different version number in your file
- If you are using CSS or SCSS, add the
sassnpm package to your devDependencies:
@vitejs/plugin-reactnpm packages to devDependencies:
package.json devDependencies should now include those packages:
package.jsonand update scripts to match the below:
- Create a
vite.config.jsfile in the root folder and add the below:
Note: The react() plugin is added to avoid you having to manually import React at the top of every single .jsx and .tsx file
index.htmlfile from the public folder to the root of the project.
Remove all the instances of %PUBLIC_URL% from that
- Add the script tag below in the body of that
- If you have any
.envfiles, replace REACT_APP with VITE:
- Run npm or yarn one last time:
- Now run the application:
Congratulations! Your CRA app should now be successfully migrated to Vite.
Disadvantages Of Vite
In the interest of making this a fair comparison, we should also consider any potential downsides of using Vite over CRA.
Package Compatibility Issues
In the process of finding open source projects to make the speed comparisons presented earlier in this post, I did struggle in a few cases to convert the apps to use Vite.
Just following the instructions provided above were not sufficient and I encountered errors with packages that were incompatible with Vite.
For converting an older project to Vite, you’ll need to judge this on a case by case basis, but for a new project you will obviously not have this problem.
Different Tools For Bundling Development And Production Code
As we have discussed, during development esbuild is used for ultra fast speeds. For production, Rollup is instead used to bundle the code. In rare cases, this mismatch could potentially lead to issues manifesting themselves in production that were not present in development.
Create React App has been a fantastic tool for developers wanting a quick, easy way to generate a new React application. Inevitably, as with anything, technology has evolved and an exciting new prospect has arrived, in Vite.
Vite has established a completely new way to generate React applications, with speed at the forefront of its mind. The results from my testing speak for themselves. I am blown away by just how much of an improvement Vite has provided. I will definitely be adopting Vite in my projects from now on, and if you value productivity in your development process, I recommend you do the same.