Progressive Web Applications and Offline Challenge 0: Solution

Transcript from the "Challenge 0: Solution" Lesson

[00:00:00]
>> Mike North: I'm actually gonna go through and make sure we're all set up here. I'm gonna sort of explain the set up process bit by bit. Some of this is covered in the README. But just in case some people are having issues, I wanna make sure we're not leaving anyone out in the cold.

[00:00:20]
>> Mike North: All right, so the first thing we need,let me clear everything out. So I can do npm run clean, and that's gonna get rid of everything. And you'll see here, if we had looked before I had a dist folder here, I still do. So the only thing that's left is a couple of certs, I can get rid of those in fact.

[00:00:46]
>> Mike North: All right, great. So there's nothing in my desk folder, the folder exists, that's it. The first thing we wanna do is we wanna generate some certificates. And there are some shortcuts that I have in the README. But I'm gonna show you how to actually keep these commands only using node in case you're having some issue with those scripts.

[00:01:11] So the main file that's sort of the entry point for the cli stuff we're working with is here. Server/cli/cli.js, so we wanna run it like this we can say, node and then follow it with that file name. And what we get out is this sort of this little documentation here and you can see we've got a couple commands we can run.

[00:01:37] We've got help as one of those commands, which will just do what you're seeing on the screen, here. But I'm interested in generating some certificates, so I'm just gonna add that as an argument to the end here. And in my dist folder, [SOUND] let me make sure that's working properly.

[00:02:01]
>> Mike North: Here they are. So here my certificates that were just generated. And now, I will convince you that this is really happening. Delete, Delete, and let's generate them again. There we go, okay, so you may need certificates when working with your web application. And this is, for many developers, the first time they're dealing with certificate generation.

[00:02:30] You have to be very, very, very careful about this. If you trust some strange certificate, like someone hands you a certificate authority, and they say like, just use this for development purposes. We're gonna all share to the certificate authority. Whoever has that private key they can observe and tamper with any HTTPS traffic that you send from your machine.

[00:02:55] So if you trust a certificate authority you're handing over the keys for all of your privacy, and all of your security, including your online banking. So be really careful about that. The way this is working there's a piece of software here called devcert, that generates a certificate of authority on each of your machines.

[00:03:13] Nobody has that key except you, we're not sharing anything at all. And then, what happens is any app that needs a certificate, they'll generate their own like sign by that authority. And in this case it's one that's gonna expire in 14 days, and then he would just have to generate a new one.

[00:03:29] But it's sort like an expiration date, that means, even after this workshop is done, if someone gets it a year from now, it is useless. So that's what we've got here, we're generating the certificates. And I'm just gonna look at my commands here, to make sure I'm not skipping any steps.

[00:03:49] So we're gonna run this prepvapid command as well. Vapid-keys are necessary for web push. So if you wanted to just copy the right hand side of line 24 here in package JSON run that. You should see in your private folder you have this vapid.json thing here. I'm not going to click on it because that is, there is something secret in there and it is in JSON.

[00:04:17] You would see my private key, you would be able to send my machine, push notifications. The next thing we're gonna do, so we've already generated the certs here, we're going to run this command here. Essentially, what that's doing is clearing out any certificates that were there before. So you wanna come back in 14 days, the certificate's invalid, the browser is giving you all sorts of warnings.

[00:04:43] You just want a clean slate, so you could just do that. So we're getting rid of dist, get ourselves a clean slate. And then finally, all we're doing is copying these certificates and the dist. It seems like a couple little backflips here, but one of the limitations of our HTTP2 server is we basically can point it at a folder.

[00:05:02] And it's gonna look for a key and a certificate of a particular name, and we have to set things up just right, so the stars align perfectly so that it works. So now we finished this prepcerts step, and I also wanna get on video. I'm using node 7.10 not 7.1.0, it is 7.10.0, so there are some features that were using their that require you to have a relatively recent version of node.

[00:05:39] At least this recent you may be able to get away with with an older version. And then we are going to, I just wanna start the UI, right? So there are two components in this project here. You can see we've got a client folder, so that's our little React App.

[00:05:58] And our server folder down here, that's a little node.js, JSON API, and we've even got a little database here. But let's just make sure that this, oops, let's make sure that the UI starts up. We'll just do npm run watch, so this does not start the API, okay?

[00:06:21] So this looks good, and if I were to then visit this URL.
>> Mike North: I should see something that looks like the app. This is exactly what you should be seeing right now. Ajax requests are failing at the moment, our API is not there to satisfy them. But this is how you know that the webpack and the React side of things are operating as usual.

[00:06:43] And you also may notice that I currently have to trust this certificate. Now if you are getting a certificate warning here, there are a couple of ways to get buy it, like most browsers offer means to ignore that specific certificate. If I were to open it up in Safari here, I can actually click on this lock, show the certificate, and I mean sorry, let me make it a little bit easier for people to see.

[00:07:17] Display,
>> Mike North: Scaled perfect,
>> Mike North: So there's this Trust area here, and if I did not trust it, I would have the ability to go ahead, and opt in or opt out of that. So it's already tested for all users. I'm using system default here, but on a Mac you should be able to visit this and sort of opt in.

[00:07:49] This is that certificate authority that you've signed and trusted. And this is the disposable certificate, that is a, it looks like I have my expiration date wrong, but we will fix that later on. All right, so now that we know that that works,
>> Mike North: Let's try to run the whole thing.

[00:08:11] And the way we'll run the whole thing is, going back to that cli command here. And you may be able to just do ./run serve, right? That will work for most of you. If that doesn't work, if I haven't done my Windows due diligence properly, we'll just go back to that cli thing here.

[00:08:32] And the command we're gonna run is not gen-certs, it's going to be serve. And you should see a bunch of stuff start up. At the top we can see we're serving the web client in that mode over localhost 3000. And here we're serving the API over localhost 3100.

[00:08:50] We're actually using the same certificate for both. Now if we look at our app you should see something that looks like this. So the idea there was the README should be sufficient for most developers, particularly if you use a Mac. Going through all of this should have gotten you to where you need to go.

[00:09:08] However, if you're using a Windows machine like the step by step process, we just went through. If I've screwed things up that requires only node doesn't require any shell scripts or running too much through npm script runner. So that step by step process should've helped you assemble what you need.

[00:09:29] And in the end, we've got now in the dist folder the certificates we need. And the last thing I wanna do is we can kill this, and I wanna build the app, npm run build:prod. So this is gonna take a little while, because it's heavily optimizing this thing.

[00:09:47] One of the great benefits of webpack, and there are some great Frontend Masters Webpack courses that are worth checking out. It's actually shaking away any code that we don't end up using. So it's trying to any module that we haven't explicitly imported, or imported something that need that it's going to, our users don't have to download that.

[00:10:08] So now if I do,
>> Mike North: So if we look at the dist folder here, and we look at this app file, which is,
>> Mike North: Right here, it's this gzipped 1. We can see, there's our ADK that we're starting with, right there. So this is the non-gzipped size, 297.

[00:10:37] And then ADK here, and that might be a shocking shrink there, gzipped it works really well for ridiculously repetitive strings. And all of our API calls like document.createElement, or React createClass. All of that gets compressed really, really, really nicely. We have a nice degree of repetition in this code.

[00:11:00] So ADK that's our starting point. And I do wanna do, I promise this is really the last thing.
>> Mike North: We'll add this environment variable at the beginning. This is going to, once the build is complete, open up a little web based tool where we can explore what is in this ADK?

[00:11:21] Where is that coming from? So if we look at it here, we can hover over, it looks like not responsive text here. We can hover over the various sections of this tree visualization, and you wanna look at the gzipped size, which in the tool tip is the bottom most level there.

[00:11:44] So you can see, here's our client, this is our application code on the right. We've got about 8.3 kilabytes of that. Stuff that's coming from node modules accounts for the rest, about 68 kilobytes. And the big culprits here are react-dom, so that's 35 kilobytes. The qrcode-reader, and we're gonna start working with qrcodes a little bit later today.

[00:12:08] That is the really expensive thing we're doing on the client. And then we've got couple of other libraries that are much smaller here. I want us to keep an eye on this, because one of our goals here is to try to make it. So if the user's not skinny qrcode they shouldn't have to download that every time they go and visit the app.

[00:12:27] We wanna sort of make that happen at the last minute. If you're using a Mac this probably went pretty smoothly. If you're using Windows the biggest tip I can give you is, Windows 10 you want to install the Linux subsystem for Windows. It is a recent advancement in the past year or so.

[00:12:44] Essentially, it installs pieces of Ubuntu which is a popular Linux distribution, it installs them side by side with your Windows OS. The end result is you can run a true bash environment inside Windows without having to worry about Cygwin or running a virtual machine. This makes it so your set-up process is much faster.

[00:13:12] And as we encounter little setup issues, we will add them to the README, and a troubleshooting section.