1. What is Vite?

Vite (French for “fast”) is a modern frontend build tool. It provides two things most web projects need:

• an extremely fast development server, with instant startup and near-instant hot module reload (changes show up in the browser almost immediately, without a full page reload);
• an optimized production build command, which bundles and minifies your code for deployment.

Manually configuring a compiler, a bundler, a dev server, and TypeScript support from scratch is a lot of tedious setup. Vite ships with sensible defaults for all of this out of the box, which is why it has become one of the most popular ways to start a new frontend (or general TypeScript) project.

2. Scaffolding a project from a template

Vite can generate a ready-to-use project structure from a template, so you don’t start from an empty folder:

npm init vite@latest vite_project -- --template vanilla-ts

Let’s break this command down:

• npm init vite@latest fetches and runs the latest version of Vite’s project-creation tool (via create-vite) without installing anything globally.
• vite_project is the name of the folder that will be created for your new project.
• -- --template vanilla-ts passes extra arguments through npm init to the underlying tool: --template vanilla-ts tells it to use the vanilla TypeScript template — plain TypeScript with no UI framework attached, ideal for learning the language itself.

Other common templates follow the same pattern, for example react-ts, vue-ts, or svelte-ts — swap vanilla-ts for any of these if you want a specific framework instead.

3. Entering and running the project

cd vite_project

Move into the freshly generated folder. Vite has already created a working project structure for you, roughly:

vite_project/
├── index.html
├── package.json
├── tsconfig.json
├── src/
│   ├── main.ts
│   └── style.css
└── public/

From here, the usual flow is:

npm install   # install the project's dependencies (Vite itself, etc.)
npm run dev   # start the development server

npm run dev starts Vite’s dev server (typically at http://localhost:5173) and watches your files: every time you save, the browser updates almost instantly.

When you’re ready to ship:

npm run build

This produces an optimized, minified bundle of plain JavaScript/HTML/CSS in a dist/ folder, ready to be deployed to any static hosting.

4. Why Vite over a manual tsc setup

Compare this to the manual workflow from the previous two lessons (npm init, install typescript, tsc --init, then tsc + node by hand):

• Vite gives you an HTML entry point, a dev server, hot reload, and a production bundler for free.
• A manual tsc setup only compiles TypeScript to JavaScript — it does not bundle assets, serve HTML, or optimize a build for the browser.
• For pure Node.js scripts/back-end code, the manual setup (or tsx) is often simpler and lighter. For anything that runs in a browser, Vite (or a similar bundler) is usually the better starting point.

5. Further reading

• Vite — official guide
• TypeScript Handbook
• TypeScript Playground

6. Quiz

What is Vite primarily used for?

a: Running unit tests onlyb: Providing a fast dev server and an optimized production build for frontend projectsc: Replacing npm as a package managerd: Managing databases

In `npm init vite@latest vite_project -- --template vanilla-ts`, what does `vanilla-ts` refer to?

a: The name of the output folderb: The Vite version to installc: The project template to scaffold (plain TypeScript, no framework)d: A Node.js runtime flag

What is the purpose of the `--` before `--template` in the init command?

a: It comments out the rest of the lineb: It separates npm's own flags from arguments meant for the underlying toolc: It forces a dry rund: It has no effect and can be omitted

Which command starts Vite's development server?

a: npm run buildb: npm run devc: npx tscd: npm init vite

What does `npm run build` produce in a Vite project?

a: A new tsconfig.jsonb: An optimized, bundled output in a dist folderc: A fresh node_modules folderd: A new project template

Why might you choose a manual tsc setup instead of Vite?

a: Because tsc supports more programming languagesb: Because Vite cannot be installed via npmc: Because for plain Node.js scripts with no browser/HTML involved, a bundler and dev server are unnecessary overheadd: Because tsc produces smaller node_modules folders

Controlla Risposte

7. Exercises

Scenario: You want to build a small interactive TypeScript demo that runs in the browser, with live reload while you develop it.

Task:

1. Scaffold a new project with npm init vite@latest my-demo -- --template vanilla-ts.
2. cd into the folder, run npm install, then npm run dev, and open the printed local URL in your browser.
3. Edit src/main.ts to change some text or add a console.log, save, and observe how quickly the browser updates.
4. Run npm run build and inspect the generated dist/ folder’s contents.
5. Compare this workflow to the manual tsc/node workflow from the previous lesson — write down two concrete differences you noticed.

Learning objective: understand what a bundler/dev-server tool like Vite adds on top of the raw TypeScript compiler, and get hands-on with scaffolding a real project from a template.

Prenota una lezione