Rendering localhost react app on mobile phone - reactjs

I have been trying to render localhost:3000 (React app) on my phone. I have tried the following,
Connecting my MacBook and the phone to the same wifi, getting the ipv4 address and adding port 3000 to it and accessing that IP address port combination in my phone.
I have tried turning off my firewall.
I also tried npm start --host 0.0.0.0
I am running localhost on my MacBook. My colleague who has a Windows machine is also facing similar issues.

Make sure that the wifi network's wireless settings do not prevent local clients from connecting to each other. There is a setting often called "Wireless Isolation" which is pretty common - enabling this results in clients only being able to connect to the outside internet, but not to anything else (such as other wifi clients) on the network. While this is useful from a security perspective when the network administrator doesn't know whether the devices that want to connect are trustworthy, it blocks network functionality. Go into the router's settings and turn this off if it's on.

Related

Is there a way to connect NextJS app on my phone trough local network in development like Create React App does?

Create-React-App provides a URL that I can connect through my LAN network like this:
Is there a way to expose the NextJS URL through the LAN network?
The server is accessible on the local network, as long as the network is configured properly (and doesn't have something like client isolation enabled). All you need to do is find out which IP address your network's router is allocating to you. On Windows, this can be done by checking the results of ipconfig. On Linux, you can use ip addr. Then, when you want to access the app from another device, just use the IP found above followed by the port set in next.js.
For example, I have a machine whose network IP address is 192.168.1.2. On that machine, I have a Next app running on port 56381.
ready - started server on 0.0.0.0:56381, url: http://localhost:56381
I can access it on my phone by going to 192.168.1.2:56381.

How can i host my react js website publicly on my raspberry pi

i made a react js website and everything is working fine but i can't figure out how to host it on my rasp pi4 and make it publicly visitable by other people. I also bought a domain. So my question is: How can i make my reactjs site public and running on my rasp. Thanks!
You have to configure a web server like Apache and build the React app with npm or yarn. Then copy the build files to the /var/www/html/ directory. You will also have to look into port forwarding your router to your local web server and open it to the public. Just be careful with security.
You need to configure a web server to host the site. Either Apache2 or Nginx (I have a personal preference to Nginx, but either works fine for this). Under Debian/Raspberry Pi OS, /var/www/html should be served on port 80 on all of the pi's IP addresses. Place the site files there and make sure you can access the site from the pi's IP address.
For making the site available outside of your network, you will either need to look at port forwarding, hosting a VPS with a public IP, or using a tunnel. Port forwarding is likely going to be the hardest option and may not always work, but doesn't require any external services outside of your DNS provider. Tunneling is probably the second easiest, and using a VPS is almost certainly the easiest.
For port forwarding, yu will need to verify that your ISP does not use CGNAT, otherwise this will not work. Assuming they don't, you will need to access your routers configuration and set up port 80 on TCP to forward to your pi's IP address. I would assign your pi a static IP address, either on the pi itself, or using DHCP reservations. Next, you need to see if your DNS provider offers Dynamic DNS. If not, you will need to manually update your DNS settings in the case your networks public IP changes (unless you purchased a static IP from your provider). In this setup, you point your domain at your networks public IP. Traffic goes directly between the client's browser and your pi.
Tunneling is a fair bit easier. I personally use Cloudflare for my DNS (I set my domain with my registrar to point to Cloudflare, then used their tunneling tool (Cloudflared) to tunnel traffic from their servers to my pi. There are other tunneling services, but I think Cloudflare's is the best out of all of the ones I used. In this setup, you point your domain at Cloudflare, which forwards the traffic to you via the tunnel. Traffic goes from the browser to Cloudflare to your pi.
Using a VPS is probably the easiest, and your knowledge of working with the pi applies to working with a VPS, assuming you run Debian linux or similar on your VPS. You would install the web server on your VPS, put the app on the VPS, and point your domain at your VPS's public IP. In this setup, traffic goes from the client browser to your VPS. This is the only non-free option (excluding the price of the domain itself), and keeps your local private network safer by not putting public services on it. You can also run a tunnel between your pi and your VPS if you want (see https://www.jeffgeerling.com/blog/2022/ssh-and-http-raspberry-pi-behind-cg-nat for an example), but I don't personally see the point unless you really want the app to be served from your pi.

rails server successfully, but can't access in mobile

Iam able to access rails app in all systems with in network, but unable to access in mobiles.
I started app like below
rails s -b ip
Double check if your mobile is in the same network of your server. You can do this either by pinging your mobile device (if it support ping) or doing a network scan using tools like nmap or take a look at your router to see where is your device. If you want to allow all access, the binding ip should be 0.0.0.0.

Accessing localhost (xampp) from another network?

I've been searching the internet the whole day... I cant find my solution.
What I have:
- Xampp server installed en configured
- Working website (local)
- Local ip
- External ip
- Port 80 and 8080 allowed in Firewall
What I want:
- Enter my website and database from any network over my IP address. So, when I am at work, I want to access my website using my (external) IP address.
I am working on a RSS feed in a website and mobile android application, the app is connected (should be) with the website's database. But for this, I need a working IP address.
Can anyone tell me step by step what is have to do? I am not a leek, but not good in English.
Ok, you can access your XAMPP outside of you computer is possible only if you are in same network on which your computer is connected. I mean; consider the local ip of you computer where xampp is installed is 192.168.100.1 then you can access it from any ip like 192.168.100.xyz.
Now if you really want to access it from outside of your network you can set up a VPN or port forwarding.
There is a easy solution is to use ngrok. You can get details here
It is really simple to set up.

Mobile Hotspot Replaces Site Address With Incorrect IP

On some of our web apps, when a user connects via a Verizon 5510L Jetpack mobile connection the site address is replaced with an incorrect IP address, and of course throws a 504 error.
Has anyone else ever experienced this? or know why this is happening?
We have other apps that are very similar, on the same server that do not have this issue. Unfortunately this is a popular device with our customer so avoiding the hardware is not an acceptable fix.
As a workaround, the user can connect to the site via a different connection, keep the browser open and connect to their mobile device. This Also is not an acceptable fix as the applications are often used in remote areas.

Resources