How to Develop and Test Dash Applications on your Phone

Dash Python
1

BUILD MOBILE! The importance of this can not be over exaggerated, although I truly believe the majority of nerds building plotly and dash applications are designing web apps focused on understanding data from a PC’s browsers prospective. If you ever plan on releasing an actual enterprise application, the priority of development should shift drastically to mobile development.

When looking into the analytics of my websites and app’s I’ve launched, one thing that surprised me was on average 70-80% of the traffic was from phones. With an app not being specifically designed for mobile you are put at an extreme disadvantage.

With this I have a great life saving tip to help those developers listening that could save your project from being a failure to being the success it deserves to be.

My secret sauce for mobile development is… set you host to:

if __name__ == '__main__':
    app.run_server(debug=True, host='0.0.0.0', port=8931)

Find your ip address from your computer, usually easy to do with just looking into your wifi settings of your computer. Then grab your phone, make sure its connected to the same wifi as the computer you are developing on. Go to safari, google or whatever you use to search the web on your phone and type in http://REPLACE.With.IP.Address:8931. Just replace REPLACE.With.IP.Address with whatever your IP is then set the port with whatever the port is on your dash app. BAM You can test mobile development live, directly on your phone.

  • also note, you can replace host='0.0.0.0' in your app.runserver with your IP address and thats the ideal setup for mobile and desktop development. JUST REMOVE IT BEFORE PUSHING A GITHUB REPO!!! Or… I’ll hack ya, :stuck_out_tongue_winking_eye: jk… (safe for local personal development, just don’t want to share your IP address online like in a public github repo or in this form or anyplace where randoms can find it)

If you enjoy this tip, check out my github and follow me. Have plenty of useful plotly and dash related projects and components that could be a nice to unlock.

cheers :beers: ,
Pip

1 Like
2

Hello @PipInstallPython,

This definitely works. As well as being able to test of multiple computers and making sure the app doesn’t fail with a completely new instance.

I will point out that for testing responsive design, you can also open up the developer console on the browser.

3

Yeah, chrome tools a good tool for a glance and to see if it kinda fits. Idk why though but i usually catch some bugs i wouldn’t when i test on my own mobile. Kinda seems like dev tools just a little off or its something about using actual touch as in navigating from your phone and testing vs using a simulators mobile browsers inspector. Great addition to the post tho.

Thanks!

4

I agree, that are some things that are finnicky.

But the dev tools allows you to fine-tune your break points. Also lets you know if things arent in sync for the break points. :smiley:

5

Thank you for this tip, @PipInstallPython. I can see how it can help with Dash app development.