# Vite — Frontend Tooling Vite (Veet) is a Javascript build tool which simplifies the way we build and develop Frontend applications. ![Quick Read](https://cdn.hashnode.com/res/hashnode/image/upload/v1698054866215/0818b53d-3706-4f3b-9c69-2fd3310590d1.gif align="left") ### 1\. What will Vite do? Vite does 2 things * Serve your code locally during development * Bundle your Javascript, CSS and other assets together for production There are many other tools out there to do the same thing such as * Webpack — [https://webpack.js.org/](https://webpack.js.org/) * Rollup — [https://rollupjs.org/guide/en/](https://rollupjs.org/guide/en/) * Parcel — [https://parceljs.org/](https://parceljs.org/) * Snowpack — [https://www.snowpack.dev/](https://www.snowpack.dev/) ### 2\. So what’s different with Vite? It was created by Evan You who created [Vue.js](https://vuejs.org/) on 2021 as a way to simplify and speed up the build process. Long ago web developers had no native way to combine javascript files together in a modular way. This lets tools like Webpack and Rollup concatenate multiple files together into a single bundle for the browser. ![Bundling](https://cdn.hashnode.com/res/hashnode/image/upload/v1698054868218/ddfd3738-5a17-448a-80e5-f32e1648d76f.png align="left") The problem is this process becomes increasingly slow as the app adds more code and dependencies. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698054870137/d5820c3d-cfeb-4652-9fdf-d6f7faa8debc.png align="left") In 2015, ECMAScript modules were introduced and by 2020 it had wide browser support allowing developers to import and export files from multiple files in the browser. Vite leverages the native ES modules in the browser to load your code instantly no matter how large it is. It also supports HMR(Hot Module Replacement) for an extremely fast feedback loop during development. When building for the production it uses Rollup under the hood. ### 3\. Hot Module Replacement in Vite(HMR) If you see the below example the state count has a value of 11 and there are 2 logos at the top. Now if I remove one of the logos and save the file it will replace that particular part rather than re-rendering the entire component. That’s a simple example of HMR ![Hot Module Replacement(HMR)](https://cdn.hashnode.com/res/hashnode/image/upload/v1698054871874/a7ce97bb-4aa2-4c11-abc6-40173d30014e.png align="left") ### 4\. Get Started with Vite To get started run the following command npm init vite application-name which will ask you to choose the framework ![Choosing Framework](https://cdn.hashnode.com/res/hashnode/image/upload/v1698054875579/de149e91-546b-4f6f-a2a9-a77c34f6a455.png align="left") It will create a project with vite.config.js in the project folder where you can make the tweaks in the configurations ![Vite.config.ts](https://cdn.hashnode.com/res/hashnode/image/upload/v1698054877103/a42197ae-4935-4fab-baa6-edc0ae03c025.png align="left") To serve the application locally run the following command `npm run dev` ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698054879672/fe2835ba-e0b1-4a3f-a9f9-66d95d4eadeb.png align="left") Build time of the React application using Vite It runs your application (React) within 387ms. once the application is running rather than showing the single javascript file it imports the actual source code ![Application with source code](https://cdn.hashnode.com/res/hashnode/image/upload/v1698054881489/688130d4-ee89-43b9-bacf-13e66ae68789.png align="left") ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698054883349/fc2e3b03-8afe-481e-b6e5-c1e1718caff3.png align="left") To build the application for production use the following command `npm run build` which will do the code optimization like code-splitting, Dynamic imports and CSS. ### Vite Ecosystem Checkout the Vite Ecosystem post by Patak [**The Vite Ecosystem** \*One of the strongest points in Vite is the ecosystem around it. Vite took responsibilities from frameworks ( common web…\*patak.dev](https://patak.dev/vite/ecosystem.html) [**Vite** *Next Generation Frontend Tooling*vitejs.dev](https://vitejs.dev/) ### Congratulations!!! In this post, we have seen about Vite and how it is different from other bundlers. Will catch you up in a new post till then Happy Learning!!! :)