00:00 After running through all of the CLI setup, what I end up with is this, is basically a public folder here, which has a Vite.svg in it, and then a source folder, which has a bunch of different TypeScript files and some CSS files too. We have a counter.ts, which appears to just be setting up some kind of counter thing.

00:18 Then we have a main.tss here, which does a little bit of importing. So this is kind of our main file here. And then we also have an index.html file, which basically says, okay, we are importing here directly from some TypeScript. And Vite does some magic here to basically automatically turn this

00:37 into a JavaScript bundle for you. So this is really, really nice. We basically have a similar setup to what we had before, but it's now basically been modernized and a lot have been taken out of our hands. We also have a package.json file, and a package.json file basically declares dependencies for you.

00:56 So we have TypeScript and Vite actually installed locally. And then we also have some scripts inside here. And the dev script is the one I want to run here. So I'm going to go cd inside this directory, and then I'm going to say pnpm run dev. And what this is going to do is it's going to run the dev scripts, which as you can see,

01:14 ready in 140 milliseconds, extremely fast. I'm going to command click on localhost 5173, and it's going to take me to my running app. You can see here I have Vite and TypeScript. And now if I go back and go into the code here, I'm going to go inside main, and I'm going to say Vite,

01:32 let's say Vite and TypeScript and MAT here. I can save the file, and then it automatically reloads the page here. And now it already says Vite plus TypeScript plus MAT. It's actually doing something even smarter than reloading the page. It's actually preserving a lot of the state inside here too. So if I go count is 14,

01:52 and I remove MAT, I want to check if that works. Oh no, it doesn't actually preserve the state. It would if I was using a front-end framework like React or Vue or something like that. But I think with just vanilla JS, it just does this. So this is already a big upgrade here. And if we want to, we can actually run, let's say I go inside here

02:10 and I can go all the way to my package.json. I can run build TSC and Vite build. So I'm going to run PMPM run build. And what I end up with is actually a built version of my code inside dist as well with a bunch of stuff inside here. So you can see it's more complex

02:29 than what TypeScript was doing. It's adding like a complicated hash onto my built modules here. And it's also creating an index.html for me which references the JavaScript file here. So Vite is just doing something more complicated than what we were doing, but essentially it's just turning TypeScript files

02:49 into JavaScript files and giving you an index.html in order to publish those to the web.