Simulate Your Backend with a Proxy API

As we've been working through building up our application, we've done a ton of really great work but nearly all of it has been in this weird state where the data all lives completely inside of our React application. The reality is that this won't be true for most projects you work on, so we'll want to do a little bit of work to try to put the state of our Create React App project outside of React itself. To do that, we can take advantage of another feature in our Create React App world: proxy backends!

In addition, we'll need to spend a little bit of time talking about how we can actually get the data from that backend server into our Create React App project! A backend without a frontend isn't particularly useful, and vice versa! Similarly, a developer who has no understanding of either direction will be in...

Simulating a backend server with the proxy API

We've been building up our application over time with Create React App, but we've kept it almost entirely a frontend-only application. That's all well and good, but the reality is that you will probably be building an application that has a server behind it! The good news is that creating a simulated backend in Create React App projects remains as simple as possible while still giving you a good feel for how things would translate into a real-world scenario or project!

Setting up the backend API

As mentioned, pretending there is a backend to our Create React App project requires very little effort and gets us back into development incredibly quickly. For us to take...

Summary

In this chapter, we spent a fair amount of time exploring our options for making, simulating, and running a backend server alongside our Create React App project. This allows us to pass projects off to other teams where they know the implicit data structure contracts that need to exist as part of the development process between frontend and backend development teams.

We also spent a good chunk of time exploring our options for retrieving data from inside a React project out to a server! This is only one possible option for implementation out of many; in general, Javascript projects tend to have a ton of different (and all equally good in their own rights) ways to implement a lot of common functionality. Using Fetch and a service library is just one possible way to do this, but it's a way that I've personally found a lot of success with and tend to stick with...