Backend

[00:00 - 00:11] All right, let's start looking into our back end. So as the name of this course implies, we're going to be using TRPC for our API and any communication between the back end and front end.

[00:12 - 00:24] And TRPC can actually run stand alone, so to speak, using just the built-in node HTTP modules, but it runs perfectly well on top of a different server. And I think that's preferable.

[00:25 - 00:38] It's nice to have a server just in case you need to create a REST endpoint for whatever reason. Maybe your app is going to be accepting incoming webhooks, or maybe you want authentication in plain REST for whatever reason.

[00:39 - 00:42] It's always just nice to have it in place. We could use Express.

[00:43 - 00:56] TRPC works with a number of different servers, and you can write your own for if your server of choice isn't supported. But I have a special place in my heart for the CoA server.

[00:57 - 01:11] It's made by the same people who made Express, so it's a little bit more advanced, or you could say that they've taken some of the lessons they learned from Express. It's much more minimalistic, so where it's Express comes with a whole bunch of stuff built-in.

[01:12 - 01:19] For CoA, you have to add specific modules to it. But that just means that we don't need to include anything that we're not going to be using.

[01:20 - 01:36] So let's install CoA and some of the things that I tend to use when I use it. So we'll go to the back-end folder, and we'll add CoA.

[01:37 - 01:59] And let me just copy, actually, because there's a few of them here. Body parser, which is able to parse JSON in HTTP requests, a simple router helmet, which adds some content security policy headers, and then logger, which will just log out what happens to the console.

[02:00 - 02:06] It's a very simple thing, but it's nice to have. We will also install some developer dependencies.

[02:07 - 02:19] So this includes TypeScript itself, because we don't actually have that in our back-end yet. We also need Node-Mon and TS-node.

[02:20 - 02:33] So this enables us to run the back-end server and just have it restart whenever we change something. And TS-node allows us to just run TypeScript from node without any hassle.

[02:34 - 02:43] And then we add the types packages for all of the CoA packages. And the reason why we need to have to specify this is that they are not built in into any of the CoA packages.

[02:44 - 03:04] And you might notice a little bit of a weird naming pattern here, and that is because some of the CoA packages have been refactored into the CoA scope, but not all of them have so far. So for instance, the logger is still named CoA-logger, whereas the router is named @CoA/router.

[03:05 - 03:15] So that is just something to be a little bit aware of. So with all of those packages in place, let's try and create a very minimalistic CoA web server.

[03:16 - 03:22] We'll create an index file in the back-end folder. Let me just close some of this.

[03:23 - 03:33] So we'll make a source folder in the back-end here. We didn't have that yet, and we'll create index.ts.

[03:34 - 03:42] And let me just copy this in there and quickly go over it. So we're importing the router CoA itself and the logger.

[03:43 - 03:54] And this main function here will create a new CoA instance, and it will use the logger on it as the first middleware. It then creates a router that has one single route.

[03:55 - 04:05] The router is ping, and it just responds with pong. It will then use that router, or rather, the routes that comes out of this router and the allowed methods that this router specifies.

[04:06 - 04:14] And then it starts up the server and listens on port 3000. So in order to run this, we need a little script.

[04:15 - 04:24] So we'll be using NodeMon, and that will be relying on TS node. We don't actually need to specify that, because NodeMon will figure that out automatically.

[04:25 - 04:41] So we add a script in here, and let's call it dev, because that is the standard that we're sticking to at this point. Let's try and see if we can start a server by running this now.

[04:42 - 04:49] Server is listening. So let's try and go to our browser and see if we can get in touch with our server.

[04:50 - 05:00] We'll go to localhost, but not that port, because our back end server is running on port 3000. And there is no route on the route.

[05:01 - 05:06] We need to specify /ping, and we get a little response. Very nice.

[05:07 - 05:19] Let's see if we got any info in the console here. Yep, you can see that we had made two requests, one that returns a 404, and one that returns the ping 200 response.

[05:20 - 05:20] Nice.