I'm serving a built react file using Nginx. I am able to access the react app in the browser on my vm's IP address.
I have another server running on my VM on port 8080, the API of the react app.
In my react I use axios calls like
const http = "http://localhost:8080";
..
axios.post(`${http}/api/auth/login`, { credentials }).then(res => res.data.user),
In my browser after I access my VM's ip address I can see in the console that the so called axios calls go to http://myActualVMIpAddress/api/.. instead of the localhost path as I was expecting.
I have checked the routes using postman of the api server.
I don't have experience with deployment. How do I make the link between the react app and the api server to work?
It is not a good idea to hard code localhost:8080 into your client JS, when your user loads the client files they will try and make a request on your users computer which is what localhost resolves to.
Easiest is to serve your client files from your api server. If you want to keep these separate then you have to use the IP of your API server (not localhost) and setup CORS.
Related
The issue I have is as follows,
I have a reactjs frontend and a asp.net core backend, I am trying to get data from the backend, by fetching, when accessing my frontend from outside my local network. My frontend is hosted using IIS on port 80, and portforwarded this port using ngrok. I am able to access my frontend now from outside my local network, but I am not able to fetch data from the backend, mainly because I am not sure where to make the calls to specifically.
The backend is listening on port 5000 and the frontend is making fetch requests to this port along with the target ip adress. But it can't connect. I have tried making calls using my public ip, local ip or just 0.0.0.0. I need it to work on my own pc, local network and outside my local network.
This might be a stupid issue that is easily solved, but I don't really have a clue where to begin here, hopefully someone can help me a bit further trying to resolve this issue.
When you call an API from your SPA (react app), the request is triggered from the browser showing your app.
So, when you load your port-forwarded app from outside your network, your browser, which is outside your network, is trying to call your API which is inside.
You have 2 possible solutions:
1/ port-forward the port 5000 of your router to the internal IP address (and port) of your server (e.g 192.168.1.10). Then from your React app, make the requests to your public IP address with the port (e.g 81.xx.xx.xx:5000)
2/ or, as you're already using Ngrok, install Ngrok on your server to get a direct URL to its port (ngrok http 5000) and make your requests to that URL
I am using react and nestjs,because my react project and the nest project are on the same server, I use 127.0.0.1 to access the API in react production mode, but I cannot access the service. Then I run the react project locally to access the API through the server ip and there is no problem. Where is the mistake?
web project in server
http://127.0.0.1:8000/admin/allposts net::ERR_CONNECTION_REFUSED
Try changing the ip to your server ip. Sorry, I cannot access your image posted, so it is only my guess.
http://your-server-ip:8000/admin/allposts
I have a react app as well as an express api running on a computer with an ipv4 address of 192.168.1.5
on ports 3000 & 9000.
When browsing http://localhost:3000 on that computer, my app works and I can make requests to the api. However when I open the app from another local machine I get the following output:
And here is base url for making requests in my react app:
Changing the baseUrl to http://192.168.1.5:9000/api makes the app work in my other machine in the same network, but not on the host machine anymore.
So my question is, what do I need to configure to have the app running both on my local computer as well as on another on the same network ?
You would probably have this line in express server
app.listen(3000, () => console.log("Listening"));
Pass "0.0.0.0" as host address.
app.listen(3000, "0.0.0.0");
Make sure that, your Firewall allows the selected port in Inbound rules.
Also Take a look at ngrok. Basically, it exposes your server to the Internet !
Yes, the public internet.
Before starting ngrok service, Start the express server. Pass the server port to ngrok arguments.
npm install ngrok -g
ngrok http 3000
Let's say I have a React app and want to connect locally to my local Tomcat server (for ultimately consuming REST endpoints from my React app). I have 2 questions;
Is there a standard local workspace setup recommended by React to point to our localhost running backend services?
Is there an easy/configurable setup, where I have both options e.g. switch from connecting to actual backend service TO say using mock
endpoint responses on my local i.e. by a simple config change ?
Note: I am trying to avoid hardcoding any absolute URLs on my client-side i.e. In my client side code, I would just have the endpoint defined as "mycontext/my/endpoint" and say if my React app is running on say http://localhost, then it should automatically construct the full endpoint as http://localhost/mycontext/my/endpoint
You can define environment variables, which could include the address of the API server you'd like to use. Then you would simply change that variable any time you wish to hit a different API server (be it localhost or remote).
If you are using Create React App to bootstrap your setup, you can also use the proxy setting in your package.json.
I have a ReactJS project with its own Dockerfile, exposing port 3000:3000.
I also have a PHP project with its own Dockerfile, exposing port 80:80. The PHP app also has containers for MySQL, Redis and Nginx
For the PHP app, I have a docker-compose file that creates a network (my-net) for PHP, Nginx, MySQL and Redis to communicate on. However, I now want the ReactJS (which is in a separate project) to be able to communicate with the PHP app.
I added a docker-compose file to the React project, and added it to the network from the PHP project my-net and declared it as external so that it doesn't try to create it.
This seems to work: From the ReactJS container, I can ping app (the name of my backend service) and it works properly. However, from the ReactJS code, if I use something like axios to try and hit the backend API, it can't resolve app or http://app or any variation. It can however access the underlying IP address if I substitute that into in axios.
So there seems to be some issue with the hostname resolution, and presumably this is on the axios / JavaScript end. is there something I'm missing or a reason this isn't working?
When the JavaScript runs in a browser (outside of Docker) you can not use app because that is only available inside the Docker network (via the embedded DNS server).
To access your PHP server from outside use localhost and the exposed port (80) instead.