Setup & Course Project

[00:00:00]
>> So with that let's get started. The first thing you'll need to set up to get the workshop project is you'll need to install Volta. And if you've taken the TypeScript Fundamentals course or the Intermediate TypeScript course, we'll be working in exactly the same repo that you already have.

[00:00:17]
So you may be able to get away with skipping these steps. So, you install Volta. The purpose of Volta is to make sure we're all using the same Node.js version and Yarn version. If you want to use NVM or some other tooling, we're gonna be using Yarn 3.6.4 and Node 18.18.2, I think.

[00:00:39]
So if you can give yourself some assurance that you're using those versions or if the project happens to work with your yarn and your node that's great. But if you have problems running the project the first thing I would do is install Volta. So these are the installation instructions, be sure to look at the terminal output from this command.

[00:01:02]
And do anything that it tells you to do at the end. Sometimes it asks you to put something in your bashrc or your cshrc kind of depends on what shell you're using. It may ask you to close your terminal and reopen it so that little snippet that you drop into your terminal like startup script will run and everything will be set up.

[00:01:23]
And then you should be able to run volta install node and it should work like that. If that runs successfully you have installed Volta and you really don't need to think about it anymore. It's just gonna automatically find the versions that should be using in this project repo and it'll install them.

[00:01:47]
So then you're gonna want to check out the the git repo and it is on Github. It's github.com/mike-northtypescript-courses. So if you were to go to this page, you could follow the instructions here where you clone it using SSH or HTTPS. If you have problems with SSH keys, you get an error like that.

[00:02:15]
Just clone it using HTTPS to be git clone and then this URL. Then you'll enter that folder and you'll run yarn so just like So if I just cloned it. You run yarn and you'll know you're using a modern version of yarn if you see little codes like this at the beginning of each line.

[00:02:45]
If you don't see that, you're probably using a 1.x version of yarn which is very, very different than modern versions of yarn. It's literally a separate code base. It's a totally different project. Some of the commands have parody but modern yarn doesn't have yarn update, for example. But it has a whole bunch of other cool stuff, things that will be important for us in this course.

[00:03:11]
So you should be able to do this. 3.6.4, 18.18.2 that's my node and my yarn version. Dimitar in chat I see like it doesn't work, Volta doesn't work in WSL Ubuntu. I'm surprised by that. I've used Volta there and it seems to work well for me. It's possible I have something already installed that makes it work.

[00:03:46]
But, yeah modern versions of node and yarn and it should work. The key thing I'm gonna insist on really, you shouldn't be sensitive to the node version. As long as you're using a version newer than 18 you should be fine. Make sure this doesn't begin with a one.

[00:04:03]
If this begins with a one, you're gonna have a bad time. If this begins with the three, you will see what I see, right? And you'll get some benefit of yarn plugins which are gonna do some cool stuff for us, but you can survive without them. So while y'all are working on that, let's look at the project we're gonna be building.

[00:04:25]
It's a little Slack app. So Slack who here is anyone unfamiliar with Slack in the classroom? Of course not, like it's very common thing that people use. For thinking about domain modeling what are the objects that are important for a Slack app? You've got like a message, a channel, a user.

[00:04:46]
You've got a team which contains many channels, teams on the left channels here. Messages here, this is a user up top, this like that's the username. So we're gonna be modeling all of those things and creating interfaces for them and sort of threading them through an app. Which currently is sort of just JavaScript style throwing variables through and hoping that the fields are there will tighten things up.

[00:05:13]
And worth noting just to keep the project simple like some stuff here doesn't work. You may be able to create messages, I'm not sure, but that's not important for the course. So you can find this project in the course repo in packages, chat. So packages/chat that's where you'll find the source code for the slack project.

[00:05:42]
So we'll mostly be working in there and you'll see a file structure that kind of looks like this, right? This is a reasonably well-organized JavaScript project. We have a source folder that contains all of our source code, an index.js entry point, a folder for low-level utilities. These are functions that format dates, things like that.

[00:06:05]
We have a UI folder for React components and then we have a data layer, which effectively the little functions which when invoked go and fetch something from an API. And that API is gonna be running on your machine. There's within this project at the root level there's it's kind of a cool little setup.

[00:06:26]
There's a db.json file. This is your database in here. It's like every single slack channel, every single slack message. So this is a free standing project where you're running your own database back end. We're not gonna get into those too much but they are there. And of course we're gonna be focusing mostly on the frontend.

[00:06:45]
Yeah, sorry so you're going through this. There's the server and the database. So there's also an API examples file which is kind of interesting to look at. So I'm here in my chat folder and I have this API_EXAMPLES.http file. This here is just a text file but you may notice I've got this little send request thing running on top.

[00:07:11]
This is coming from REST Client. So if you're using VS Code, you'll be fine if you're not using VS Code, like if you're a diehard Vim user. Respects you can you can learn things that I can't learn. So, but this is what's generating these little send request things.

[00:07:36]
And if I go to packages/chat and I run this projec we're running yarn dev. Is after I've run yarn to install all the other dependencies. I shouldn't be able to click this, oops, all right maybe it's not working. Well it's not important but this is a great way to have API documentation here.

[00:08:00]
Maybe I'm running on a different port at this point but this is sort of like a little mini API doc, just as a text file. This is it's almost like Postman where you're making a request to an API of sorts. Okay, with that let's get hands on let's start building a TypeScript library from scratch, zero to one is what I call this.

[00:08:29]
>> This Volta thing's pretty cool.
>> It is written in Rust, and the cool thing about it is it will install if you like, grab a project and I can show you where the Volta stuff is in the package JSON. It's down here so Volta finds this and you don't have either of these versions and you just run like yarn install.

[00:08:55]
It will download yarn 3.6.4 on the fly and then proceed with invoking the command that you want it.
>> That's so cool.
>> No middle step so especially for things like GitHub Actions there's a Volta GitHub Action there. You can sort of just toss Volta in there and then all you need to worry about is this little bit in your package.json and it will work properly.

[00:09:23]
There's no separate line where you're like go and obtain this thing and set it up and verify that the that's, that versions puts up this thing.
>> Yeah, that's huge for Github Actions.
>> It is huge. I have this testing against multiple node versions which is makes it really easy.

[00:09:39]
And then the Volta action you can even specify which node you want. So if you have like a matrix of node compatibility testing you could say like do 18 and 20. You can check out the GitHub Actions on this workshop project if you want to see how that works.

[00:09:55]
I also have it testing against a range of TypeScript compiler versions but that's not using Volta. Volta is just for these kind of toolchain type things. So I'm just running to test TypeScript, I'm running like yarnadd_d across the whole workspace, the whole repo. And that's what ends up bumping TypeScript up or down so I can make sure it's not going to break with a new versions of TypeScript but I love it.

[00:10:26]
It's written in Rust so it's super snappy. It's like really, really fast. Doesn't really add much overhead at all on top of what you'd expect to happen normally.