CODEWITHSUNDEEP
localhostmobile-website
punkish
punkish

Reputation: 15278

how to test a website (with multiple services) on localhost on my laptop with my phone

While I can connect to the local IP address of my macbook (say, 192.168.1.101) from my iPhone (http://192.168.1.101:8080/index.html) to test my website, the web app itself is, in turn, requesting two other local services at http://localhost:3000 and http://localhost:3010. All these localhost addresses get replaced with the real addresses of the services when pushed to the outside server. But, how do I test my website within this local world? While I can get to http://192.168.1.101:8080/index.html from my iPhone, the iPhone has no clue where is http://localhost:3000. Of course, I could replace all instances of localhost with 192.168.1.101 but tomorrow that dynamically assigned IP address could change, so this does not seem like a very reliable approach. Is there a more elegant solution?

More details below

My web app is 100% client-side. In fact, it is served off Github Pages, so there is no way to manipulate anything once the repo is git pushed to Github. The app itself queries two other services (running elsewhere in production, but all of them running on my MacBook in development). My development process is

I have a snippet of JS code which is like so

const globals = {

    uri: {
        api: window.location.hostname === 'localhost'
            ? `http://localhost:3010/v3` 
            : 'https://real/server1/',

        map:  window.location.hostname === 'localhost' 
            ? `http://localhost:3000` 
            : 'https://real/server2/'
    },
    …
}

and further down

await res = fetch(`${globals.uri.api}`?queryParams);
…
L.TileLayer(`${globals.uri.map}/z/x/y`);

I test the app itself by firing up both api and map services, and then starting my web app with npx http-server and going to http://localhost:8080/index.html. This system has worked very well till now.

Now I want to test my website on a real phone instead of the browser webdev tools responsive mode. I tried both localtunnel and ngrok and failed spectacularly with both of them because they insert a page that one has to agree to and click on a button… so, while I can do that for my web app, my web app gets stuck when trying to reach the other two services.

Now what?

Upvotes: 0

Views: 52

Answers (1)

Bishakh Ghosh
Bishakh Ghosh

Reputation: 1258

You should try mDNS.

Since you are using a mac, find the name of your Mac using hostname command (at the Terminal prompt).

Use that name with .local extension in your URL. E.g. http://Punkishs-MacBook.local:3000/

Btw ngrok should work fine with a paid plan. Same with https://pinggy.io/ which is a neat alternative.

Upvotes: 0

Related Questions