DEV Community

Cover image for Create react app vs Vite
Keerthi
Keerthi

Posted on • Updated on

Create react app vs Vite

I have always relied on the npm command create-react-app to create the starter files for any React.js project. It does what it says on the tin, and creates all my starter template files, setups a local dev server and dev environment. Over the years I have become a little impatient because it takes around 3-4 minutes to setup a basic barebones app. Recently I have come to know about a faster way to setup React apps, which also gives you all the useful features that create-react-app gives you too. It is using a tool called Vite. Vite is another build tool like Webpack (create-react-app uses Webpack under the hood, read more here).

In this post I will take you through the steps on how to install React.js app using Vite and point out some differences too. You can also see a video on the comparison of the two installation methods. In the Video below, You will discover that the installation time, plus time to run local server is astonishingly fast for Vite.

So how do we start the ball rolling

You can refer to the Vite docs, From there, you can choose from a few methods to start off your installation. We are going to use the template method. In their docs, the listed methods are:

#npm 6.x
npm init vite@latest my-vue-app --template vue

#npm 7+, extra double-dash is needed:
npm init vite@latest my-vue-app -- --template vue

#yarn
yarn create vite my-vue-app --template vue
Enter fullscreen mode Exit fullscreen mode

But these commands are for installing Vue.js, just as side note, Vite was originally developed for Vue.js but has been modified to use with other frameworks including React.js. For our case, all we need to do is replace the keyword after '--template', from vue to react. And dont forget to replace the app name to your choosing. So assuming that we are running npm version 6.x, we will run the following command:

npm init vite@latest my-react-app --template react 
Enter fullscreen mode Exit fullscreen mode

Then we will cd into our directory and install the remainder of the starter files and run the dev server:

 cd my-react-app
 npm install
 npm run dev
Enter fullscreen mode Exit fullscreen mode

If you goto the browser. You should see a React logo with a counter and a button, as below.

Browser display

Directory structure of the our newly created app

Directory structure

The thing to note here is that, main.js is the root file that imports/loads App.js. There is also a new file called vite.config.js, this is circled in the above image. This file is used to turn on and set new features for your build process. I will come to this file in the next section below.

One last thing about importing files...

I have noticed that out the box this setup does not allow for absolute paths. With create-react-app, you can do

import x from 'components/x'

. With Vite, you have to do the relative pathing, like

import x from '../../../'

.

To fix this we need to change the vite.config.js file, which looks like this:

import { defineConfig } from 'vite'
import reactRefresh from '@vitejs/plugin-react-refresh'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [reactRefresh()]
})
Enter fullscreen mode Exit fullscreen mode

we need to add an extra setting to resolve the path, this change will go after the "plugins" settings. It will end up looking like this after the change:

import { defineConfig } from 'vite'
import reactRefresh from '@vitejs/plugin-react-refresh'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [reactRefresh()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
})
Enter fullscreen mode Exit fullscreen mode

and this will allow us to refer to paths as

import x from '@/component/x'

!IMPORTATNT to prefix with '@' in path.

conclusion

I did find Vite impressingly fast. It took me 55 secs to install and run on local server. I have not done much heavy development using Vite but it looks promising. It is too early for me to say if I will use it on any bigger projects in the future. There are other methods of installing React.js using Vite, these methods are maintained by other communities. Check out other community maintained templates here, you can also find one with Tailwind. Please leave comments on your experiences too.

Note: Vite has templates to build apps in the following frameworks

vanilla
vanilla-ts
vue
vue-ts
react
react-ts
preact
preact-ts
lit-element
lit-element-ts
svelte
svelte-ts
Enter fullscreen mode Exit fullscreen mode

so to create a build in react typescript , just change the last bit to "react-ts" after the "--template" , so it becomes:

npm init vite@latest my-react-app --template react-ts 
Enter fullscreen mode Exit fullscreen mode

Discussion (17)

Collapse
jamesthomson profile image
James Thomson

I've recently switched a Vue CLI project to Vite. It's impressive how fast things are - but makes complete sense when there's no build step needed when developing.

One thing I've found less intuitive are images, especially dynamically referenced ones (e.g. in a loop). I've had to create a utility for this:

export function getImageUrl (name) {
  return new URL(`../assets/${name}`, import.meta.url).href;
}
Enter fullscreen mode Exit fullscreen mode

Is this also the case in React?

Collapse
keefdrive profile image
Keerthi Author

Yes , Similar in react

Collapse
mlnzyx profile image
R. Maulana Citra

Vite is cool, I love how things are fast on dev server.
I also made boilerplate for daily projects with Tailwind, if you want to check it out, see it on my GitHub here

Collapse
keefdrive profile image
Keerthi Author

Thats awesome, you should contribute to the community here github.com/vitejs/awesome-vite#tem... . They have one for react and tailwind already, maybe you can add yours as well.

Collapse
mlnzyx profile image
R. Maulana Citra

thank you bro, I have added mine too, and it was merged already!

Collapse
shimatai profile image
Wagner Shimatai

Why don't you use package.json inside each directory and refers to files like "@components/MyCompoment"?!
You don't need do setup anything else. Just a package.json in each folder with content:

{ "name": "components" }

Collapse
ivanjeremic profile image
Ivan Jeremic

This is so dirty I can't believe people do this.

Collapse
herberthobregon profile image
Herberth Obregón

I moved to vitejs for lit-element (now only lit) and is amazing! 💯💯🚀 Web pack is very slow to spinup a dev server

Collapse
keefdrive profile image
Keerthi Author

Firts tme I am hearing of lit-elemnt, Intresting, what apps are you building with it?

Collapse
herberthobregon profile image
Herberth Obregón

It is one of the main "frameworks" of modern development, vitejs.dev/guide/#scaffolding-your... Vite support the main popular frameworks vue, react, lit-element and svelte
I choose Lit-element because is the closest thing to js vanilla with all the power of web components (the performance is amazing ⚡️). Eventually I consider that web components are going to be so robust that you won't need a framework. Lit-element is the framework for web components par excellence. Stencil I don't like like Lit

I build all empleo.gt with Lit Which next will be migrated to hirex.app for worldwide version

Thread Thread
keefdrive profile image
Keerthi Author

Thanks, Nice to know that about Lit, will look at it. Also good luck with your app too

Collapse
ivkemilioner profile image
ivkeMilioner

Stiil too much bugs

Collapse
danieltkach profile image
Daniel Tkach

On vite? I'm just researching if I should switch to vite.

Collapse
renanlazarotto profile image
Renan Lazarotto

I have switched from CRA to Vite just because CRA is so slow! Vite is blazing fast even on my aging machine.

Collapse
keefdrive profile image
Keerthi Author

Thats good to hear. CRA has always been so slow. But I had to put up with it. Other option was configuring webpack, which was way worse in terms of time to setup.

Collapse
captaindev profile image
Rami

Vite is really cool,
I hope they support Angular in the near future.

Collapse
shimatai profile image
Wagner Shimatai

Angular is a waste of time! A poor framework, too much verbose.