DEV Community

loading...
Cover image for Vite With React Template

Vite With React Template

adiatiayu profile image Ayu Originally published at adiati.com Updated on ・3 min read

Hello Fellow Codenewbies 👋,

In this post, I want to share my experience with Vite.


Background

I am still in the beginning phase of learning React.
So I often run create-react-app to create a new project before code along with a tutorial or to create my own mini-project.
It takes a while for me to wait for the create-react-app done with installing its dependencies.
And afterward, I need to delete some folders, files, and lines of code that are not needed in a beginner's project.

One day, I was trying out TailwindCSS.
From this "try-out day" and through some rabbit holes, I found out about Vite.
The word fast in Vite caught me.

What Is Vite?

Vite is a no-bundler alternative to webpack.
Before, it only worked with Vue.js since it was made by Evan You, the creator of Vue.js.
But now, Vite also works with vanilla Javascript and other frontend frameworks, including React.
Vite provides React's template and its basic dependencies; react and react-dom.
And it will install those dependencies after we run npm install or yarn.

Install Vite

To install Vite with NPM:

npm init @vitejs/app
Enter fullscreen mode Exit fullscreen mode

And with Yarn:

yarn create @vitejs/app
Enter fullscreen mode Exit fullscreen mode

Then, follow the next steps.

  1. Enter the project name.
    npm-init.jpg

  2. Select the framework template of the project.
    framework-template.jpg

  3. Install the dependencies and run the application.

With NPM:

  cd project-name
  npm install
  npm run dev
Enter fullscreen mode Exit fullscreen mode

With Yarn:

  cd project-name
  yarn
  yarn dev
Enter fullscreen mode Exit fullscreen mode

We can also specify the project name and the template that we want to use in one command line.

With NPM (version 7+):

npm init @vitejs/app project-name -- --template react
Enter fullscreen mode Exit fullscreen mode

Note:
An extra double dash (--) before --template is needed in NPM version 7 and above. If we use the version below 7, we don't need to add this double dash.

With Yarn:

yarn create @vitejs/app project-name --template react
Enter fullscreen mode Exit fullscreen mode

Then install the dependencies as written in step number 3 above.

Vite vs create-react-app

Installing Duration

I'm very happy with how fast Vite installing React's basic dependencies.
Again, since I am still learning the basics of React, these dependencies are all I need for my projects.
Besides, I can add more packages later on when I need one.

In total, it took 144.43s (2.4 minutes) to install Vite, while it took 788.50s (13 minutes) to install create-react-app.
Side note: I am using Windows.

First Render

After I run yarn start, it took about 1.5 minutes for create-react-app to render the React template onto the page.
Click here to see the demo video.

While with Vite, after I run yarn dev, it took about 20 to 25 seconds to render the React template onto the page.
Click here to see the demo video.

Conclusion

I had a great experience with Vite.
Based on the run time, I prefer using Vite rather than create-react-app for my basic React projects.

Thank you for reading! 😄
Last but not least, you can find me on Twitter. Let's connect! 😊

Discussion (0)

pic
Editor guide