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!
Related
Previously I have been using heroku for deploying my Node.js app's backend but recently I moved to render.com for the same.
I have been using firebase for hosting the frontend part of the app which is set to automatically deploy on github pushes with the help of github actions.
There is an environment variable for storing the endpoint of the backend api which was previously the url address which heroku gives on deployment and now I have changed the variable value on github secrets for it and pushed the changes to github which should deploy the whole app automatically with new backend host but the app on launch throughs some errors which on console seems like the app is still using older heroku api url for all its api requests
as shown below are the secrets in my github repo of which I have updated the REACT_APP_API's value to its new value
this is my github actions workflow file to deploy the frontend automatically on push
these are some of the errors on the console which are printing urls with older api of heroku
I have no Idea why its not taking the new secret value for the api url for the frontend.
Any help is appreciated.
I created a server-side and deployed it on Heroku so I have a URL from Heroku that I can see the data transferred from the backend when I enter that URL.
I put that link in the react app package.json file as "proxy" and when I run the react app locally I can see the data from the backend rendered on the website.
I have tried to deploy the react app on Heroku and netlify and on both you can see only the react components rendered without the data that is supposed to be transferred from the backend.
any idea why is that?
In my opinion it has to be something related to the build folder since that run the app locally works great
****update:
After running the build version locally i can see the data is not passed so I'm assuming something is wrong with the build version
I am working on a react isomorphic app in which my express server is running along with the client app now I want to deploy this app but didn't know the proper way to deploy this kind of app.
this boilerplate of my project client folder contains react app and server.js contain express server. normally we run the build command and deploy our project's build. but in this case, if I run the build command then I lose my server.
my react app is running on 3000 port while my server is running on 5000.
if anyone has the solution or gives a bit of advice.
I need to get data from google bigquery and it is not possible from the client-side so use this approach
I am little novice when it comes to deploying full-stack applications.
I am building a basic react app (created with create-react-app) that needs to deployed on Heroku and hit my Rails backend API (separate repo, already built and deployed on Heroku). Do I need to setup a http server (i.e. Express or Nginx) to route requests from the browser to the backend app? Or can I just rely on the default webpack production server to handle this.
Appreciate anyone's help!!
You don't need a back-end to serve static content on Heroku.
Have a look at this article to get started: https://blog.heroku.com/deploying-react-with-zero-configuration
It uses https://github.com/mars/create-react-app-buildpack and it's easy to get stated, I managed to deploy the example app in a few minutes.
I currently have a Ratpack Groovy application hosted on heroku, I've managed to get it working correctly and deploying to the URL Heroku created for me. I decided to make a ReactJS application, which grabs the data from my database from an API I've built in Ratpack, my React application acts as a basic CMS where I can post data back to Ratpack and update the database.
My front end templates get rendered from within my Ratpack handlers, this all works fine locally. I followed
https://github.com/gschrader/ratpack-react-boilerplate
Here is my basic project structure
So I can run ./gradlew run which builds the react app and starts up my Ratpack app in the root of my project and then yarn start in my React directory which starts up my react application on localhost:3000.
My question is how do I deploy this on Heroku, at the moment it's in one big directory, so could I deploy it as one project? I'd like the cms to be on a sub domain such as admin.application.com. I am pretty confused as to how this would work, if anyone has any documentation that would be very helpful.