Vite — witnessing the next-gen frontend tooling (Part-2)

Note: If you haven’t checked the first part of this article yet, please check out here before jumping into this space.

Having said that, vite makes developer life easier. Now let’s try scaffolding a plain vanilla js project from scratch and check what vite provides us in plate hands-on.

Let’s start with the init command,

$ npm init vite@latest (or) $ yarn create vite

Step1: Give a name for the project

Step 2: Choose vanilla from the framework lists. As said earlier,

vite is framework agnostic — You can use it with vue, react, preact, svelte, etc.

Step 3: Next step you can choose a variant (vite provides ts support out of the box). For now, let’s go with vanilla itself.

And, tada! We’re done in a second 🥳 You can now cd into the directory and run the boilerplate using,

$ npm run dev

Inspecting code & folder structure

Let’s start with package.json file. If you take a look at that,

vite should be the only dependency added. Cool!

The starting file is index.html that includes a main.js of script type module.

And, if we take a look into main.js, it’s a simple ES module that also imports a style.css (which we’ll come back later)

That’s pretty much to note, bare minimum js modular boilerplate to get started.

Features:

• The support for typescript in vite is out of the box.

Simply try changing the main.js to main.ts and it would run seamlessly.

Vite takes care of all the transpiling using esbuild which is faster and thus we no need to install any additional dependencies for the process.

• Vite also handles npm dependencies for you. Normally you can’t do this directly in browsers. Let’s try adding debounce import from lodash-es package in your main.js file. It would work out of the box if the dev dependency is installed properly.

import { debounce } from 'lodash-es'

And, if we try logging in to the console, we would be able to see the debounce object logged to the console

• It supports CSS hot reloading out of the box

What does that mean? Yes, unlike a normal dev server that reloads the page on CSS updates, vite simply hot updates without reloading seamlessly. Check the below quick video to witness how it works,

CSS & debugging

Let’s talk a bit more about CSS with vite. Because there are lots of cool supports we shouldn’t miss,

• As said above, it hot reloads the CSS changes
• And, it provides out-of-box in-built post-CSS support. This means you can just add whatever plugin is needed without needing to add post-CSS explicitly. That simple, say for example I need to use postcss-nested plugin I can add & use it right away without caring much about configuration.

Note: post-CSS is just a tool for transforming CSS with JS and almost all projects now are using it to add vendor prefixes to existing CSS rules.

One other interesting fact we need to note is that vite actually converts CSS into JS because that’s what the browser can process natively. Check the below video on transformed CSS overview,

• You can also add module CSS files and vite works seamlessly with it.

Note: The way module CSS works is that it creates a unique hash appended to each of the class/style units added.

Check the below video for better understanding,

• You can also use a preprocessor like SASS (or) LESS, vite supports all these exclusively with hot reloading for the preprocessor as well.

Handling static assets

There are two different ways to use static assets in vite project.

1. You can directly import like,

import favicon from './favicon.svg

and vite returns a string denoting the host path of the respective file which can be used inside the image tag and vite renders it for you.

Note: If we try to build, how vite handles this type of static assets import is that, it moves the assets inside an assets directory at the root as shown in the screenshot below. And, the file name is appended with some additional hash to make it unique.

2. Adding image path directly. To do so, create a public directory and add all your assets there. That way, you can directly refer them inside files as they would be added to the root during the build and thus readily accessible from the parent directory itself.

If we take a look at the dist folder this time, the SVG is available at the root of the project itself.

Few stuffs to take care of while moving to Vite

• The way env variables are exposed and used differs in vite. Normally in a bundler-kind of setup, you can access those like,

process.env.mode

But, vite makes it available through standard import syntax,

import.meta.env

Here, the above meta object is where vite exposes its native env.

And, also it’s advised to prefix env with VITE, say

VITE_SOME_KEY

• Then, in the case of webpack you can use both require and common.js. But, here strictly no require and vite assumes code is authored in native ESM on the whole. So, if any of your existing code is using require you have to change it in order to migrate to vite.
• But, if any of your dependencies are using require, vite handles it for you. No worries, as vite uses esbuild to handle those.

Using plugins

Vite offers you a wide list of plugin support and you can also write your own custom plugins. Vite can be extended using those plugins, which are based on Rollup’s well-designed plugin interface with a few extra Vite-specific options.

I won’t be getting deep into it for now (maybe in a separate article in the future). In case, if you’re interested check here.

Closing thoughts

One other thing any frontend developer would look out for SSR support. Unluckily vite is still young but it’s growing rapidly with the extensive support from the community. There are already a few templates and plugins available to support SSR, yet not complete. They are still experimental and we might encounter bugs. So let’s explore those sometime later once matured:)

Woohoo! We’ve covered almost all the basic things in vite. The process will be almost similar for other frameworks with a couple of additional configs (maybe). Give it a try and let me know how it worked for you. You can write to me at mariappangameo@gmail.com. I’d also love to connect with you all on Linkedin.