0

I have created a simple JSON.server project with the following code: npm install JSON-server -g

I run this server with the following code: JSON-server --watch db.json -p 3001 -d 2000

when I run this server in my browser, it works but when I fetch data from this server in react native, this doesn't work.

my react-native's codes for fetch data from JSON.server:

return fetch(baseUrl + "data")
  .then(
    response => {
      if (response.ok) {
        return response;
      } else {
        //error
      }
    },
    error => {
      var errmess = new Error(error.message);
      throw errmess;
    }
  )
  .then(response => response.json())
  .then(dishes => dispatch(fetchData(data)))
  .catch(error => dispatch(dataFailed(error.message)));

fetchData method:

export const fetchData = data => ({
  data: data
});

update 1:

this is baseUrl:

export const baseUrl = "http://192.168.1.8:3001/";

please help me what is the problem.

I have tried this question but my problem has not fixed.

  • What's the error you're getting? – Clarity Aug 01 '19 at 08:12
  • Shouldn't your endpoint be `fetch(baseUrl + "db.json")` since you are watching that file instead of `dishes`? Is there a `GET /dishes` route available on your server in `db.json`? Might help if you can share error message and routes defined in `db.json`. – Amar Aug 01 '19 at 08:32
  • You also set a custom port `3001` instead of default 3000. This needs to be added in `baseUrl` Ex: `http://localhost:3001/` – Amar Aug 01 '19 at 08:36
  • I have updated my question. please look at it again. –  Aug 01 '19 at 10:33
  • I haven't any error. I don't receive any data from JSON.serever. @Clarity –  Aug 01 '19 at 10:45

2 Answers2

1

You would use localtunnel to get a server working on both devices:

Install localtunnel globally on your dev machine

yarn global add localtunnel

Then you use json-server to setup and run a mock server. The following command sets up the mock server on localhost and port 8000

json-server --port 8000 ./db.json --watch

Next to expose the mock server to the web use localtunnel

lt --port 8000 --subdomain application-mock-server

The above command will return a URL accessible across Internet of the form 

 https://application-mock-server.localtunnel.me.

Then you plug this URL inside your React Native code base and will be accessible from the application running inside Expo on the mobile.

* Check full article here.

Vlad Garaba
  • 11
  • 2
0

my issue was because of my ip4 address.
as I told before, I have tried this question but my problem has not fixed.
I did find a way to fetch data from the server.

For those who are facing similar problem.

Steps:

1) Go https://ngrok.com/ and create account

2) Login

3) Go to setup & installation, follow 1, 2 steps.

4)Place the ngrok.exe in a folder of your choosing. Make sure the folder is in your PATH environment variable.

5) Follow step 3 of setup & installation.

6) Open your command prompt and type ngrok http (eg: 3005) and enter. You will get a ngrok url (eg: forwarding http://977ab183.ngrok.io)

7) Make this url (eg: http://977ab183.ngrok.io/) your app baseUrl

8) Open another command prompt pointing to your app directory and run your json server: json-server --watch db.json -p 3005 -d 2000