CODEWITHSUNDEEP
flutterdartlocalhostmobile-safariip-address
iAkshay
iAkshay

Reputation: 1263

Access flutter localhost from real mobile browser

I have flutter web app which can be easily deploy to chrome browser on my PC. Upon successful deployment:

  1. Console

enter image description here

  1. Web browser(Chrome)

enter image description here

I'm looking for the way to access localhost running in chrome from my iPhone browser. My iPhone and PC both connected to the same network. I grabbed IP address of the network and tried accessing from my iPhone safari browser with the link as:

http://192.168.43.36:61867

But it's NOT working and I'm getting 'The site can't be reached' message. Is there any extra step I can perform to make flutter localhost accessible from my mobile browser or simply its impossible with flutter ?

Upvotes: 26

Views: 32326

Answers (6)

Mahad
Mahad

Reputation: 106

To access on another machines which are connected to same network

  1. copy your network ip address and write specific port next to the ip
  2. in the project terminal run

flutter run -d web-server --web-port (port) --web-hostname (your-ip-address)

Example:

flutter run -d web-server --web-port 8080 --web-hostname 192.168.100.17

so then we you hit the link http://192.168.100.17:8080 it will open the app

Upvotes: 2

luisdemarchi
luisdemarchi

Reputation: 1572

The only way I managed to make it work on the Mac and test on the iPhone:

In your terminal, inside the project folder:

flutter build web

Building without sound null safety For more information see https://dart.dev/null-safety/unsound-null-safety

Compiling lib/main.dart for the Web... 34.5s

cd build/web
python3 -m http.server 8000

Serving HTTP on :: port 8000 (http://[::]:8000/) ... ::1 - - [28/Mar/2021 18:34:31] "GET / HTTP/1.1" 200 - ::1 - - [28/Mar/2021 18:34:31] "GET /main.dart.js HTTP/1.1" 200 - ::1 - - [28/Mar/2021 18:34:31] "GET /manifes....

Then in a new terminal tab:

~/ngrok http 8000

Forwarding https://xxxxxx.ngrok.io

or information on how to use ngrok: www.ngrok.com

Upvotes: 8

LemonTea
LemonTea

Reputation: 800

If you want debug only, you may use

flutter run -d web-server --web-port 8080 --web-hostname 0.0.0.0

then access http://<your-ip>:8080

** also you should ensure that your port(8080) is open.

Upvotes: 80

Cristian Q
Cristian Q

Reputation: 647

Alternative

  1. build app : flutter build web
  2. change dir : cd <pathProject>/web/build
  3. up any server : python -m http.server 5000
  4. up ngrok : ngrok http.server 5000
  5. in mobile browser : "https://a824ccb9d545.ngrok.io " (example)

Upvotes: 3

unbalanced_equation
unbalanced_equation

Reputation: 899

Use this free service ngrok.com that lets you expose your localhost publicly. So you can not only access your app while developing from the same network but also share it with some one else over the internet, in your case your mobile.

Upvotes: 1

madhead
madhead

Reputation: 33511

While you're developing your app, Flutter doesn't really output the JS. The flutter run command launches the application using the development compiler in a Chrome browser, which means that Dart code runs directly in Chrome. And you cannot really access Chrome from another machine in the network, as it doesn't act as a server.

You should probably compile your app in JS (AKA flutter build web) for a regular deployment, to access it from other hosts. You could use Python's simple HTTP server to serve the app. There is no need to install any frameworks, configure anything, and writte Python code. Just make sure you have Python 3 installed and run python -m http.server 8000 from your apps build output. It will serve the app on port 8000.

Upvotes: 10

Related Questions