How to Install Vite.js on your Computer?

In the hustle of day-to-day work, everyone wants to complete their numerous jobs as fast as possible. And most of the business and personal operations are conducted using applications.

Vite.js has made its debut in the market for making apps faster, which has gained a lot of popularity and endorsement from industry experts.

Vite Javascript is a no bundler modern technology development environment, allowing applications to render more precisely and efficiently through its native ES module importing and HMR.

It has become essential to learn this tech for moving forward in the development domain. So, let’s have a quick overview of Vite and then execute some Vite commands for installing it.

What does Vite.js Offer?

Let’s explore the perks of installing and using Vite.js

Hot Module Replacement

HMR is the most popular feature of Vite.js as it allows to update the content on the web page immediately without needing a browser refresh. It is available in the Javascript bundler to optimize the functionality of your application.

As per the official Vite documentation, its performance and speed are decoupled from the overall available modules.

Bare Module Resolving

Most of the browsers don’t allow importing of bare modules using commands, such as import {createApp} from ‘vue’as it is not a relative path to the node_modules.

However, Vite enables the bare import specifiers from the Javascript files. It rewrites the file content and executes module resolution for locating the suitable file from the dependencies.

On-demand compilation

For making the application fast as light-speed, Vite compiles only a portion of code according to the request forwarded by the browser. After compilation, changes are made on-screen, and all unaltered files provide a 304 error code.

This feature is quite different from the traditional bundlers, which compile the overall code and bundle them before changing.

Due to this, developers prefer Vite for making large and complex applications.

Configuration Option

Vite offers a wide array of modules to extend the functionality of your application.

By configuring ‘vite.config.js’ and ‘vite.config.ts’ In the project’s root directory, you can optimize the software to add more features to it. In addition, you can use Koa middleware for custom file transformation.

Let’s Get through Each Step to Install Vite

Before moving to the installation procedure, you must ensure that the latest version of Node.js is installed on your system.

Step 1: Checking Requirements and Initial installation

Once the Node.js is present and running on your computer, the next step is to run the ‘npm init @vitejs/app.’ Further, a similar list as below provided will be available, and you have to select a project name from it.

Project Name List:

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

In this installation, we have selected vanilla as the project name.

When you select an option from the project name list, it creates a directory containing essential files required for software development. ‘index.html’, ‘main.js’, ‘style.css’, ‘favicon.svg’ and some additional files for performing npm and Git operations.

more, the ‘package.json‘ file is also present, which includes ‘vite’ as a dependency and some basic scripts to initiate the dev ecosystem for starting the build. We have all the required knowledge to move on with the installation process.

Step 2: Creating Project Directory

Further, open the terminal on your system and navigate to any directory path to run the command as provided: npx create-vite-app vite-test, where ‘vite-test’ is the name of the project directory.

Step 3: Installation command execution

Move to the project directory using the ‘cd’ command and install the application dependency by executing the ‘npm install’ command.

Command execution structure:

  1. cd vite-project
  2. npm install

After this, you will see the application running in the VS Code.

Run Code

Step 4: Running the Dev Server

At this step, we will start the dev server by running the ‘npm run dev’ command, and after its successful execution, you will be able to view your application at http://localhost:3000/.

Also, if you perform any modification in the project files, all the changes will be immediately reflected on the screen.

NPN Run

Step 5: Vite Test

This screen will be displayed to you once you navigate to the localhost page to view your application.

Now, you are ready to use Vite.js for your software development projects.

Hello World

Vite Install on macOS: Step-by-Step Guide

Likewise, for Windows computers, you need to install Noed.js before installing Vite.js on MacOS.

Let’s get started with installing Vite.js on MacOS. Follow the below steps, and you are good to go with your application creation.

Step 1: Creating a new Vite App

Open the terminal and create new projects using any of the two commands.

  1. Using NPX: npx create-vite-app testing-vite
  2. Using Yarn: yarn create-vite-app testing-vite

Create Test Vite

‘testing-vite’ is the project’s name, and you can replace it with any other term of your choice.

Test Vite

Step 2: Accessing Project Directory and Installing Packages

Move to the directory with the project name you have created in the first step.

Vite Testing

And install all the dependencies and packages required to work with the application development. You can use ‘npm install’ or ‘yarn’ to perform this installation.

NPNN

Step 3: Running the Dev Server

You have to run the server in the browser to view your application, and for this, you can use ‘npm run dev’ and ‘yarn dev‘ commands.

Dev Server

Step 4: Vite Test

By navigating to http://localhost:3000/, you can test whether your server is running or not. Your server is running seamlessly if you view a similar page, as shown in the screengrab below.

Vue 3.0

Step 5: Creating the build

You have to run this command for bundling up your production application. It will Rollup the App and store the output in the dist directory, present in the root of your software project. In addition, you can find out all the static assets in it.

Vite Build

Steps to Install Vite.js Vue Router

Vue Router is an essential component of every application. It leads to establishing a connection between the browser’s URL and elements of Vue to ensure smooth rendering over the App.

It also aids in syncing URLs so that the user can view that in your software solution. Let’s move further to understand its installation.

Step 1: Checking Prerequisites

First, check whether you have Vue.js on your computer or not. If it is present, then we are good to go further, and if it’s not, you must install its packages in your vite.js application.

‘npm I -save [email protected]’ is the command you have to execute to install Vue Router packages in your Vite App.

It will ensure that the latest version of the Vue Router is installed.

Step 2: Creating a Javascript file

You have to create a file with the name ‘router.js’ for defining the routes as displayed below:

Vue Router

After successful execution of this code, you have to register the ‘register.js’ file in the ‘main.js’ using the command as defined:

Install Vite Js

Step 3: Root Component Configuration

This is the last step of Vue Router installation, in which you have to modify the App.vue root component to enable it to render all other app components for rendering.

After this, you will have the leverage to register custom routes for your Vite.js application.

Vite Install for Single Page Application

Most people have a question, about whether they can create a single page application with Vite.js or not. A reliable answer is. Yes, you can fabricate SPA software with it.

Let’s find out which packages you have to install and configure for doing it so.

At first, we have to execute ‘npm init @vitejs/app’ and pick out a Vue template. We will get a Vite, Vue, and Vite plugin for compiling the Vue.

In addition, for handling the routes, you have to install Vue Router, which is an essential component, leading to flawless functionality of your single-page application. It will work efficiently after enabling Vue Router and linking it with your App.

Vite has a significant role here, as most operations are Vue-based. Moreover, we can also create a multi-page application using the Vite Rollup configuration.

If you find difficulty defining the routes, you can use a community-made plugin vite-plugin-vue-router to simplify the task.

Backend Configuration

If your project requires custom integration, you must follow the below-provided steps to configure it manually. Otherwise, you can navigate to the Awesome Vite website to serve the HTML with a traditional backend.

Step 1: Enable the build manifest and configure the entry in your Vite config file.

Vite Config File

Step 2: If module preload polyfill is not disabled, you have to import it in your entry.

Module Load

Step 3: Add the below-shown code in your HTML template and modify the http://localhost:3000 with the local URL, where Vite is currently running.

Local Host 3000

Step 4: Check the following server configuration to assure that static asset precisely work in the Vite environment. Otherwise, the application won’t load images.

React Refresh

Step 5: This step focuses on the production part. You have to run a vite build command to create a manifest.json file, whose content will look like the screenshot provided below.

The JSON file must contain:

  • Record
  • The key should be the relative source path from the project root.
  • Key should be the base name for non-entry chunks.
  • Both static and dynamic information must be available in chunks.

Backend Integration

Concluding Up

Vite is a robust technology, and one should always know to install it on their system. And you can effortlessly install it on any Windows or macOS-based machine with the above-given step.

If you find any error or difficulty at any step, you should try to verify the prerequisites, confirm the configuration with the provided steps, and then continue it.

You can use Vite with any Vue application; Whether it’s Vue 2 or Vue 3, it is compatible with both of them.

Stay Tuned for more exciting articles and guides.

Leave a Comment