WEBVTT

1
00:00:02.039 --> 00:00:08.840
So now at this point, we're pretty much done with this demo REST API.

2
00:00:09.220 --> 00:00:14.380
Now, you could add more features, you could add global error handling, you could clean up the code,

3
00:00:14.560 --> 00:00:17.620
you could add more features in general to this API, of course.

4
00:00:18.460 --> 00:00:23.120
But I actually just want to do one additional thing here.

5
00:00:23.000 --> 00:00:30.000
I want to make sure that we can really interact with that API from inside a front-end application.

6
00:00:31.260 --> 00:00:36.340
And to do that, at least two important things are missing here.

7
00:00:36.700 --> 00:00:43.360
Because whilst we could interact with the API with tools like Postman for testing it,

8
00:00:43.740 --> 00:00:50.840
if we had a decoupled front-end web application or a mobile application,

9
00:00:51.000 --> 00:00:57.460
we would most likely run into errors if we were to send requests to that API.

10
00:00:58.640 --> 00:01:05.060
Because we must set appropriate headers on all the responses sent back by that API

11
00:01:05.060 --> 00:01:10.720
to ensure that decoupled front-ends are really allowed to send requests.

12
00:01:11.440 --> 00:01:18.320
We must set so-called coarse headers, we must enable cross-origin resource sharing.

13
00:01:19.460 --> 00:01:25.220
Now, we could do that manually, also with help of the documentation here on MDN, for example.

14
00:01:26.120 --> 00:01:30.300
But we can also just install a package that will set those headers for us,

15
00:01:30.480 --> 00:01:33.500
the coarse package with npm install coarse.

16
00:01:35.200 --> 00:01:39.660
And then, of course, we could ask AI to help us here, but we can also do it manually

17
00:01:40.100 --> 00:01:48.660
or use a combination, start typing and let AI, GitHub Copilot, help us as we did it many times before.

18
00:01:49.980 --> 00:01:53.000
And then also make sure to register this middleware,

19
00:01:53.240 --> 00:01:56.640
which is what we need to do when building such a Node Express application.

20
00:01:57.920 --> 00:02:03.060
This middleware here will ensure that the appropriate headers are set for all the responses

21
00:02:03.060 --> 00:02:07.560
that are being set to possible front-ends that might want to reach out.

22
00:02:09.000 --> 00:02:10.240
But that's not all.

23
00:02:10.620 --> 00:02:14.820
In addition, I also want to make sure that any images that were uploaded here

24
00:02:14.820 --> 00:02:20.460
can actually be requested from outside this application here as well,

25
00:02:21.240 --> 00:02:24.360
so that requests can be sent to those images.

26
00:02:26.160 --> 00:02:28.480
And for that, I want to statically serve them.

27
00:02:28.960 --> 00:02:31.440
And we can again do that with help of some middleware.

28
00:02:32.600 --> 00:02:37.780
So here, I'll start typing and I'll see if I get an appropriate suggestion.

29
00:02:38.000 --> 00:02:39.900
No, that's not it.

30
00:02:40.980 --> 00:02:46.820
But I know that I want the static middleware, so with some extra characters added,

31
00:02:47.300 --> 00:02:52.580
this gets completed and this code will simply ensure that whatever is in this public folder

32
00:02:52.580 --> 00:02:58.840
can directly be requested without us setting up a dedicated route in this application.

33
00:02:59.900 --> 00:03:05.560
So that's something else we want to do here to make sure that these images can be visited.

34
00:03:07.399 --> 00:03:11.340
With that, if I ensure that my development server is up and running

35
00:03:11.340 --> 00:03:15.840
and I grab this image name here, including the extension,

36
00:03:17.320 --> 00:03:23.580
I can open up the browser, enter localhost 3000,

37
00:03:23.980 --> 00:03:29.980
and then slash images, slash the image name, and the image will be loaded.

38
00:03:30.740 --> 00:03:33.740
And that's only possible due to this middleware being added.

39
00:03:34.000 --> 00:03:38.820
If I were to remove it and save this, reloading would give us an error.

40
00:03:39.800 --> 00:03:41.640
So that's all that's important here.