1 00:00:00,810 --> 00:00:06,240 We are passing off a lot of information to our search function now back over inside of our local API 2 00:00:06,240 --> 00:00:10,140 project, because local API, I'm inside my next's file. 3 00:00:10,540 --> 00:00:14,460 We're going to start to do some refactoring inside of here and of course, actually start out some kind 4 00:00:14,460 --> 00:00:19,470 of express server and start listening for traffic on given port saving and patching cells from the given 5 00:00:19,470 --> 00:00:19,890 file. 6 00:00:20,870 --> 00:00:25,790 The first thing I want to do here is really clarify exactly what the goal of our local API is. 7 00:00:26,480 --> 00:00:27,350 So quick diagram. 8 00:00:28,190 --> 00:00:30,210 All right, so a lot of stuff going on in this diagram. 9 00:00:30,230 --> 00:00:31,370 We'll go over it step by step. 10 00:00:32,000 --> 00:00:35,780 You might recall that I mentioned that the local API has three primary jobs. 11 00:00:36,230 --> 00:00:41,000 First off, the local API is can be ran on a user's machine when they use our daybook application. 12 00:00:41,570 --> 00:00:46,970 When a user makes use of our daybook application, we are not going to be running up that entire development 13 00:00:46,970 --> 00:00:47,380 server. 14 00:00:47,390 --> 00:00:49,040 It is not running at all. 15 00:00:49,730 --> 00:00:52,370 That development server takes a lot of resources. 16 00:00:52,370 --> 00:00:57,260 It takes a long time to start up because we have to start up all the code transpiring, all the bundling, 17 00:00:57,260 --> 00:00:59,960 all that kind of stuff and all that set up and start up. 18 00:00:59,960 --> 00:01:02,200 Time is just wasted time in general. 19 00:01:03,050 --> 00:01:05,900 So whenever a user is running the local API. 20 00:01:07,530 --> 00:01:11,280 The first route that we're going to put together inside there is a route that's going to fetch all the 21 00:01:11,280 --> 00:01:14,280 built production assets for our reactor application. 22 00:01:14,780 --> 00:01:21,630 So, for example, if the user makes a request to just localhost at Port 40 or 50 or whatever or our 23 00:01:21,630 --> 00:01:27,150 local API is running on, we're going to send them back the indexed HTML file from our reactor application. 24 00:01:28,010 --> 00:01:30,780 That HTML file will load up inside the user's browser. 25 00:01:30,830 --> 00:01:34,400 There will, of course, be a couple of script tags inside of there in the browser, will make some 26 00:01:34,400 --> 00:01:38,670 additional requests to go and get those additional JavaScript files from our local API. 27 00:01:39,200 --> 00:01:43,970 So essentially, for the purpose or job number one right here, we need to make sure that our local 28 00:01:43,970 --> 00:01:50,070 API is serving all the production assets of our REACT application, not just the indexed HTML file. 29 00:01:50,090 --> 00:01:52,730 I only put that in this diagram to keep the diagram nice and simple. 30 00:01:54,320 --> 00:02:00,980 Then after that, the two other things that our API needs to do is allow a browser to make a request 31 00:02:00,980 --> 00:02:07,460 to something like get on cells whenever a user makes a request like this, we're going to take a look 32 00:02:07,460 --> 00:02:09,789 at all the cells inside of the file. 33 00:02:09,810 --> 00:02:12,740 And remember, that is the name, the file that was provided to the CLI. 34 00:02:13,370 --> 00:02:17,180 We're going to take all the cells of those that file and send them back over to the browser. 35 00:02:18,070 --> 00:02:22,360 So in this case, would be something like an array of cell objects and remember, every cell has an 36 00:02:22,360 --> 00:02:26,860 ID content and type not so type here, but it does exist. 37 00:02:28,030 --> 00:02:33,010 And then finally, third purpose or third goal of our local API, a user in their browser should be 38 00:02:33,010 --> 00:02:34,510 able to make a change to a cell. 39 00:02:35,080 --> 00:02:41,620 Whenever they do, we want to take the updated list of cells, post them to something like cells. 40 00:02:42,310 --> 00:02:46,440 And our local API is going to take that list of cells and store them into a file. 41 00:02:46,450 --> 00:02:50,830 And that is the same file that was provided when user ran that book server command. 42 00:02:52,490 --> 00:02:56,240 Again, those are the three primary goals of our local API. 43 00:02:57,590 --> 00:03:01,400 So in order to put all this stuff together, the first thing we definitely need is express. 44 00:03:01,730 --> 00:03:05,120 We're going to use Express, we're doing all of our different requests, handling and stuff like that. 45 00:03:05,630 --> 00:03:10,190 So let's take a pause right here and stall expressed in the next video and then start to wire up an 46 00:03:10,190 --> 00:03:12,010 express server in just a moment.