A beginner's guide to ViteJS: A modernized frontend tool

14 November, 2022

Contributors

Darshan

@darshancodes

Introduction

If you are looking to enhance your experience in front-end web development, you are not alone in the race. With the same goal, the creator of Vue: Evan you, came up with a new library/tool called ViteJS. They call it next generation frontend tool. A build tool Vite or ViteJs consists of a development server that bundles the code for production.

ViteJS allows developers to set up a development environment for frameworks like Reactjs, Vuejs, etc with a dev server. Also, it allows developers to hot reload in just three commands. In addition, ViteJS supports many frontend libraries like Reactjs, Vuejs, Angularjs, Preact, and Vanilla Javascript through its templates. Let's learn more about ViteJS.

What is ViteJS, and why you should use it?

In the race for modern frontend next-generation tools, Vite is already winning the race. To get in the back of how vite was created, actually, it was created for Vue Single File Components (SFC) as a development server. But in time, Vite evolved and became the no-bundle javascript development server. Vite offers a faster, shorter, and smoother workflow for developing modern front-end websites/web apps. In nutshell, Vite is similar to Vue CLI but faster.

As a developer, a lot of you may have faced this issue of the dev server taking a lot of time to load an application. And you may be frustrated with this a lot. Vite has heard you and here's why Vite is here with its inbuilt super-fast dev-server loading time.

How does ViteJS work?

ViteJS supports ES6 modules, The document of ViteJS states that ES import syntax is actually served to browsers in their source code. <script_module> supported browser parses them automatically. Vite's pre-bundling with ESbuild speeds up loading time by 10-100 times faster than any other JavaScript bundlers. Therefore, the ViteJS server starts instantly, and the browser's saved code is shown fastly, Thanks to the HMR (Hot module replacement). Further, you can read more about the performance of ViteJS here . Now, Let's look at some advantages of using ViteJS.

Advantages of ViteJS

1) Hot Module Replacement (HMR): An awesome feature - HMR in javascript bundlers saves the changes that you've done in the source code and you don't need to refresh the browser to see the changes that you've done, It instantly shows you the output. Also, HMR speed is the bottleneck for the developers who code using webpack.

2) Configuration Option: If you want complete privacy for your project or want to own your project you can change the vite.config.js in the existing working directory of the project.

3) Module Resolving: Browser's nowadays don't support module imports where you can import from a package. Whereas, Vite looks for bare import specifiers in your javascript files and rewrites them, and utilizes them.

Features of ViteJS

Vite offers many features which allow development easier than it was before. Here are some features you can leverage:

1) Faster builds: As we already know how fast is vite. Here vite offers faster build times with ESbuild. Esbuild is a bundler that is written in Go. It is much faster than any other bundler.

2) Framework support: Vite has a quality boilerplate for frameworks like React, Vue, Preact, etc. Other boilerplates also support Typescript. Vite offers a consistent tooling experience to its users.

3) Improved CSS support: Lately, Vite has improved their CSS support they've also offered some new features for CSS support like CSS splitting, URL re-bashing, and some more.

4) New Plugin System: The new plugin system leverages unique Hot module replacement and offers API to add middleware to the dev server.

5) Support for.JSX and . TSX Files: Vite offers great support to .jsx and .tsx files with ESbuild for transpilation.

Now, Let's look at a complete overview of how we can build an application using ViteJS:

Building an app using ViteJS

Let's look at the Prerequisites of ViteJS:

1. Node.JS 10 or higher

2. Basic knowledge of JavaScript and how it works.

Let's take a test drive by creating a very basic application using React-Vite boilerplate:

First of all, In your terminal type:

Let's look at the folder structure of a ViteJS app:

ViteJS app folder structure

So, now the Vite-React boilerplate is ready to develop. Now, it's time for installing all the dependencies with the yarn add or npm I command. This will install all the dependencies that is present in the boilerplate. Once done, you've to start the application with the npm start command, and BOOM!

Live Server

Now, a lot of you maybe have a question that all things are fine but why choose ViteJS itself why not some other frontend tools? Well, I've got your back let's look at why you should choose ViteJS:

Why choose ViteJS?

A primary advantage of ViteJS is it gives developer's a better experience than any other frontend tools. It works fast, It loads fast, and It allows developers to get their work done in an accomplished time. With that said, Vite can be helpful to you in many ways such as:

Single-page applications: When you develop a vite app, SPA is the default setting.
It is built keeping SPA in mind.

Static Site Generation: Do you want to create a Static Site? The Vite SSG plugin
fulfills your wish.

Backend Integration: If you're developing a website with a backend framework
like Rails or Laravel, etc. Then vite offers you backend
integration support too.

Conclusion

Well, as we know Vite is a new tool in the market and gives competition to some other development tools. However, Vite is the most popular frontend development tool offering many features at the same time, that are useful to developers. Furthermore, Vite will continue developing further in the future and come up with different-different useful features for the developers out here. Once, you should definitely give it a try.

I hope you like this show and found some useful information about ViteJS. Thank you for reading!

web

development

develevate

hotintech

vitejs