0

I'm currently trying to build a react social media web app and I'm using NewsAPI to retrieve articles based on user preferences. The call to the NewsAPI was first made from the react client side using axios and had no problems; it was working ok (while executing the web app locally) but when I deployed this to my firebase account it stopped working. I eventually learned that Firebase wouldn't allow api calls from the client side so I started doing some research to find a solution to this and at the end I found an article which suggested to do the api call from the server side using node js or express js being hosted in Heroku. I thought it was worth a shot so wrote a simple express script which would take some parameters in, do the api call and return the results to the caller. Then, I created a Heroku account and put my express application there. I use axios to call my Express app hosted in Heroku from my react app. Again, this worked ok in my local machine (localhost) and this is to represent the flow of info:

React App > Heroku Express > newsApi > News articles retrieved > Heroku Express > React App

I can see the debug every time the Express app in Heroku is hit when I run my React app locally but nothing happens when the React app is run in Firebase so I'm wondering if Firebase would prevent my React application from doing that call? In my React app there's this file called package.json in which I specified the proxy that points to the Express app in Heroku and it all works ok so the setup should be fine.

package.json and axios call to express app screenshot

I added a screenshot of my conf in package.json and also the axios call I make to the expressjs app. I'm not sure what other info I can put here but if you guys need any other sort of info please do tell. Thanks a lot!

user1847718
  • 1
  • 2
  • Can You post documentation url of Firebase where you learned that Firebase wouldn't allow api calls from the client side? I suprised. – Daniil Loban Dec 14 '20 at 10:04
  • Hi @Daniil Loban https://stackoverflow.com/questions/50002469/http-request-to-an-external-api-in-firebase-cloud-functions-spark-tier-refused – user1847718 Dec 14 '20 at 11:14
  • Hi @Daniil Loban, thanks for the quick answer. I forgot to say that I'm on a free account with google firebase. This is one of the links I found: https://stackoverflow.com/questions/50002469/http-request-to-an-external-api-in-firebase-cloud-functions-spark-tier-refused which cointains a link to this: https://firebase.google.com/pricing/ – user1847718 Dec 14 '20 at 11:21
  • This is another link explaining a similar issue to the one I have: https://stackoverflow.com/questions/51123462/firebase-functions-and-external-api/51154352 which sort of answers my question I guess. Gotta pay if I wanna do this sort of thing? Any workaround? Thank you! – user1847718 Dec 14 '20 at 11:28
  • Hi! Do you call API from firebase functions or from hoseted firebase project? – Daniil Loban Dec 14 '20 at 12:41
  • Also important to know that free heroku does not work 24/7 – Daniil Loban Dec 14 '20 at 12:44
  • I call the api from my react project hosted in firebase. I just tried again my application run locally and can see the heroku debug. Right after I tried the very same application hosted in firebase and the debug in heroku doesn't show anything. That means that for some reason the call from my react project (hosted in firebase) doesn't reach heroku. – user1847718 Dec 14 '20 at 13:33
  • Also understand what you said Daniil Loban; free heroku might not work 24/7 but when I tried (done this test dozens of times) running app locally heroku was always spitting debug as my local react app was hitting it. Right after did the same test but from react app hosted in firebase and never got hit. – user1847718 Dec 14 '20 at 13:36
  • Did you see any errors in devtools console, networks? – Daniil Loban Dec 14 '20 at 14:09
  • No errors of any sort @Daniil – user1847718 Dec 14 '20 at 14:32
  • No errors of any sort @Daniil Loban. I added some debug to see what's returned in the axios call and although axios doesn't error (I'm getting a status: 200) the response.data array which is supposed to contain 3 sub-arrays (1 per article as set in the request) does contain part of the index.html file in my react app – user1847718 Dec 14 '20 at 14:38
  • Hi all i know it's been a while since I posted this but wondering if someone could tell me what to do here please. In my package.json I have the proxy setup this way to do the call to heroku "proxy": "https://safe-****-*****.herokuapp.com" can you guys see anything wrong here? Thank you – user1847718 Feb 03 '22 at 17:54

0 Answers0