This lesson's interactive features are locked, please to keep using them

Vanilla Vite

Okay we've built our little TypeScript script, and used tsc to compile it manually. But let's scrap all that and scaffold a front-end project using Vite.

It's quite rare these days to build a front-end application without some sort of build tool. I'm not saying you can't – we just did – I'm just saying I don't see it often in the wild. Especially considering most front-end frameworks (React, Vue, Svelte, etc.) have their own build tools.

What Is Vite?

Vite is a new(ish) build tool that focuses on speed and simplicity. It does a few key things that make it great for many projects, and even vanilla TypeScript apps:

Fast: Vite uses the Golang-powered esbuild to do heavy lifting, which is partially why it's so fast. It also uses Rollup under the hood for production builds.
Simple: Vite is simple to use and configure, at least for a JS/TS tool (look, we're comparing it to Webpack here, so it's all relative).
Server: Vite has a built-in development server that serves your files and handles hot module replacement (HMR) for you.
Compiler: Vite compiles your code in development on the fly, so you don't have to manually rebuild each time you make a change.

Assignment

Install Vite

npm i -D vite

Commit all your old code and delete it, even the tsconfig.json and package.json files. We won't need it where we're going, we want a clean slate.
Create a new Vite project using the vanilla TypeScript template:

npm create vite@latest . -- --template vanilla-ts

Install the dependencies:

npm i

Run the development server and take a look at the simple webpage it is serving:

npm run dev

Take a look at the package.json. Notice that it has vite and typescript as dependencies now. The dev command we ran simply runs tsc to compile your code and vite to serve it, all in one step.

Press Ctrl+C in the terminal to stop the dev server when you're done.

Notice that when you click the "count is x" button in the browser, the count increments.
Update src/counter.ts to increment it by 10 instead of 1 each time it's clicked.

Notice that when you update the code and save the file, Vite will automatically recompile your code and update the browser for you!

Run and submit the CLI tests.