TypeScript in The Build Process 9 exercises
Problem

Use Vite for a Frontend App with TypeScript

We have tsc running in watch mode to automatically compile our TypeScript files to JavaScript that is included in our index.html file.

However, we still need to refresh the browser every time we make a change. We also don't have a way to bundle resources like CSS and images for the web.

To re

Loading exercise

Transcript

00:00 We've now got the makings of a very basic web app here. Very, very basic web app, where we can basically create some stuff in TypeScript and then, by running TSC Watch, that will then flush through to the index.html. But, of course, there's an issue, which is that every time we make a change inside here,

00:18 we still need to refresh our browser on the other side. So even though we've, with the Watch mode, we've said, OK, we no longer need to run TSC every time, we're still going to need to refresh the browser every time we do it. And we're also not really set up to bundle things for the web, really. Bundling for the web is an extremely complex, extremely complex thing,

00:40 and handling CSS, handling images, handling all sorts of stuff, we're just not quite ready for it. So, in order to fix all of these problems, we're going to basically set up a front-end app with VEET. VEET is one of many, many front-end frameworks you could choose, but for this exercise, I figure it's simple enough

00:58 and should make sense to you in terms of what we're trying to do. Your job is to go onto VEET's website, which I'll link below, and basically set up a new VEET app. And that VEET app is going to really just run vanilla JavaScript, and it's going to use TypeScript as well. VEET has really great support for TypeScript,

01:18 and basically it just works out of the box and we don't need to do any additional setup. It will give you a TSConfig by default, and it will also give you some various instructions, installation instructions, all that stuff. So VEET is a really great first step for anyone who's looking to get started in web development.

01:35 So, yeah, your job is to walk through the VEET quick start, create a new vanilla JavaScript and TypeScript app, and I'll see you on the other side, and I'll show you my version also.