When developing my front-end having used create-react-app, I can connect to it on my local machine using http://localhost:3000/ or on my network using http://192.168.1.160:3000/. My back-end (NodeJS/Express) is also on my local machine on http://localhost:5000/.
On my front-end, I have the URL to my back-end stored in an env variable as http://localhost:5000/. The problem is when I connect to my front-end from my mobile(on my network using http://192.168.1.160:3000/), it does not recognize http://localhost:5000/. I'm guessing it is because I have to use http://192.168.1.160:5000/ to connect to the back-end on my network.
This seems to require changing the back-end URL in my env file every time I want to test it out on mobile. Is there a way I can connect to my front and back-end from both my local machine and my network without having to constantly change the URL?
Related
My idea is to run Spring back-end app on port 8080 and React app on port 4200 and to make it accessed through local network.
Idea is when someone connect on WiFi, he can access my local app which is running on port 4200.
My question is, is it secure to run it on computer that is used by operator, and which is in used in everyday activities
(so on that computer will be running MySQL database, spring app and react app). I know that maybe it is better to run it on separate server,
but it is not cheap. Also I can not host in on some servers, because this app can only be accessed if user is in the building (so my idea is to make it accessed only if he is on that network and I will make network to be available in whole building). Is this good idea, I hope that this can not make malicious user to make something bad on that machine..
I have tried evertything
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
We have a multi-containerized application(docker-compose) running on our Docker Desktop. There is one Camunda BPM backend service running on a container which we are trying to access from our front end application based on React running on other container. The issue we are facing is that , when are trying to access Camunda BPM service through the exposed port using "localhost" its not working. But things work when we use local IP on the host machine. What it makes different between localhost and local IP while accessing a service on back end from a front end REACT application?
When two services (containers) are running within docker-compose they are using a dedicated network. Thus, the services can communicate by their names and not localhost.
If you call your camunda's service camunda and it is listening on port 8080 - the react service can access it via http://camunda:8080
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.
I developing an app with GAE as a back-end, when I run GAE server locally I can reach it in the browser through localhost:8888 but when I try to reach from an external device on the same wifi network, with my <my local ip>:8888 I get no response. I was always using this way do debug my apps and back-ends and suddenly it stopped working?
Found the answer at last, add 0.0.0.0 address to the servers run arguments. As described here :
Can access AppEngine SDK sites via local ip-address when localhost works just fine and a MacOSX
https://developers.google.com/appengine/docs/java/tools/devserver#Using_URL_Fetch