Accessing Flutter Web Localhost from Your Mobile Browser
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:
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:
- We run localhost on machine
- Grab IP address to which the machine and mobile device connected
- 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?
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 :
- Open Terminal
- Run cd PROJECT_PATH
- Run flutter build web
- Run python3 -m http.server 8000. This will show something like ‘Serving HTTP on 0.0.0.0 port 8000 ..’.
- 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)
- Hit http://192.168.43.36:8000/build/web to see actual web app output on your mobile.
This was the whole process to access flutter web output on your mobile device browser.