Flutter

Accessing Flutter Web Localhost from Your Mobile Browser

By 12 October 2020 No Comments

Accessing Flutter Web Localhost from Your Mobile Browser

Accessing flutter web from browser

Sharing is caring!

Flutter is the cross-platform application development framework which also makes it possible to run your codebase not only on mobile such as iOS and Android, but also on browsers as web apps. While in development, we can run our app with Chrome browser as a target platform. Upon successful deployment:

Console Output: 

Chrome Browser:  

Android Studio Console

There might be certain situations where you want to see the web output on a real mobile browser, like Safari on iPhone, while development. The most common way to achieve this by using IP address:

Chrome Browser

  1. We run localhost on machine 
  2. Grab IP address to which the machine  and mobile device connected 
  3. Feed in the IP address to mobile browser 

I tried the same for Flutter web. While it’s running on Chrome, I added the IP address of the network in my iPhone’s Safari like http://192.168.43.36:61867. But it didn’t work and I got ‘The site can’t be reached’. Why?

While we develop our app, Flutter doesn’t really output JavaScript. The ‘flutter run‘ command launches the application using the dartdevc 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 our app in JavaScript using ‘flutter build web’ command for a regular deployment (more info could be found here). Then, we can access it from other hosts.

We can use Python’s simple HTTP server to serve the app. There is no need to install any frameworks, configure anything, and write Python code. Just Python 3 needs to be installed on the machine. Then just run ‘python3 -m http.server 8000‘ command from our apps build output. It will serve the app on port 8000.

Here are the complete steps : 

  1. Open Terminal 
  2. Run cd PROJECT_PATH 
  3. Run flutter build web  
  4. Run python3 -m http.server 8000. This will show something like ‘Serving HTTP on 0.0.0.0 port 8000 ..’.
  5. Grab the network IP address, suffix it with the port 8000, (For example, http://192.168.43.36:8000), and hit the link in your mobile browser. (Please note the mobile also need to connect to the same network). You will get project folders in your mobile (as shown in the screenshot below)
  6.  Hit http://192.168.43.36:8000/build/web to see actual web app output on your mobile. 
Mobile Browser

This was the whole process to access flutter web output on your mobile device browser. 

Leave a Reply

Get started with Bloom