Setting Up

[00:00:00]
>> Mike North: So the best way to get to know an editor is to actually work within the context of a real project. And we're gonna be using a repurposed version of the same app that was part of the PWA course. If you took progressive web fundamentals, also on front-end masters, this will look familiar to you.

[00:00:21]
It has been stripped down and simplified so that it only goes as far as we need it to go. The general idea here is you can add items to a shopping cart, and someone's gonna do your grocery for you. So there's a small database, a small Node.js RESTful API, and then a React UI, like a browser based app on top of that.

[00:00:47]
So that's all within this project, and when you run npm start, that is all starting out. In terms of the set of technologies we're using, I'm pleased to say we're basically using the new releases of everything. The React 16 beta, that's what we're using today. Webpack 3 to assemble our code together and to make our browser distributable app.

[00:01:13]
We're running TypeScript 2.5, which came out within the last month. And then finally, on our back-end I've gone through the trouble of taking what use to be written with Express, which is a very common library to use for rendering JSON and HTML from Node.js app. I've chosen to use Koa instead because Koa's a little bit more complicated, and I'll explain why I've chosen to do it this way so.

[00:01:43]
So Express, it's been around for a long time and it works in a way that developers expect it to work, right? You get callbacks and you can stack a bunch of middlewares together, and nothing should surprise developers, even if they haven't been keeping up with the latest advances in the JavaScript language standard.

[00:02:08]
One of the cool things about Koa is it is based around generator functions and async functions. So this would throw most debuggers for a little bit of a loop, this would be a little confusing for most debuggers. Simply because the code has to be transformed into something else and then debugged with the source maps.

[00:02:32]
So I've added this complexity simply to show you that VS Code, when you start debugging this back-end, it will work exactly as you would expect. It works exactly as you would hope as opposed to kicking out into this world of the hack for the language feature and having to step through that hack as opposed to the code that you wrote.

[00:02:54]
You stay entirely in the world of code that you wrote. So I've introduced complexity to demonstrate that it can be handled with grace when you use Visual Studio Code. So to be clear, I don't think there is really anything that I'm showing you today where we'd need all of these completely bleeding edge versions of these various libraries.

[00:03:21]
This should work with Webpack 2, this should work with all the versions of React. I am just trying to show what is possible with the absolute, bleeding edge, most modern stuff. The only thing you'll have to make sure you are completely up to date with is the editor itself.

[00:03:38]
You should have the most recent release of Visual Studio Code. And you can just run this check for updates, this right here, and it should tell you there are no updates currently available. So you may need to upgrade, considering that last week the new version was released. So we will be using the absolute most modern version.

[00:04:01]
So with that, you should've gone through the read me to get set up. We're gonna kind of get set up together just to make sure everyone's on the same page. The first thing we're gonna do is open up our integrated terminal. So there is a terminal built into Visual Studio Code.

[00:04:19]
And I tend to use a hot key to get into it. And that on a Mac is control and then the backtick button. So if I hit that, I will see that this opens up here. So that is another key binding that should make your top ten list.

[00:04:36]
Control+backtick, it’s sort of a nice like left hand thing, I don’t know how to describe it, but it is a comfortable reflex to memorize. So in here, this will actually run whatever our default terminal is. And if you wanted to, you could configure, you could say, I wanna run ZSH whenever I'm opening up this integrated terminal.

[00:04:59]
Despite the fact that by default, like with terminal.app or something, it is something else. I don't really see the point of doing that, I mean, unless you have a really specific purpose. You should probably keep everything the same. So you have the environment variables, the same everything, it just happens to be embedded in here.

[00:05:19]
Now, we can run node, oops, node --version, and you should see something like this, a version greater than 8. If you have a version older than 8, we may run into some problems. So make sure you have it up to date. So the next thing you need is to install a library called SQLite3.

[00:05:39]
This is because we have a database in this project, it's in the DB folder, and you're going to want to make sure that you can read this, right? It’s an embedded database, just treat it, it’s a file basically that has multiple tables in it. You can, on OS X, use Homebrew to install this, and you should end up with this, a recent version.

[00:06:05]
I don’t know which version is required for what we’re working with today, but nothing I'm doing here is crazy compared to what I was doing with SQLite five or six years ago. So it should just work right out of the box. Looks like they got some upgrades, there's a new version here that just got released.

[00:06:29]
We're not gonna install that because I'm not going to tempt fate here. But you can see I was using 3.16 before. Apparently, I've been testing with 3.19 recently, and this just came out. Any of those should work. If you're using Windows, go to the main read me for this project, there's a link you can go to, and there's a package, like a Windows Installer package you can install.

[00:06:52]
Just get the latest official release, if you don't have it. At the end, you should be able to run SQLite3 --version, [SOUND], and you should get something reasonable out like this.
>> Mike North: So if you so choose, you may use Yarn instead of npm, this is an alternative package manager.

[00:07:18]
That can be installed with brew, they just hit their 1.0 release, I think I saw that 1.01 already landed, but you should be able to see something like this. Yes?
>> Speaker 2: I got a couple of questions in chat.
>> Mike North: Okay.
>> Speaker 2: Any reason to run code inside as a primary?

[00:07:38]
>> Mike North: No, we shouldn't be doing anything that requires that beta test build.
>> Speaker 2: Okay, and then another one was, guy uses VS Code a bit and have it installed on a couple of computers. On one control plus it works, but on my other, that opens a new console outside of my VS Code, any suggestions?

[00:07:59]
>> Mike North: So control, control+backtick works, and on another it opens a new console outside of VS code. Yeah, I've never seen that before. I'm happy to dig a little bit deeper and see what may be going on there. But for me, it's control+backtick, and you can look, if that key button doesn't work for you, look in the View tab, and here's the integrate terminal option here.

[00:08:25]
If you look to the right, you should see something there that should correspond to the correct keystroke. There's probably a setting, and we can explore that when we get into settings that might say like, well, I don't wish to use the integrated terminal, take me out into whatever my default terminal application is outside of code.

[00:08:47]
All right, so once we've done that, you should clone the project, and if you're looking at slides on your laptop, you've already done that. It's the same project that these files we're looking at are in. You're gonna run Yarn to to install all of the dependencies, sorry. And then npm start should just work,

[00:09:08]
>> Mike North: That should open up a new app on local host 3000.
>> Mike North: And interesting, I've got a stray file in there, let me just delete that.
>> Mike North: Okay, so you should see webpack: Compiled successfully. And then if we go to localhost:3000, you should see something that looks like this.

[00:09:38]
There may be one last step there that you'll have to do. If you get an error about like can't find the database, you wanna make sure that in your database folder, just copy this master file, master.sqlite to development.sqlite. The point of this is I've given you something that's been checked into the repository, that's sort of a clean start.

[00:10:06]
And if you run into a situation where somehow we messed the data up, you can just blow your development.sqlite away and you can point to master. Or you can recopied master and create yourself a new database. But in the end, you should have something that looks like this.

[00:10:23]
Maybe without this little 8 up here, that's my data in my database. But certainly you should start seeing images on the screen that look like this. And that should indicate you started up.
>> Mike North: So we're just gonna leave that running. We'll close this here, it just closes the panel, our terminal is still running.