What it is
Vite is a front-end build tool created by Evan You, who also created Vue. In development it serves source files to the browser as native ES modules, so the dev server starts quickly and edits show up almost immediately without a full rebuild. For production it bundles and optimizes the code with Rollup into a folder of static files.
It works with React, Vue, Svelte and plain JavaScript, and handles TypeScript, CSS and static assets out of the box. For a single-page app it has largely replaced older bundler setups that needed long configuration files, and its plugin system covers most of the cases that still need something extra.
How I use it
- Lend Pilot's front end is React 18 built with Vite.
- The built app ships with the Node and Express API and PostgreSQL in Docker Compose on EC2, behind nginx.
- Each Lend Pilot deploy syncs, rebuilds, migrates and runs a smoke suite against production.
Vite is the right tool for a single-page React app that does not need server rendering. I use it because the dev loop is quick and the production build is a folder of static files that can go anywhere, whether behind nginx or on S3 and CloudFront.
Questions
Vite or Next.js?
Vite for a single-page app behind a login, like Lend Pilot. Next.js when a site benefits from pages built ahead of time, like the Rail & Sail school site.
Where does a Vite app run?
The production build is static files. Lend Pilot's is served alongside its API in Docker Compose behind nginx on EC2.