Vite

Vite is a next generation build tool for javascript applications. It can be used as an asset bundler and development server. It can be paired with frameworks like vue or react, where it will take care of bundling assets.

The reason for using Vite is that it handles a lot of complex things quickly. It uses esbuild, which is written Go, and runs much faster than node based bundlers like webpack. The hot module reloader only rebuilds the necessary parts when files change, so development is much smoother.

Get started

npm create vite@latest projectname

cd projectname
npm install
npm run dev

The vite server will spin up at http://localhost:5173/. If you make a change to index.html, it will instantly be updated in the browser.

When you are ready to deploy, build the application. This will compile everything you need into the /dist directory.

npm run build

To view the final build, run vite preview for a basic web server.

npm run preview

Now you can deploy the application code as needed for your hosting.

Modes

By default, vite will create an SPA, with index.html as the entry point. You can do a multi page application by creating additional index.html files in other directories.

In library mode (set build.lib config option), vite will compile as a js module, with exports for bundled code to use in your application.

Vite can run as an SSR server as well, with integration with front end frameworks.