Vite - A development environment that can finally catch up with you.
There are many other tools out there that do the same thing. For example, we have WebPack, but what makes Vite different?
Well Vite was created by Evan Yu who also created Vue.js as a way to both simplify and speed up the build process.
The problem is that this process becomes increasingly slow as the app adds more code and dependencies.
In 2015, EcmaScript modules were introduced and by 2020 it had wide browser support allowing developers to import and export code from different files in the browser. Vite leverages native ES modules in the browser to load your code instantly no matter how large the app is it also supports hot module replacement for an extremely fast feedback loop during development. When building for production, it uses to Rollup under the hood so you don't have to worry about configuring.
It's an opinionated tool that provides conventions that work out of the box for the majority of developers.
Before you get started with Vite, make sure to have the following:
Node.js version 12.2.0+ installed on your machine. You can install the latest version of Node.js with How To Install Node.js.
Yarn package manager version 1.22.0+ installed on your machine and familiarity with Yarn workflows. Install Yarn with Step 1 in How To Install and Use the Yarn Package Manager for Node.js.
A foundational knowledge of React, which you can learn with the How To Code in React series.
A mobile phone connected to the same Wifi network as your computer to preview your app from mobile.
To get started with Vite, run:
yarn create vite from the command line and then follow the prompts. You can choose a starter project with your favourite front-end framework.
For React.JS you can type
yarn create vite your-app-name --template react and you Vite will automa generate the React boilerplate for your project.
You'll also notice the project comes with a vite.config.ts file. It has a plug-in ecosystem that can extend it with additional features and you can also manually override the Rollup defaults when necessary.
There are some cool plugins out there like vite-ssr that can do server-side rendering like Next.js.
Now to serve the application locally run
npm run dev.
Even if you install a bunch of big dependencies like lodash and moment, the time to run the dev server does not change.
In this case, it also makes typescript about 20 to 30 times faster because it skips type checking and uses ES build to transpile your code.
Now as you're developing your app, you might change the state of it in the UI and then realize that some of the code needs to change when you modify the source code the changes will be reflected instantly without losing the state of the application. That's what we call hot module replacement.
npm build to build the app for production.