Setting up a Project with Vite

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

Mettiti alla prova

0/6 risposte

1. What is Vite primarily used for?

   ARunning unit tests onlyBProviding a fast dev server and an optimized production build for frontend projectsCReplacing npm as a package managerDManaging databases

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

   AThe name of the output folderBThe Vite version to installCThe project template to scaffold (plain TypeScript, no framework)DA Node.js runtime flag

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

   AIt comments out the rest of the lineBIt separates npm's own flags from arguments meant for the underlying toolCIt forces a dry runDIt has no effect and can be omitted

4. Which command starts Vite's development server?

   Anpm run buildBnpm run devCnpx tscDnpm init vite

5. What does npm run build produce in a Vite project?

   AA new tsconfig.jsonBAn optimized, bundled output in a dist folderCA fresh node_modules folderDA new project template

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

   ABecause tsc supports more programming languagesBBecause Vite cannot be installed via npmCBecause for plain Node.js scripts with no browser/HTML involved, a bundler and dev server are unnecessary overheadDBecause tsc produces smaller node_modules folders

Controlla le 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.