Running localhost react app on mobile phones - reactjs

I need to connect my react app to my local network by typing in localhost on any device. Im not sure if this is possible. Right now I use my computers IP address and I type the address into my phone browser with port 300 and it works. The only thing is that I am using auth0 and I need a list of callback urls for it to work. Basically anything other than localhost in the url will be blocked. So i need to type in localhost:3000 on my phone and my react app needs to show up.

You can use a service like lvh.me that resolves back to the IP you provide as the subdomains. This will be fairly stable, but you will need to specify the domain to Auth0.
For example, if your IP address is 10.0.0.5 and your app is running on port 3000, from your local network you would visit http://10.0.0.5.lvh.me:3000/ from your phone. This request would resolve to 10.0.0.5:3000.

I am afraid it's not possible. The localhost refers to 127.0.0.1 IP in your computer which is like a globally followed convention for all the devices in the world.
Your router assigns an IP like 167.12.124.12 for each of the devices connected to it and if any other device is connected to the same router, they can communicate with each other by using the IP the router created for the devices.
The router assigned IP won't change unless your device goes offline for some reason. Try adding the IP as an allowed URL in the list of URLs in Auth0.

Make sure both your phone and computer are connected the same wifii. Then, try to figure out how to find your IPv4 Address. The screenshot below shows where to find it on mac, I guess you can find it by typing ipconfig on terminal, too. This IPv4 address is your localhost. I usually run my react app's on port 3000 so when you go to yourIPv4address:3000 on your mobile phone's browser you can see your react app on mobile. Hope it helps. Good luck.

Related

Why can't I see my react-app through local network?

I want to see my react app in my local network, but I can't. When I run npm start to start the local host and see my react app, it gives me two URLs. One for my current device and the other for the local network. When I open the local network URL on my phone, I just see that the page is loading. It doesn't give me any errors. I've ensured that my IP address is correct. Previously I was able to see the apps through local network, so not sure if I'm missing something trivial.
Follow these steps:
Setting -> Network & internet -> Wi-Fi -> xyz propeties (here xyz is connected wifi name) -> Network Profile Type -> check as private
Firewall & network protection (search it and open it) -> Private Network -> Microsoft Defender Firewall turn off
Hope it will work...
The best way to test your ReactJS app on your phone is to Follow the following steps
Run your using npm start
After Go to the CMD in your windows machine and type the command ipconfig then enter that IP address with:3000 port in your Smartphone browser
For Example, if your IP is 192.168.1.101:3000. the IP address should use a 3000 port
Note:- Make sure your PC and Smartphone are Connected on the same Wifi network

Error while using Teams connector in Logic app - Not able to connect global.consent.azure-apim.net or logic-apis-westerurope.consent.azure-apim.net

While using Teams connector in Logic App - not able to authenticate getting below error
Not able to connect to global.consent.azure-apim.net or logic-apis-.consent.azure-apim.net
I faced this issue hence want to share the solution as well.
It seems it is system related issue. We can verify that by pinging the URLs causing the issue we will not get the IP address.
we can ask someone in the team to ping these URLs and provide us the IP address
Put these IP Address :
logic-apis-.consent.azure-apim.net
global.consent.azure-apim.net
in host file in the location -
c:\windows\system32\drivers\etc

having trouble viewing react app on mobile device

at my wits end here. I am trying to view my react app hosted at: http://localhost:3000 on a mobile device. When I navigate to http://xxx.xxx.xx.x:3000 on my mobile device (x being my ip address) I get the error that the server refused to respond.
-I have tried adding an incoming rule in my windows defender firewall to allow access on port 3000 from tcp connections. Yet the error still persists.
-I have even temporarily attempted to turn off my firewall to test the connection and I still get the same result.
-my mobile and my localhost are on the same network
i have specified an outgoing rule for port 3000 as well
I am using create react app for my boilerplate code so I haven't edited any of the webpack settings. I am hoping someone might have a suggestion for me as to what I can try next?
I used my ipv6 address instead of my ipv4 address which was the incorrect address

Reactjs Script Server not available

"React-scripts", a series of scripts from create-react-app starter pack allows me to use "react-scripts-start" to initialize a server.
Everything works fine, the server turns on and I can access it on localhost:3000 or by using the IP:3000
The problem is when I use other devices from my house. I try to connect to the IP:3000 and it doesn't work. I'm getting "Server not found".
Is it a Windows access problem or am I supposed to set up the server?
I managed to solve my issue. For me, it was not in the firewall, not in the configuration files. Instead, it was the router.
Since I live in UK, I have Hub 3.0 from Virgin Media.
The solution is:
1) Navigate to Connected Devices and copy the IP address for your device. In my case it was xx.xx.0.16/24 so I copied "xx.xx.0.16"
2) Navigate to Advanced Settings > Security > Port Forwarding
3) Click on "Create new Rule". For Local IP will be your IP address, local start port & end port 3000; external start port & end port 3000; Protocol choose both; Enabled on
4) Apply changes
Now here is the trick. When I run the command
npm run start
I'm getting a message which says:
You ca now view your project in the browser:
Local: http://localhost:3000/
On Your Network: http://xx.xx.37.1:3000/
I can navigate to that IP address : 3000 on the hosting laptop however if I want to make other devices access it, I must use the IP address set up in the router which for me is xx.xx.0.16:3000

Apache2 forwarding to an old ddns server

I own a domain for a website (let's just use "X.com"), which for now I'm hosting on my home computer. This domain name points to my dynamic dns (x.ddns.net) name in the web forwarding of the domain name registrar as I have a dynamic ip and I haven't yet found a better way to make sure that the IP is consistently updated.
I recently changed the ddns address (y.ddns.net) and now whenever I try to access my site either from accessing the main domain name (x.com), or via typing in the local lan ip (192.168.1.56) I keep getting forwarded back to my original ddns address (x.ddns.net) and the website won't load.
I've looked through all the settings I can find both locally, with the ddns provider and with the (x.com) registrar to try to pin point where the forward takes place but I'm totally stuck.
Host system is Ubuntu, everything is up-to-date, nothing in /etc/hosts file pointing to the old ddns.
Thanks in advance for any help.
Try DDNS on Cloudflare
Only problem is that you need to move your domain to cloudflare dns servers which is totally free to use.

Resources