[React] Setup an API Proxy in Create React App

For development, we'll be using a separate server address to reach our REST endpoints. In a production build, this will likely be a different address, and in many cases, our UI will be served from the same domain as our services. We can keep our code clean and still prepare for the differences between dev and prod, by using an API proxy and a relative path to our REST endpoints. In this lesson, we'll configure a proxy for create-react-app and refactor our code to use a relative API path.

 

Component:

// From
React.useEffect(() => {
    fetch('https://adaptive-basilisk.glitch.me/api/card')
      .then(res => res.json())
      .then(setCards)
  }, [])

// To
React.useEffect(() => {
    fetch('/api/card')
      .then(res => res.json())
      .then(setCards)
  }, [])

 

In pacakge.json add "proxy":

"proxy": "https://adaptive-basilisk.glitch.me"