Why You Should Use Vite

INTRODUCTION

Recently, I started using Vite and I was amazed to see how fast Vite was. So today we are gonna talk about how & why to use Vite. We will see how easy it is to set up a new Vite project & you can also use dependencies as you use with any other bundlers. And at last, we will see how easy it is to deploy our Vite project.

What is Vite

Vite is a Next Generation Frontend Tooling created by Evan You (Who also created Vuejs). It has some great features which separate it from other module bundlers (Parcel, Webpack etc).

Features

💡 Instant Server Start

On-demand file serving over native ESM, no bundling required!

⚡️ Lightning Fast HMR

Hot Module Replacement (HMR) that stays fast regardless of app size.

🛠️ Rich Features

Out-of-the-box support for TypeScript, JSX, CSS and more.

📦 Optimized Build

Pre-configured Rollup builds with multi-page and library mode support.

🔩 Universal Plugins

Rollup-superset plugin interface shared between dev and build.

🔑 Fully Typed APIs

Flexible programmatic APIs with full TypeScript typing.

New Project Setup

With NPM:

npm init @vitejs/app

With YARN

yarn create @vitejs/app

Then, give a name to your project and choose which stack you want to build your project with, there is a lot of option. For the Tutorial, we will use vanilla js.

? Select a framework:
> *vanilla*
 > *vanilla*
   vanilla ts
vue
react
react
preact
lit-element
svelte

Then change your directory to that folder and install node modules and start the dev server.

cd *your project name*
npm install
npm run dev

And your project has been successfully created using Vite and you have already noticed that how fast was it to create a project with Vite as compared to parcel or webpack.

Folder Structure

If we talk about the folder structure of the Vite project then its pretty simple

We have a node_modules folder which you don't have to touch

Then we have an index.html file, main.js file and style.css file

Feel free to delete any files you don't want in your project.

index.html File

You can see that index.html is the same as we use to do with any module bundlers. But in the script tag, there is a new property called type="module". It is because it uses ESM for building files so you need to do it in every script tag in your project. Don't move the index.html file from the root directory. And also delete the <div id="app'></div>.

main.js File

import './style.css' imports all your css styling in your index.html file through main.js. NOTE: If you have deleted <div id="app'></div> then you need to delete everything that's in the file except the import './style.css'

.env File

.env file are environmental variables which help you secure something private from users like an API key. Vite exposes env variables on the special import.meta.env object. So, let's create a file called .env in the project's root directory. Vite official documentation page says to start your env variables with VITE, for example VITE_API_KEY

Multi Pages

If your project has more than one HTML file then you have to create a file called vite.config.js in your root directory and add the below configuration.

const { resolve } = require('path')

module.exports = {
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html'),
        *your page name*: resolve(__dirname, *your page directory*)
      }
    }
  }
}

And you can go to your page as specified below. NOTE: The name of the page will be the name that you specified in the vite.config.js file.

Importing Images (assets) In Your JavaScript File

To import assets in your javascript file you need to do the below steps. You can give any name to the import name here I have written img you can write anything.

Building For Production

For building all your files you need to type in your terminal npm run dev and it will create a dist folder in your root directory and you can easily drag n drop or push it to your GitHub pages or Netlify.

CONCLUSION

We have talked about how to set up your own very project with Vite, folder structure, how to import images in a javascript file, env files and much more. For more detail, you can go to the Vite documentation page where I also learned about Vite. There was no youtube video for Vite because Vite is pretty new. Reading documentation makes you really understand more than any blog or video will do. Give Vite a try and comment down if you have any problem with Vite or know something more that I should know.