Access flutter localhost from real mobile browser

Question

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

1. Console

2. Web browser(Chrome)

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 ?

Phosphatase

Yo can build the app flutter build web then run it using something like pythons simpleHttpServer , then it will be accesable on your phone if you are on the same network – Concealment

@TinusJackson Thanks. I'm out off python. Could you please share any reference or example ? – Phosphatase

@iAskay take a look at madhead's answer – Concealment

Answer 1

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.

Stephine

Using python command was too easy, it did my job. Thanks for the link it was helpful. – Phosphatase

Hey, noob here. What will be the webpage adress after running: python -m http.server 8000??? – Deserving

@PedroMassango, you should lookup your compute IP address in local network (like ip addr show / ifconfig). E.g. something like 192.168.100.42. Then, the address will be 192.168.100.42:8000 – Stephine

I'm sorry but "Flutter doesn't really output the JS" is just completely wrong. The development compiler DOES in fact output JS and Dart code does NOT "runs directly in Chrome"[sic]. The dartdevc simply outputs less optimised JS than the dart2js compiler. This is all fully documented at: dart.dev/tools/dartdevc & dart.dev/tools/dart2js Likewise there is no need to use Python, flutter run lets you set the port & IP addr it serves on. Please correct your answer. – Neutretto

Is it possible to use it together with hot restart? Or should I build the whole app every time I want to check a change? – Saccharase

It should work out of the box with hot restart. Just make sure to build the app in a dev mode. – Stephine

Answer 2

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.

Patiencepatient

This is the easiest solution for me. My mobile devices are connected to the same network. The only part I missed was the web-hostname. That did the trick. – Requisition

Why is this not the answer? – Perspire

what if I want to actually deploy it on one of the machines in LAN. Then how to do it? – Frazzle

You should follow others' answer. Build a static web by flutter build web and then deploy the web (at build/web) to your existing server. They provide you a simple way to create a server which use python server python3 -m http.server 8000. I usually use nodejs server. cd <your_project>/build/web and then npx http-server – Patiencepatient

@SethKitchen this is not a complete answer cause this is using for debug. When you use this, mobile browser will disable some function due to security (for example camera, microphone permission). If you use ngrok you can host an https web server to enable those features on mobile browser. – Nervy

On MacOS Sonoma 14.1 works perfectly. To get your IP, press Option (⌥) and click on the Wi-fi icon (🛜) in the top right corner. By default the Firewall on Mac is Off, so there is no need to open any ports. – Vulgarize

For anyone interested, I needed to restart my computer after disabling the firewall. I'm on MacOS. – Dusk

Answer 3

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

Witherspoon

Okay, that worked very well, but can we now simply put out code on a server and use the same process for hosting on it, for example on a ec2 instance? – Tilsit

Yes. Just upload all the files in this folder to Aws S3 and mark the bucket as a website or configure cloudfront. – Witherspoon

Answer 4

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)

Dermatoid

for ngrok use ./ngrok http.server 5000 – Dogtrot

Answer 5

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.

Bulbul

I tried using ngrok http <port> for my web app but the ngrok link did not open the app. – Tilsit

Answer 6

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

Tissue