1 00:00:03,650 --> 00:00:10,755 Now that we have completed developing a full-fledged REST API server using Loopback, 2 00:00:10,755 --> 00:00:14,639 the immediate next question that will arise in your mind is, 3 00:00:14,639 --> 00:00:20,090 how do we adapt the React application to make use of this REST API server? 4 00:00:20,090 --> 00:00:23,140 As we have done in the previous cases, 5 00:00:23,140 --> 00:00:29,190 we will also need to reconfigure our React application to specifically make use of 6 00:00:29,190 --> 00:00:31,410 the REST API endpoints and 7 00:00:31,410 --> 00:00:37,960 the various REST API requests as exposed by our Loopback server. 8 00:00:38,150 --> 00:00:42,075 To get started on this exercise, first, 9 00:00:42,075 --> 00:00:45,275 clone the git repository that contains 10 00:00:45,275 --> 00:00:51,140 a completed reapplication that communicates with our Loopback server. 11 00:00:51,140 --> 00:00:54,760 So, to do that, go to your convenient location on your computers. 12 00:00:54,760 --> 00:00:58,370 I'm going to clone the git repository by 13 00:00:58,370 --> 00:01:00,640 typing git clone 14 00:01:06,440 --> 00:01:15,270 https://github.com/jmuppala/conFusion-React-Loopback.git, 15 00:01:15,270 --> 00:01:18,130 and then clone this git repository. 16 00:01:19,430 --> 00:01:22,665 Once the git repository is cloned, 17 00:01:22,665 --> 00:01:30,780 then we will move into the conFusion-React-Loopback folder and 18 00:01:30,780 --> 00:01:39,355 then perform an yarn install to install all the node modules for this application. 19 00:01:39,355 --> 00:01:42,315 Before you start the React application, 20 00:01:42,315 --> 00:01:46,300 make sure that your Loopback server is correctly configured. 21 00:01:46,300 --> 00:01:47,705 In the Loopback server, 22 00:01:47,705 --> 00:01:49,410 in the client folder, 23 00:01:49,410 --> 00:01:54,425 move the images that we have given as the images.zip file, 24 00:01:54,425 --> 00:01:56,780 unzip it, and then move the images into 25 00:01:56,780 --> 00:02:00,540 the images folder under the client folder as shown here. 26 00:02:00,540 --> 00:02:08,660 Also, rename the root.js file as root.jsold or delete the root.js file. 27 00:02:08,660 --> 00:02:13,310 We don't need this anymore in our application because we want to ensure that 28 00:02:13,310 --> 00:02:21,050 our server is saving up the contents from the client folder. 29 00:02:21,050 --> 00:02:22,740 So, to achieve that, 30 00:02:22,740 --> 00:02:25,265 let's open the middleware.json file, 31 00:02:25,265 --> 00:02:27,845 and in the middleware.json file, 32 00:02:27,845 --> 00:02:32,980 in the files part, 33 00:02:32,980 --> 00:02:38,435 add this into the files part of your middleware.json file. 34 00:02:38,435 --> 00:02:46,320 So, we'll say, Loopback static and params: dollar bank dot dot slash client", 35 00:02:46,320 --> 00:02:49,595 indicating that your Loopback server will be saving up 36 00:02:49,595 --> 00:02:53,555 static content from the client folder here. 37 00:02:53,555 --> 00:02:55,890 After making these changes, 38 00:02:55,890 --> 00:03:00,080 then you can launch your server. 39 00:03:00,360 --> 00:03:04,100 Make sure that your MongoDB server is 40 00:03:04,100 --> 00:03:07,860 also up and running before you launch your Loopback server. 41 00:03:07,860 --> 00:03:14,690 Then, after that, we will then compile and launch our React client. 42 00:03:14,690 --> 00:03:20,345 Now, again making sure that your MongoDB server and your Loopback server up and running, 43 00:03:20,345 --> 00:03:22,810 go to the terminal and add the terminal. 44 00:03:22,810 --> 00:03:31,405 Type yarn start to start our Loopback application, the React application. 45 00:03:31,405 --> 00:03:34,980 So, when the application launches in the browser, 46 00:03:34,980 --> 00:03:40,750 you will notice that the Loopback-based React application behaves 47 00:03:40,750 --> 00:03:46,670 exactly the same as the previous versions of the React application. 48 00:03:46,670 --> 00:03:48,670 So, here we have the Homepage, 49 00:03:48,670 --> 00:03:52,725 then we have the About Us page as we see here, 50 00:03:52,725 --> 00:03:56,770 then the Menu page where the Menu items are listed here, 51 00:03:56,770 --> 00:04:00,260 the Contact Us page as expected. 52 00:04:00,260 --> 00:04:04,535 Then let me go back to the Homepage and then login myself as the Admin. 53 00:04:04,535 --> 00:04:11,000 So, let's log in as the Admin, 54 00:04:11,000 --> 00:04:14,480 and then you will be able to see the My Favorites. 55 00:04:14,480 --> 00:04:19,075 I logged in earlier and then added one item to My Favorites. 56 00:04:19,075 --> 00:04:24,290 Let's now go to the Menu and then add a second item into My Favorites. 57 00:04:24,290 --> 00:04:27,930 So, here we'll add this item into the favorites, 58 00:04:27,930 --> 00:04:34,850 and then you would be able to see that both these items are now in My Favorites. 59 00:04:34,850 --> 00:04:38,194 Similarly, you can delete items from the favorites. 60 00:04:38,194 --> 00:04:42,020 So, let's go ahead and delete this from our Favorites. 61 00:04:42,020 --> 00:04:43,490 Going back to the Menu item, 62 00:04:43,490 --> 00:04:47,550 let's add a comment to one of the dishes. 63 00:04:47,550 --> 00:04:49,560 So, let me click on this dish, 64 00:04:49,560 --> 00:04:51,855 and then we'll submit a comment. 65 00:04:51,855 --> 00:05:01,980 So, when we submit a comment, 66 00:05:01,980 --> 00:05:05,175 as you can see, the comment gets added into 67 00:05:05,175 --> 00:05:09,710 our server there as 68 00:05:09,710 --> 00:05:15,690 expected and the result is shown in the Dish Detail page here. 69 00:05:15,690 --> 00:05:18,660 Again going back to the Homepage, 70 00:05:19,260 --> 00:05:24,650 we find that our React application is now able to communicate with 71 00:05:24,650 --> 00:05:27,740 the Loopback server and then obtain 72 00:05:27,740 --> 00:05:31,465 the data from the server and interact with the server as expected. 73 00:05:31,465 --> 00:05:35,160 Now, of course, the question that would arise in your mind is, 74 00:05:35,160 --> 00:05:41,455 how is this Loopback application communicating with the Loopback server? 75 00:05:41,455 --> 00:05:47,610 Now, this is where we would note that for Loopback, 76 00:05:47,610 --> 00:05:51,495 since the Loopback server exposes the REST API endpoints, 77 00:05:51,495 --> 00:05:55,575 my React application is able to access the Loopback server at 78 00:05:55,575 --> 00:05:59,860 the corresponding REST API endpoints and then communicate with the server, 79 00:05:59,860 --> 00:06:07,845 as we did with our own REST API server that we had implemented earlier. 80 00:06:07,845 --> 00:06:15,020 So, let's go ahead and take a look at the code for the modified React application. 81 00:06:15,020 --> 00:06:17,690 Going to the code of our application, 82 00:06:17,690 --> 00:06:23,200 the major changes that you will notice will be in the ActionCreators.js file. 83 00:06:23,200 --> 00:06:27,620 Here, you will note that we are now communicating with 84 00:06:27,620 --> 00:06:33,930 the Loopback server instead of the REST API server that we had earlier. 85 00:06:33,930 --> 00:06:37,550 So, the fetch will now be accessing the Loopback server at 86 00:06:37,550 --> 00:06:43,800 the api/comments endpoint or the api/dishes endpoint and so on. 87 00:06:43,800 --> 00:06:52,350 So, all these fetch requests are all updated to access our Loopback server instant. 88 00:06:52,700 --> 00:06:56,215 So, you will notice similar changes there. 89 00:06:56,215 --> 00:07:00,095 Now, in addition to login to our Loopback server, 90 00:07:00,095 --> 00:07:08,190 so let's go to the login code here. 91 00:07:08,190 --> 00:07:09,750 So, in the login user, 92 00:07:09,750 --> 00:07:18,035 we're posting a fetch to the baseUrl and api/Customers/login endpoint, 93 00:07:18,035 --> 00:07:25,260 and then we'll supply the credentials in the body of the request message that goes out. 94 00:07:25,260 --> 00:07:27,215 In response to that, 95 00:07:27,215 --> 00:07:29,830 the server will send back the response. 96 00:07:29,830 --> 00:07:33,950 The response then contains the token information. 97 00:07:33,950 --> 00:07:38,905 The token information is sent back in the form of 98 00:07:38,905 --> 00:07:44,790 the ID of the reply message. 99 00:07:44,790 --> 00:07:47,325 So, the ID itself serves as the token. 100 00:07:47,325 --> 00:07:49,545 So, the reply message itself, 101 00:07:49,545 --> 00:07:55,200 I'm going to save this into my local storage as shown here. 102 00:07:55,200 --> 00:07:59,320 We stringify the response message and then store that in there. 103 00:07:59,320 --> 00:08:06,945 This response message, the response.Id, contains the token. 104 00:08:06,945 --> 00:08:12,815 So, the response.id serves as the JSON Web Token to access the Loopback server. 105 00:08:12,815 --> 00:08:15,650 So, that's why you will notice that in 106 00:08:15,650 --> 00:08:19,235 situations where I need to access the server, so for example, 107 00:08:19,235 --> 00:08:25,520 we'll notice that when we are fetching or posting your favorite to the server, 108 00:08:25,520 --> 00:08:28,550 you will notice that I obtain the token by saying, 109 00:08:28,550 --> 00:08:30,420 let token, JSON parse, 110 00:08:30,420 --> 00:08:33,990 localStorage, getItem, token here, 111 00:08:33,990 --> 00:08:38,890 and then in the Authorization header field, 112 00:08:38,890 --> 00:08:44,300 I said the Authorization field to be token.id here as shown here. 113 00:08:44,300 --> 00:08:51,380 So, that's how we will be able to authenticate ourselves to the Loopback server. 114 00:08:51,380 --> 00:08:55,450 So, here you see that it says, baseUrl, api/favorites, 115 00:08:55,450 --> 00:08:59,440 and then obtain the list of favorites from the server, 116 00:08:59,440 --> 00:09:03,430 and then save it into our redux store. 117 00:09:03,430 --> 00:09:06,710 So, well, much of the code remains the same, 118 00:09:06,710 --> 00:09:09,740 except for the updates that we have done in order to 119 00:09:09,740 --> 00:09:13,455 access the Loopbacks REST API endpoints. 120 00:09:13,455 --> 00:09:22,665 Now, for Angular, we have a Loopback SDK that can be built for our Angular application. 121 00:09:22,665 --> 00:09:27,070 But for React, there is no such support available from Loopback, 122 00:09:27,070 --> 00:09:30,460 and so we have to resort to directly accessing 123 00:09:30,460 --> 00:09:34,840 the Loopback REST API endpoints as shown here using fetch, 124 00:09:34,840 --> 00:09:38,860 and then we are able to communicate with the Loopback server. 125 00:09:38,860 --> 00:09:42,115 With this quick understanding of how 126 00:09:42,115 --> 00:09:48,360 our React application has been updated to access our Loopback server, 127 00:09:48,360 --> 00:09:51,795 we complete the examination of the Loopback server. 128 00:09:51,795 --> 00:09:56,980 Spend some more time looking up at some of the components and see 129 00:09:56,980 --> 00:10:02,340 how they are using information obtained from the Loopback server. 130 00:10:02,340 --> 00:10:06,530 You will notice that most of the components remain exactly the same as before, 131 00:10:06,530 --> 00:10:13,650 except for some minor modifications in the favorite component to obtain 132 00:10:13,650 --> 00:10:18,495 the information from the Loopback server 133 00:10:18,495 --> 00:10:22,700 and then use it to render the list of favorite items. 134 00:10:22,700 --> 00:10:29,545 Other than that, much of the changes are confined to the ActionCreators.js file, 135 00:10:29,545 --> 00:10:34,260 where we have updated the fetch to use the URL for 136 00:10:34,260 --> 00:10:41,125 our Loopback server to be able to access the various REST API endpoints. 137 00:10:41,125 --> 00:10:48,460 So, with this, I've quickly demonstrated to you how you can build your application. 138 00:10:48,460 --> 00:10:51,590 With this quick introduction to how we can 139 00:10:51,590 --> 00:10:54,755 make use of the Loopback within our application, 140 00:10:54,755 --> 00:10:59,110 we come to the end of this exercise.