Connect to an Express.js API from a React app in an Nx Workspace
Nx is not only capable of scaffolding frontend projects, but it also supports a lot of backend setups. In this specific lesson, we're going to explore the setup we previously generated, specifically inspecting how passing --frontentProject to the Express.js schematic automatically sets up a Webpack dev proxy to make it easy to call the backend API.
Instructor: [0:00] In our Nx workspace, we currently have two applications. If we open up our dependency graph, we can actually see we have that store application, and we have that API application. We created the API application as a Node Express application, and we can see here that we have that repository which simply contains an array of data, which then gets exposed over that API.
[0:26] Right now, however, our application here still uses the data that comes locally from a file, which is currently residing here in that fake API. We can see here we have that still in our application. Let's change that, and actually connect to our backend API. The backend API runs on local host 323/API.
[0:49] If we go to actual /API/games, we get all the variety of games that are being exposed by that static file. Now, when we generated our Node Express API, we indicated that the store is our front-end application.
[1:06] As a result, what happened is that Nx generated for us such a proxy config. This corresponds to the webpack development server proxy, which allows us to say that whenever we call from within our store application, we get served on 4200 port.
[1:21] Whenever we call it /api, it will be forwarded to the corresponding port 3333. In fact, if we go back here, and we edit this out with 4200, it will still work because the proxy will forward our request to the actual server.
[1:37] Now, that said, we can go to our actual app component here and implement the corresponding API call. First of all, we will actually import here the useEffect, and useState functions, and then we can go down here, and I will not bore you too much with actual implementation because that's not the focus of the actual course here.
[1:59] I'm going to paste in here how I'm going to handle that state. I have a different kind of state here, which is success, error loading, depending on where we currently are and then further down here, in the useEffect, I'm actually having the Fetch API call to /api games.
[2:16] We can now go further down here where we have our mapping, we will replace it with something like this. Whenever the state is loading, we'll just throw a loading... otherwise, we might check whether it's actually an error. If it's an error, we show a diff specifying that an error happened when retrieving the data. Otherwise, we can go and take the data, which will be the exact same array of games that we will then iterate on and create our cards. We'll also need to close here the parenthesis.
[2:47] After we save this, the development server in the background still runs. It recompiles. Now if we go to our store and refresh, we still see it works. To prove we're calling the backend server, let's open up the developer tools, go to the network panel, filter for XHR calls. Then here, we can see our call/games, which then returns the set of games which we have here.