Now that we have completed developing a full-fledged REST API server using Loopback, the immediate next question that will arise in your mind is, how do we adapt the React application to make use of this REST API server? As we have done in the previous cases, we will also need to reconfigure our React application to specifically make use of the REST API endpoints and the various REST API requests as exposed by our Loopback server. To get started on this exercise, first, clone the git repository that contains a completed reapplication that communicates with our Loopback server. So, to do that, go to your convenient location on your computers. I'm going to clone the git repository by typing git clone https://github.com/jmuppala/conFusion-React-Loopback.git, and then clone this git repository. Once the git repository is cloned, then we will move into the conFusion-React-Loopback folder and then perform an yarn install to install all the node modules for this application. Before you start the React application, make sure that your Loopback server is correctly configured. In the Loopback server, in the client folder, move the images that we have given as the images.zip file, unzip it, and then move the images into the images folder under the client folder as shown here. Also, rename the root.js file as root.jsold or delete the root.js file. We don't need this anymore in our application because we want to ensure that our server is saving up the contents from the client folder. So, to achieve that, let's open the middleware.json file, and in the middleware.json file, in the files part, add this into the files part of your middleware.json file. So, we'll say, Loopback static and params: dollar bank dot dot slash client", indicating that your Loopback server will be saving up static content from the client folder here. After making these changes, then you can launch your server. Make sure that your MongoDB server is also up and running before you launch your Loopback server. Then, after that, we will then compile and launch our React client. Now, again making sure that your MongoDB server and your Loopback server up and running, go to the terminal and add the terminal. Type yarn start to start our Loopback application, the React application. So, when the application launches in the browser, you will notice that the Loopback-based React application behaves exactly the same as the previous versions of the React application. So, here we have the Homepage, then we have the About Us page as we see here, then the Menu page where the Menu items are listed here, the Contact Us page as expected. Then let me go back to the Homepage and then login myself as the Admin. So, let's log in as the Admin, and then you will be able to see the My Favorites. I logged in earlier and then added one item to My Favorites. Let's now go to the Menu and then add a second item into My Favorites. So, here we'll add this item into the favorites, and then you would be able to see that both these items are now in My Favorites. Similarly, you can delete items from the favorites. So, let's go ahead and delete this from our Favorites. Going back to the Menu item, let's add a comment to one of the dishes. So, let me click on this dish, and then we'll submit a comment. So, when we submit a comment, as you can see, the comment gets added into our server there as expected and the result is shown in the Dish Detail page here. Again going back to the Homepage, we find that our React application is now able to communicate with the Loopback server and then obtain the data from the server and interact with the server as expected. Now, of course, the question that would arise in your mind is, how is this Loopback application communicating with the Loopback server? Now, this is where we would note that for Loopback, since the Loopback server exposes the REST API endpoints, my React application is able to access the Loopback server at the corresponding REST API endpoints and then communicate with the server, as we did with our own REST API server that we had implemented earlier. So, let's go ahead and take a look at the code for the modified React application. Going to the code of our application, the major changes that you will notice will be in the ActionCreators.js file. Here, you will note that we are now communicating with the Loopback server instead of the REST API server that we had earlier. So, the fetch will now be accessing the Loopback server at the api/comments endpoint or the api/dishes endpoint and so on. So, all these fetch requests are all updated to access our Loopback server instant. So, you will notice similar changes there. Now, in addition to login to our Loopback server, so let's go to the login code here. So, in the login user, we're posting a fetch to the baseUrl and api/Customers/login endpoint, and then we'll supply the credentials in the body of the request message that goes out. In response to that, the server will send back the response. The response then contains the token information. The token information is sent back in the form of the ID of the reply message. So, the ID itself serves as the token. So, the reply message itself, I'm going to save this into my local storage as shown here. We stringify the response message and then store that in there. This response message, the response.Id, contains the token. So, the response.id serves as the JSON Web Token to access the Loopback server. So, that's why you will notice that in situations where I need to access the server, so for example, we'll notice that when we are fetching or posting your favorite to the server, you will notice that I obtain the token by saying, let token, JSON parse, localStorage, getItem, token here, and then in the Authorization header field, I said the Authorization field to be token.id here as shown here. So, that's how we will be able to authenticate ourselves to the Loopback server. So, here you see that it says, baseUrl, api/favorites, and then obtain the list of favorites from the server, and then save it into our redux store. So, well, much of the code remains the same, except for the updates that we have done in order to access the Loopbacks REST API endpoints. Now, for Angular, we have a Loopback SDK that can be built for our Angular application. But for React, there is no such support available from Loopback, and so we have to resort to directly accessing the Loopback REST API endpoints as shown here using fetch, and then we are able to communicate with the Loopback server. With this quick understanding of how our React application has been updated to access our Loopback server, we complete the examination of the Loopback server. Spend some more time looking up at some of the components and see how they are using information obtained from the Loopback server. You will notice that most of the components remain exactly the same as before, except for some minor modifications in the favorite component to obtain the information from the Loopback server and then use it to render the list of favorite items. Other than that, much of the changes are confined to the ActionCreators.js file, where we have updated the fetch to use the URL for our Loopback server to be able to access the various REST API endpoints. So, with this, I've quickly demonstrated to you how you can build your application. With this quick introduction to how we can make use of the Loopback within our application, we come to the end of this exercise.
