Expo cant get data from json-server node.js

Question

I recently started to learn react native. I have such a problem.

I launch the Expo application and it works I go to the subitem where the data is taken from the json server and there is empty. Writes a network request failed. As I understand data from the server is not read.

Here is more detailed.

First, run json server, type json-server --watch db.json -p 3001 at the command prompt. It all started. I'll go into the browser and type localhos: 3001 / books. And the data appears. As I understand it answers the request.

Next, run react native. Everything loads, runs in the metro bundler browser (localhost: 19002).

There are three types of launching the program on the phone:

1.local and the address 127.0.0.1, as I understand it, it is needed to connect and run through the usb cable. I tried using this method the application starts. But the data does not appear. Writes a network request failed.

2.lan and the ip address of the computer, as I understand it through wi-fi. Since I don't have a wifi router, I tried to give wifi from my computer. I connected a modem. And its began sharing wifi. I connected the phone and started it. It did not start at all. IP address of the computer in lan mode by default, takes IP address from the modem (192.168.8.100) and the phone (192.168.43.216). In short, the phone and the computer must be on the same local network. I think may be if I'll take another comp. It will be used as a Wi-Fi routet instead of a router. And then I'll connect my working computer and phone to it. I configured ip addresses. Still not starting. I think that i did something wrong I am not an expert in local area networks. If you have any ideas, help.

3.tunnel did not quite understand how to use. I decided to share the wi-fi from the phone and make an access point. Connect my computer and ran. It seems to have started but still does not show data.

Please, help.

1) to form lan connection without wifi router.

2) how to read data from json server to the phone.

Ps i killed 3 days trying to figure it out.

Answer 1

I copied the example from "Getting Started" in the README and then ran npx json-server --watch db.json -p 3001 . I then went to http://localhost:3001/posts/1 in my browser and it worked as expected.

Next, I opened a new tab in terminal and ran npx ngrok http 3001 to expose create a tunnel to access the http server at port 3001 from anywhere. Once the tunnel started I saw the following information:

ngrok by @inconshreveable                                                                     (Ctrl+C to quit)

Session Status                online
Session Expires               7 hours, 58 minutes
Version                       2.3.35
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://ef4b99ca.ngrok.io -> http://localhost:3001
Forwarding                    https://ef4b99ca.ngrok.io -> http://localhost:3001

I opened https://ef4b99ca.ngrok.io/posts/1 in my browser and it worked as expected (this will not work for you when you are reading this because I will have closed the ngrok tunnel and my json-server by then).

If you follow these steps and use the tunnel URL in your app you will be able to access it in development from your device.