Adding backend API to React app - quick question

1

So I am working on my first React app and was wondering how do I add a backend API to it. Do I need to make a seperate Node.js application that runs the API or can it all be integrated. If it can be integrated can someone either link me a tutorial or provide instructions here. Thanks :slight_smile:

2

Do you mean you are working on the camper leaderboard project that relies on a third party backend API, or are you making your own full stack app and want to serve an API for your front end?

In the first case, the fetch javascript method is worth investigating.

In the second case, your intuition is good - you would serve up your API in anyway you are comfortable (and Express / node app is good) and then consume that API with your React front end. Wiring it all up is complicated though :slight_smile:

3

I am learning React+API for the first time. I will defiently try to leaderboard project however I need to get used to the basics for the first time.

Steps so far:

  • I created a backend with express.
  • I created a react-client inside the backend folder.
  • in the react-client I setup the proxy to the backend with the following in my package.json. This forwards API requests to the express backend.
  "proxy": {
    "/api": {
      "target": "http://localhost:3001"
    },
    "/assets": {
      "target": "http://localhost:3001"
    }
  }

The following was helpful to me:

Am I going about this correctly? Are database credentials given to the express backend mostly safe? Last thing I want is database credentials or something to be public and my app be vulnerable to spooky hackers and such.

GitHub Repo of the template I setup: https://github.com/nsuchy/react-client-express-backend-template