An Introduction To Vite

In this blog, I’ll be introducing Vite, a JavaScript build tool that strives to be a faster and leaner development experience for modern web projects.

I found Vite while browsing a Reddit thread and saw several users that were very happy with the technology, so I decided to give it a try myself. I’ve found Vite to be extremely fast, which lends well to making little tweaks and adjustments to the code (even in large applications) and seeing those changes very quickly. But be forewarned, Vite is relatively new and can be temperamental.

In this post we’ll go over a few things:

• What Vite is.
• Why you should use Vite.
• Getting started with the bundler.
• Starting a local server.

What is Vite?

Per their website, Vite consists of two majors parts:

• A dev server that provides rich feature enhancements over native ES modules, for example, extremely fast Hot Module Replacement (HMR).
• A build command that bundles your code with Rollup, pre-configured to output highly optimized static assets for production.

Why use Vite?

Looking for a lightweight alternative to Webpack? Tired of slow server start times and slow updates as you make changes and rebuild your application? Modern-day JavaScript applications can contain thousands of modules and performance can start to become a concern.

Introducing Vite! If the above sounds like you, Vite could be the solution you need.

Getting Started

For this tutorial, we’ll use Yarn (although Vite can be used with Yarn as well as PNPM).

With NPM, simply run this command to start building your project.

$ npm create vite@latest

After running this command you will be asked to install create-vite (if you haven’t already), what your project name will be, and what framework you want to choose. As of version 4.2.0, Vite supports Vanilla JS, Vue, React, Preact, Lit, Svelte, and many more. You’ll also be prompted to select from a list of variants including JavaScript, TypeScript, JavaScript + SWC, and TypeScript + SWC.

Vite also has an entire community-maintained library of templates from popular frameworks to start your project. Check that out here.

Understanding Vite’s Project Structure

If you look at the file structure of your project you should immediately notice that index.html is in the project’s root directory instead of buried in the public folder. This is because during development, Vite acts as a server, and index.html is the entry point.

Just like static http servers, Vite uses the root directory approach and serves your files directly from there. And in case you were wondering, yes, Vite also supports multi-page apps with multiple .html entry points.

index.html

Browsing this file, you’ll notice it’s pretty simple; a single div with an id of “root,” which should be similar to most other React applications. This div is using a has a type=module, which tells the browser the project is using ES Modules.

App.jsx

This is where all of the React code will be written. App.jsx is the src tag on the div in our index.html file.

Using The Command Line Interface

You can use the vite binary in your npm scripts or run it directly with npx vite. Here are the npm scripts available from the jump with a Vite project:

"dev": "vite", // start dev server, aliases: `vite dev`, `vite serve`
"build": "vite build", // build for production
"preview": "vite preview" // locally preview production build

Now, we’ll need to start the dev server. In your terminal navigate to your project. Run the following command to install NPM.

npm i

Once the installation completes, run the following command to start your local server.

npm run dev

The application should now start up and serve a webpage that looks like this:

Adding Code

Once your local server starts and the default web page loads, you should see a component that says “count is 0.” Click this a few times to bump the counter up – we’re going to make some changes to the app and see that our state will remain the same.

This is an example of HRM (hot module replacement), which is one of the reasons Vite can feel so snappy to work with. Let’s add a button with an alert to the webpage and save our changes.

Create a new div for the button as seen on line 30.

You should see your App render the new button. Because of HRM, the “count is 0” button should still display whatever number it was set to prior to the new notification alert button.

In Conclusion

In this post we went over what Vite is, what you would use it for, how to get started with a new Vite project, starting a local server, and making an edit to an App to see an example of hot module replacement in action.

As you can see, Vite is an extremely lightweight and fast alternative to something like create-react-app, and can have you up and coding in record time. Check out Vite’s website and give it a try!

If you do give it a shot, let me know what you think in the comments below. And if you enjoyed what you read today, head to the Keyhole Dev Blog for many more great posts.