I hosted my react application using surge.sh
https://deranged-ticket.surge.sh/
And my web server is running on my localhost:5000 , so when my frontend application makes api requests it goes to a diffrent url as you can see in this image. How can i make it go to
https://localhost:5000/api/v1/transactions instead of
https://deranged-ticket.surge.sh/api/v1/transactions
Related
We are currently facing an issue with the Progressive Web Application (PWA) built using ReactJS. The PWA is deployed as a container within a Kubernetes cluster on the cloud and is intended to connect to a NodeJS server that is running as a container on a Raspberry Pi device. The desired approach is for the PWA to be accessed through a mobile device's browser, and for the mobile device to provide internet to the Raspberry Pi through its mobile hotspot, so that both the PWA and the server will be on the same local network and the PWA can communicate with the server using the Raspberry Pi's local IP address RASPBERRY_LOCAL_IP.
However, during the development process, where the Reactjs app was running on the localhost within the same local network to which the raspberry pi was connected, the Reactjs app could reach the nodejs server on the raspberry pi using its RASPBERRY_LOCAL_IP.
we encountered an issue when the Reactjs app was pushed to the cluster to run there as a container and it was then unable to connect to the server. In the last scenario, the Reactjs app runs over HTTPS with a trusted certificate, while the NodeJS server runs over HTTP. This has resulted in a "Mixed Content" error, specifically that "The page at 'http://RASPBERRY_LOCAL_IP/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://RASPBERRY_LOCAL_IP/'. This request has been blocked; the content must be served over HTTPS."
This error occurs because the Reactjs app, running in a container in the cluster, is attempting to make an XMLHttpRequest to an endpoint on the NodeJS server that is running over HTTP, which is considered an insecure connection. Since the Reactjs app is running over HTTPS, it can only make secure requests and therefore the request is blocked.
In conclusion, the technical challenge in our Reactjs app's ability to connect to a NodeJS server is due to the mismatch in the protocol used by the Reactjs app and the NodeJS server. Trying to find a solution to this issue to ensure smooth communication between the Reactjs app and the NodeJS server.
I have React website code (with redux code also to integrate API in website) when I host it on Github-pages or Netlify or firebase, it shows front end only, API is not integrated on hosting (API works fine on localhost)
how to integrate redux API on hosting (for free or paid)?
Could you please share the code? As long as the API is served using a suitable backend server that is hosted appropriately, changing the BASE_URL should do the trick. I am assuming the code that you have deployed still used localhost:5000 or any localhost base url. Like you had in dev environment.
There is a back-end server using asp.net core web-api, and the Nginx as reverse-proxy, all hosted on docker on the ubuntu server.
Also, a client-side web application (reactjs) which makes REST API calls to the back-end using JS 'Fetch' (or Axios, etc...)
The client-side app is not centralized and it could be hosted on any number of servers.
(Let's say hosted on 5 servers.
So now we have 1 back-end server, and 5 servers hosting that reactjs app.)
objective
Every time one of the client apps makes an HTTP request to the back-end, I want to get the IP address of the server that's hosting that specific reactjs app.
But what I'm getting is the end-user IP address, not the server that's hosting the react app
Is it possible to do that? without asking the users to put their server's IP into their REST requests manually?
I've tried some Nginx configurations with no luck.
Thanks in advance.
I have two instances on Google Cloud Platform (GCP), one with the frontend React app, another with Spring backend. The second instance allows ingress traffic from the frontend instance. Curl from frontend to that instance works correctly, but when I open frontend in my browser requests to my backend fails due to connection timeout. How to determine the problem and fix this. Instances running on GCP.
My project contains two apps. Backend – springboot and a frontend - React.
I am using the spring-boot app only as a rest API to fetch data from the database. The React app frontend will call the API. Up until now, we were using only one environment (Windows) so production build was one jar that actually contains both apps and a tomcat. That was quite simple so by adding a proxy in the package.json file to point to the backend and some maven(frontend-maven-plugin) plugin the building process is simple.
Now we need to change the system architecture so each app will be hosts on a different windows machine.
I was trying to use express to host the react app but I am struggling with the proxy setup for the backend (spring) app from the express server. All the tutorials that I found actually using the express server as the backend API but I need the express server only for hosting the production build.
Is there a good tutorial that shows how to set up this type of architecture in production env.
Thank you