Vite

”Next Generation Frontend Tooling”

Vite has two main parts:

1. A dev server to run code in a non-production environment
   • runs local webserver
   • watches TypeScript source files and re-transpiles as needed
   • uses optimizations like Hot Module Replacement (HMR).
2. A build command to bundle code for deployment to production
   • uses rollup to optimize code and assets

In CS349 - User Interfaces, we only use the dev server part.

Create a Vite Project

• Vite has templates to setup a project for different frameworks

Create project with Vanilla TypeScript template (for example)

npm create vite@latest

• npm create initializes a project directory using a “create” package
• vite in this context means the create-vite package
• @latest just means “use latest version” of create-vite package

Or provide the project name and template directly:

npm create vite@latest <project> -- --template vanilla-ts

Go under the newly created project folder and run the following

npm install

Run Vite dev server

npm run dev

Examine Vite project structure

• index.html, especially <script type = "module"...
• src/ directory

Show how to trim down to minimal project:

• simplify index.html
• remove CSS file
• remove vite SVG
• etc…