Full Stack for Front-End Engineers, v2 Chat Bot: Solution

[00:00:00]
>> Jem Young: All right, who got their chatbot working? There were some steps we had to go through that would have seemed unusual. We did them all already at some point other than the NGINX portion. We did them all, but it's hard to remember this because you've learned many, many hours of knowledge.

[00:00:16] And you've learned Kubernetes to TCP. We've learned everywhere in between. So when it comes back down to actual programming, it's a little easy to get tripped up. So let's walk through exactly how we hook this up and how we hooked up web sockets to our website. Hopefully, some of you created some funny chatbot responses.

[00:00:34] I didn't quite get the chance, but I had some good ideas. Maybe I'll implement them in the Git repo later, or feel free to open a PR. So the first thing we wanna do,
>> Jem Young: And I'm just gonna roll back through my bash history to show you what I did.

[00:00:54]
>> Jem Young: The first thing I did was I backed up to the /var/www directory. And I ran git clone, so I cloned that entire repo to this var directory. And when you clone something, it's gonna automatically create a folder for you. And that folder was full stack, front end v2, so fsfev2.

[00:01:16] And from there, I'm gonna cd into that directory, so cd fsfev2. Run ls, we're looking good. Then I ran a npm install, just to make sure I have all the packages in there, should be up-to-date, cool. But now I have two node applications running on the same server, or on the same port.

[00:01:39] So I wanna kill the other application, cuz I don't need it for now. So I'm gonna kill that. So I'm gonna say, sudo pm2. And the first process was at process 0. We only had one running. So we're gonna stop 0. But because I already have it running in the process 0, I'm gonna stop it again.

[00:01:57] We're good to go, cool. So now 0 stops. I'm gonna run sudo pm2,
>> Jem Young: start, we're gonna run this other application. But I've already ran it, I don't wanna start another process, but you would run sudo pm2 start app.js. So now we've stopped the other application, the other one's running, you're good to go.

[00:02:18] Unfortunately, we still need to tunnel the web socket connection through NGINX.
>> Jem Young: So we use this, oops, there we go. We have to set those proxy upgrade headers in NGINX. So in our NGINX configuration,
>> Jem Young: In our location block, right above the proxy_pass, or below it, it doesn't really matter, we set a proxy header.

[00:02:43] We wanna set up an upgrade header. And then we wanna set a another header for connection upgrade.
>> Jem Young: Pretty good so far?
>> Jem Young: I'll give you a second just in case. It's a lot of typing.
>> Jem Young: Your hands are probably hurting by now. You've used the command line maybe more than you've ever used in your life, and that's good.

[00:03:07] Okay, so when we modify our NGINX configuration, what do we have to do? One, two, three, restart, yes. So we reload our NGINX, and I'm just going through my history, cuz I am lazy, sudo service nginx reload.
>> Jem Young: One of these was probably the missing step. And if you don't do them in order, or not necessarily in order, but you don't get every single one of them, your application won't work.

[00:03:33] So this point, we have a new application running on the same port. If there's a website connection, it's gonna do an upgrade, and it should work. So now if you go to your website, I'm gonna go to mine. See that my socket is up and it's running, I can say hello, and it returns awesome because I didn't modify that script in any way.

[00:03:52] Now, if you wanted to modify the script, if you wanna look exactly where that chatbot lives, make that a little bigger,
>> Jem Young: It's just in this handleQuery. You would write a switch statement here for every query. So if I said the query was, hello, write a switch. In that case, for hello, you can return hello.

[00:04:11] You can return whatever you want. You can say what time it is. You can grab the system time. If you wanna get complicated and grab, say, a system load, like, how's my server doing, you could respond like that. Is this a real chatbot? I don't know. I don't in believe in chatbots anyways.

[00:04:24] But if you wanted to build one, this is how you do it. When I layout the steps, hopefully they make sense to you. All the steps we had to do to get to where we are today. And it's kinda built on some of the skills using Git, modifying our connection, adding headers, things like that.

[00:04:41] But it's the simple things that can get you, and unless you do them repeatedly, it's hard to remember the exact steps. So if you didn't get it the first time, don't feel bad at all.