Test Locally on Localhost on iPhone and Safari/Chrome

[albertotono]

Do you have any suggestions how I can test the webxr model-viewer locally on my localhost using an iPhone?
after I do npm run serve is there a way I can connect with the 8080 port in my windows machine?!
Thanks again for the great project

[elalish]

Not possible, as WebXR is not supported on the iPhone as yet. As for serving localhost to my iPhone, I have found it easier to connect when it's served on my router's IP using: node_modules/.bin/http-server -c-1

[albertotono]

I am able to see the models https://modelviewer.dev/examples/augmentedreality/ in webAR with my iPhone with AR Quick Look, I would like to replicate it exactly while testing the model-viewer on my localhost 8080 after I do npm run serve.

I tried connecting with the http://127.0.0.1:8080/packages/modelviewer.dev on my iPhone but it doesn't display it.

I am not sure about your suggestion @elalish, thanks for the quick reply, much appreciated. could you expand on it ,please

[elalish]

yeah, you can look in package.json to see the command that npm run serve is actually running. My command above is a slight modification to that which serves at multiple URLs. The output of the command shows the addresses it serves on, so try each one. I'm not sure why iPhones hate localhost so much.

[albertotono]

So if I run

node_modules/.bin/http-server -c-1

I get this

Starting up http-server, serving ./
Available on:
  http://192.168.1.20:8081
  http://127.0.0.1:8081
Hit CTRL-C to stop the server

instead if I do npm run serve

I get this

Starting up http-server, serving ./
Available on:
  http://127.0.0.1:8082
Hit CTRL-C to stop the server
open: http://127.0.0.1:8082/packages/modelviewer.dev

But I am not sure what I am supposed to do after because if I navigate to http://127.0.0.1:8082/packages/modelviewer.dev with Safari, It says it cannot open page because it could not connect to the server. I also tried with Google Chrome.

Any suggestions?!

[elalish]

Well, I said try all the addresses; looks like you only tried one. Try http://192.168.1.20:8081 and see if I works better.

[albertotono]

I tried also http://192.168.1.20:8081 but nothing shows up.

1. should I open the port on my windows computer first? ( https://www.firehousesoftware.com/webhelp/FHMobileResponse/Content/FHMRInstallGuide/12_ManuallyOpenWin7Port.htm)
2. where can I see all the other Ip addresses, because I know the Ip only from ipconfig and the suggestions provided after running npm run serve?
3. Would be easier if I deploy to heroku?! ( Tested, it has issues in the deployment)