Use external REST API with ReactJS and NodeJS

Question

I am still learning about ReactJS and NodeJS.

My devs have created a boilerplate with create-react-app We have an External REST API service , and we want to make calls (GET, PUT ...) to their APIs and retrieve and put data.

My question is, ReactJS can also consume REST APIs (external ones, from another web site). Why do I need NodeJS then? I think ideal would be that NodeJS makes those calls for ReactJS and makes server side rendering.

What is the best practice here with this stack. I do not need (or maybe do I?) to buld internal APIs with ExpressJS, since I have external ones from another web service provider which retrieves data for me out of their data store.

Can someone elaborate on the best practice here ?

Thanks in advance.

If in future you think you will have to build internal APIs which may not consume the external APIs then have an API layer. There are lot of factors. I personally would suggest to have an API server anyhow. At a very high level if in case you need to change the third party API service provider your API layer should be able to handle it. There is also a possibility that in future you may have to integrate more third party API providers. — XCEPTION
– XCEPTION, Commented Jun 3, 2020 at 7:39

Red Baron · Accepted Answer · 2020-06-03 10:51:44Z

2

React can easily make API calls. this is typically done through componentDidMount method or in useEffect if using hooks.

You can of course use a backend to make these requests too like you said with NodeJS. but whether you do or don't is completely up to you and your use case

typically you would use NodeJS and a backend to help separate out logic, especially if you need to make calls to a database and stuff.

another good reason would be if you are handling sensitive information you would want to do this server side and not client side.

so in summary, it's completely up to you and what you need. personally I use react with lambda/api gateway in aws to separate logic out

example node js endpoint (returning an array to react)

app.get('/api/my-route', (req, res, next) => {
    const array = [1,2,3,4,5]
    res.json(array)
})

edited Jun 3, 2020 at 10:51

answered Jun 3, 2020 at 7:40

Red Baron

7,75312 gold badges48 silver badges115 bronze badges

Sign up to request clarification or add additional context in comments.

17 Comments

ultimo_frogman Over a year ago

Thanks. I understood , that it would be good to buiild my own API with for an example ExpressJS as an API layer that talks to the external API and leaves me options and is best practice. I would like to use NodeJS as backend, but how can I connect it with ReactJS, so that ReactJS triggers the NodeJS external API calls (the routes and endpoints in NodeJS are needed to be built first?)

Red Baron Over a year ago

yeh you should build the routes in express. then simply get react to hit those endpoints. you can use a thing called proxy in package.json so that react can hit your endpoints. look here for more info: create-react-app.dev/docs/proxying-api-requests-in-development

ultimo_frogman Over a year ago

Thanks . You mean I need to build my Express API with routes .And React hits those endpoints. But how can I tell ExpressJS to call REST Api Calls, like just to make http call to the External API ?

Red Baron Over a year ago

yeh do something like this app.get('/api/route', (req, res, next) => { // logic in here then if you use proxy above you should be able to go to localhost:9000/api/route

ultimo_frogman Over a year ago

Great. This is what I was thinking. So when you wrote //logic in here, I assume this is the logic to call the REST API from the external API site and then return the vaules or PUT, POST the values. What is your best practice here.? Which modules? I was using before like this: function(req, res) { var request = require('request'); var options = { 'method': 'GET', request(options, function (error, response) { if (error) throw new Error(error); console.log(response.body); res.send(response.body); }); }); do you have some examples onlinne maybe ? Github ?

|

Collectives™ on Stack Overflow

Use external REST API with ReactJS and NodeJS

1 Answer 1

17 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

17 Comments

Your Answer

Sign up or log in

Post as a guest

Related