Backend API server

[00:00 - 00:07] Backend API server. Before we continue, let's recall how our static site should work. We have a bunch of pages that we want to prerender.

[00:08 - 00:18] Prerendering should occur once at build time, and then generated pages should be sent as response to requests. In order to be able to regenerate these pages, we need data to inject in them.

[00:19 - 00:25] We can get this data in various ways. You can get this data from the file system, for example, from the markdown files.

[00:26 - 00:33] You can fetch the data directly from a remote database or use a Backend Server 's API. Next has a great example that shows how to work with the file system.

[00:34 - 00:40] However, we will create the Backend Server and fetch data from its API. Let's install the required dependencies.

[00:41 - 00:53] Yarn, add, body, parser, concurrently, course, express, node, fetch, and TS node. We'll need the body parser to parse JSON requests.

[00:54 - 01:02] We'll need concurrently to be able to run the server and the client concurrently at the same time. We'll need course to process the cross origin requests.

[01:03 - 01:09] Express is going to be our Backend framework. Node fetch will allow us to use fetch in the node environment.

[01:10 - 01:18] And TS node will allow us to run the TypeScript code on the server directly. Install the packages, then go to package JSON, and update the scripts block.

[01:19 - 01:29] Here we want to add the surf that is going to run the server. Here we use TS node that runs server index.ts file using the common.js module resolve strategy.

[01:30 - 01:39] And also add the dev command that is going to run concurrently, Yarn serve that will run the server and next that will run the client part. Server setup.

[01:40 - 01:45] So in our surf script, we run server index.ts. Let's create this file.

[01:46 - 01:52] Server index.ts. Here we import express from express.

[01:53 - 02:03] We import course from course and body parser from body parser package. We'll have our posts and categories hard coded.

[02:04 - 02:11] You can copy the data for them from the example folder attached to this lesson. Put them both into the server folder.

[02:12 - 02:22] They just contain the JSON representation of the categories list and the posts list. In our index.ts, get the categories, require categories.

[02:23 - 02:30] JSON, get the posts by requiring the posts JSON. Define the app equals express.

[02:31 - 02:42] Configure the app, use course so that we can access the server from different domains. App, use, body, parser, JSON.

[02:43 - 02:51] We could use a MongoDB or some other database to store the categories or posts. But here we are learning about TypeScript and not databases.

[02:52 - 02:59] So for the simplicity sake, we are going to use just simple JSON files. Even though we are developing on local host, we are going to be using different ports.

[03:00 - 03:04] So that's going to be considered as different domain. And this is why we're using course here.

[03:05 - 03:11] Post data and type. At this point, you probably already have the categories and posts inside of your server folder.

[03:12 - 03:19] So we can define the types for our data. Our types will describe all the fields that you can see in the posts and categories.

[03:20 - 03:24] Inside of your shared folder, create a new file, types. T.S.

[03:25 - 03:32] Here, expert type URI string that's going to be our first alias. And it's going to be a string.

[03:33 - 03:35] Expert type. Unique.

[03:36 - 03:37] String. It's another string.

[03:38 - 03:41] alias. Expert type. Entity.

[03:42 - 03:46] ID is a number or string. It's going to represent the IDs of the posts, for example.

[03:47 - 03:53] Now expert type category. In our case, we know that it's one of three possible string values.

[03:54 - 03:55] Technology. Science.

[03:56 - 03:57] Or. Arts.

[03:58 - 04:03] Define the date ISO string. That's going to be also a string alias.

[04:04 - 04:13] And you can see that we do quite a lot of aliases for simple types. And that's because this technique can greatly improve the readability.

[04:14 - 04:19] If you provide the intent of using this type through its name. Let's define the post type.

[04:20 - 04:26] Expert type post. It will have fields ID of type entity ID date.

[04:27 - 04:34] The date of posting is going to be date ISO string category of type category type. Title of type string.

[04:35 - 04:39] Lead of type string content. Also of type string.

[04:40 - 04:45] Image of type URI string. And source of type URI string.

[04:46 - 04:51] The source is a URI string because it will contain the URL to the original article. API endpoints.

[04:52 - 04:57] Now we want to create the API endpoints to make the data accessible via GET requests. Go to index.ts.

[04:58 - 05:03] Define the port on which our app is going to be running. Port 4000.

[05:04 - 05:08] And define a couple of endpoints. App GET posts.

[05:09 - 05:15] Here we're going to process requests to the post endpoint. We don't care about the request for now.

[05:16 - 05:24] But we want to get the response and we'll use it to return the JSON representation of our posts. Do the same for the categories.

[05:25 - 05:28] App GET categories. Here we return the categories object.

[05:29 - 05:31] And then launch the server. App.

[05:32 - 05:33] Listen. Port.

[05:34 - 05:38] Pass in a callback that will run after we launch the application successfully. It should log a message.

[05:39 - 05:43] DB is running on HTTP. Local.

[05:44 - 05:46] Host. And then the port number.

[05:47 - 05:47] Great.