Vitejs: Installation and How to Use

With the increasing digitalization, modern web projects are becoming large and complex. Due to this, developers are facing difficulties making fast applications. Technologies such as Create React App, and Vue CLI were used for this purpose, and are no longer helpful as they used to be. But you don’t have to go too far searching for a solution. The Vue ecosystem already has a tool that has been proven to be more effective than most popular dev tools. Vue JS development companies leverage ViteJS to provide a faster development environment for various frameworks and programming languages. This article acts as a guide that answers many of your questions such as what ViteJS is, how it works, and How to build an app with it. So, let’s get started right away. 

1. What is Vite JS?

ViteJS is a front-end development framework produced by Evan You, creator of VueJS. It’s designed to generate VueJS single-file components that allow rapid development and provide a lean experience. This is possible because instead of bundling, Vite utilizes native ES module imports for code delivery. 

When the app is executed, the modules are updated with Hot Module Replacement and other built-in features of the framework as the dev server sends the source files to the native ES modules. 

The development time is reduced as there is no need to reload the entire app to update the necessary changes made to the source code. Moreover, you get highly optimized static assets are obtained for production by bundling the code with Rollup plugins through a build command. 

The ViteJS framework requires just three commands to set up a development environment for other frameworks such as Vue, Vanilla, or React, along with hot reloading and a dev server. 

Vite offers a caching layer that can further improve your web app’s performance. It also supports both synchronous and asynchronous CSS files and JavaScript loading using the <script> and <link> tags. 

Here is what Hoodricch tweeted about ViteJS

What is ViteJs?

ViteJS is a build tool and development server designed to provide a fast and efficient development experience for web developers by leveraging native ECMAScript modules in the browser.

— Hoodricch (@BigJKe) April 5, 2023

2. Why Vite.js?

Initially,  developers used bundling to create a mechanism for processing and concatenating source modules into files that could run in the browsers. Bundlers were very helpful as they were used to ease up the development process and improve its efficiency. 

However, bundlers are increasing the complexity of modern web projects. Nowadays, large-scale projects consist of huge codebases and thousands of modules. So, even if you use HMR, it may take a while for file edits to reflect in the browser or to run the dev server. 

This could potentially reduce the speed and efficiency of your application. But with the advent of ViteJS, developers get to use a new approach to bundling. Vite leverages ES modules to package and merge your app’s codebase into optimized bundles. This allows you to develop the front end of your application easily. 

In a production model,  ViteJS can bundle the app code quickly and then serve it directly to the local development server. So, the reason for choosing ViteJS over other popular options is to enhance the efficiency of the development process and the performance of your application. 

3. How Vite.js Works

Before you install the Vite, you must know how it works.  Developers used to set up their projects with Vue CLI or Create React App. However, bundling the entire app together could significantly slow down the app, especially if it has a large codebase. Even HMR would be slow in such cases. 

But Vite can resolve these issues efficiently by compiling the code on demand. It decouples the HMR from the total number of modules by compiling the code imported into the screen. So, regardless of the size of your codebase, HMR continues to offer high speed and performance.

Instead of bundling, Vite makes use of native ES modules in its dev environment. These modules provide starter files and support for TypeScript, Vanilla, Sass, and JSX. You don’t have to rebuild the entire bundle anymore just to implement a little change in it. This way HMR updates can be made quickly and consistently. 

It also allows you to compile a mock or mini version of your project. This can come in handy in small projects or for quick prototyping. 

Here is what Anthony Fu tweeted about How Vite.js Works

This could be a good way to learn how Vite works and debug your apps and plugins.

This plugin lets you see the intermediate states of plugins transform and the changes they applied. Now also with a cool module graph built with vis.js 🕸https://t.co/zzipFY055H pic.twitter.com/34HkHWcZfx

— Anthony Fu (@antfu7) September 10, 2021

4. Key Features of ViteJS

ViteJS comes with a large range of features but here we will take a look at a few important ones.

4.1 Hot Module Replacement

Vite comes with a Hot Module Reloading feature that allows you to add, update, or remove modules without the need to reload your entire application. It also offers HMR APIs for third-party frameworks such as React, Vue, and Preact that have HMR capabilities. Using HMR speeds up the software development process.

4.2 Instant Server Start

Vite uses native ES Modules to serve source code. This allows the servers to start instantly. Such instant server starts to help increase the speed and performance of the systems, and applications.

4.3 TypeScript Support

Another unique capability of Vite is that it supports TypeScript first, it imports the .ts files and then uses esbuild to transpile them into .js files. This helps to accelerate the process so much that the HMR updates are reflected within 50 milliseconds on your browser. Meanwhile, IDE handles the type checking. 

4.4 Plugin System

Using plugins can help you extend the functionalities of the framework. Although the Vite users have to rely on the plugins based on Rollup’s plugin interface that comes with Vite-specific options, they can extend the SSR functionality and dev server according to their requirements. 

5. A Step-by-Step Guide To Install and Use Vite on Your System

As a prerequisite, you must install the latest version of NodeJS in your system before starting the installation process.

Step 1: Checking Requirements and Initiating Installation

After verifying that you have the latest version of NodeJS running on your computer, you need to run the ‘npm init @vitejs/app.’ next. Choose an  appropriate name for your project, choose one from the list given below: 

• vanilla
• vue
• vue-ts
• react
• react-ts
• svelte
• svelte-ts
• preact
• preact-ts
• lit-element
• Lit-element-ts

For example, we take Vanilla as our project name in this installation. Selecting an option from the list will result in the creation of a directory consisting of essential files such as ‘favicon.svg’, ‘style.css’, ‘main.js’, ‘index.html’, and more to carry out Git operations and NPM for during the development process. 

You will also get a dependency called ‘vite’ with basic scripts inside a ‘package.json’ file. It prompts the dev environment to start the build.

Step 2: Creating a Project Directory

Your system will have a terminal. Open it and navigate to the directory path to run the following command: npx create-vite-app vite-test. Implementing it allows you to form a project directory named Vite test.

Step 3: Installation Command Execution

Now, execute the commands shown below in the given order. 

1. cd vite-project
2. npm install

Executing the first command will help you move to the project directory, while the second command will initiate the installation of app dependency. After that, your app starts running in the Visual Studio Code. 

Step 4: Running the Dev Server

Now, we use the ‘npm run dev’ command to run the dev server. Once it is implemented, you can see your app on http://localhost:3000/. Now, the changes made in your project files will be immediately reflected on your screen.

Step 5: Vite Test

If your screen looks the same as the image given below when you arrive at the localhost page, you are all set to use the Vite for software development. 

6. How to Install ViteJS Vue Router?

First of all, run the following command to install the latest version of the VueJS packages in your Vite app:

npm install --save vue-router

Now, create a router.js file and then define the routes as shown in the code below:

import { createWebHistory, createRouter } from "vue-router";

import Dashboard from "./components/Dashboard.vue";
 
const webHistory = createWebHistory();
const myRoutes = [
{ path: "/dashboard", component: Dashboard }
];
const vueRouter = createRouter({ webHistory, myRoutes });
 
export default vueRouter;

Implement the above code. Use the following command to register your register.js file in your main.js file. 

import { createApp } from 'vue';
 
import VueApp from './VueApp.vue';
import './index.css';
import vueRouter from "./vueRouter";
 
 
createApp(App).use(router).mount('#app');

To render all necessary components, you have to change the App.vue root component using the given code: 

<template>
<img alt="Vue logo" src="./assets/logo.png" />
<Dashboard msg="This is  Vite + Vue 3.0 demo" />
<router-view />
</template>
<script>
import Dashboard from "./components/Dashboard.vue";
export default {
name: "VueApp",
components: {
Dashboard,
},
};
</script>

7. How to Use Vite.js to Build a Single-Page Application?

To create a SPA using Vite, you will also need to get some help from Vue. Run the npm init @vitejs/app command and then install the Vue template. After that, compile Vite, and Vite Plugin, with Vue. 

But we can’t do anything else if you haven’t yet installed a Vue router for route management during SPA development. Because in this process, Vite is nothing but a plain Vue setup. 

So, it’s not serving any unique purpose here. We have to leverage the Vote-plugin-Vue-router, a plugin developed by the community for building a router based on file paths. 

8. Conclusion 

Vite is a new build tool in the town that is performing better than popular dev tools such as Parcel and Snowpack. It not only provides a faster development environment but also offers lean developer experience and support for multiple frameworks as well as languages. 

In this blog, we have looked at Vite JS’s features, how it works, and why you should choose it. We also saw how you can set it up and develop a single-page application with it. You can connect with our experts if you need further guidance or have any queries. 

FAQs 

1. What is Vite JS used for?

Vite JS is used to set up the development environment for various JavaScript frameworks such as VanillaJS, Vue, and React. 

2. How to use Vite in Visual Studio Code?

Use your code to create a new Visual Studio Code extension project. The configuration needs to be changed so it doesn’t matter if you aren’t utilizing the webpack setup. Run the i vite -D command to install Vite after you create a new project. 

3. Is Vite better than Vue?

Vite is a part of the Vue ecosystem. It’s a build tool that comes with a much faster development server than Vue CLI. When it comes to VueJS app development, both Vite and Vue CLI are viable options.