2

I have a react app that I would like to test in mobile, but the mobile dev tools in either Chrome or Firefox are not enough.

Backend runs on localhost:5000 and frontend on localhost:3000.

If I run both ngrok http 3000 and ngrok http 5000 and I use the link given by ngrok http 3000 I can access my frontend but (understandly so) it can talk to my backend as it is looking for a localhost: 5000 server relative to my phone rather than looking to the link given by ngrok http 5000.

My question is:

  1. What is the best way of configuring my app and ngrok so that I can simultaneously test my app on my computer and on my phone?

  2. Is there a better way of doing this without using ngrok at all?

Thanks

Mehdi Saffar
  • 691
  • 1
  • 8
  • 24

2 Answers2

2

First, you can configure proxying to backend from your development server. This will enable your frontend to access backend through relative URLs (like /api instead of localhost:5000/api) from any location. In order to do this, you should add "proxy": "http://localhost:5000" to your package.json and then make sure your backend requests don't match something you have in your frontend, preferably by using a prefix. More details here.

Given you test the app only from within your local network, you don't need ngrok as you can access your development machine from the phone via its local IP. To find it out, run ifconfig or ipconfig and type the returned local IP (usually something like 192.168.X.X) in your phone instead of domain provided by ngrok.

Yuri Fedotov
  • 131
  • 4
1

Form your frontend where you have made configuration from API server replace this with Ngrok URL where your backend is running and then Ngrok your frontend and then you can access your frontend from anywhere

Rahul jyala
  • 17
  • 9