Debug django webapps like react native

By
Debug django webapps like react native

Introduction

Most websites/webapps are now mobile first. Internet browsers these days all have the mobile view that lets you see how the app looks on your phones. But this is not enough to judge the full mobile experience. So, it is better to debug it on an actual phone. To do this, we should either host the app on a server and open the URL on your phone. Or you can locally host it on your WiFi network.

What happens in react native

React native is a framework of javascript that allows you to build native mobile applications. Debugging in it is made beautifully. A server is started, this prints a QR code on the terminal itself. This QR code is then scanned through an app called Expo. This app automatically installs the app on your phone and runs it. This is the most convenient way I have ever done debugging.

What happens in Django

In Django, you have to run an HTTP server locally and either debug on your browser or connect your phone on the same network and access it on your phone through the IP address of your computer. This is a little troublesome. In the new method, we will essentially be doing the same thing. But most of the process will be automated.

Steps to follow

Extracting the IP address
  1. 'ifconfig' ('ipconfig' on windows) will give you all the IP addresses of the computer.
  2. We need to write a script to parse the output of ifconfig. We can use a function called check_output(), which is a part of the package 'subprocess'.
  3. Now we can parse the IP address using string functions or regular expressions and make a list of available IP addresses.
Generating QR code on the terminal
  1. Now we will make a prompt on the terminal to choose the network where you want to host the app.
  2. Once the network is chosen, we can prepare the URL by putting the IP address in 'http://IP:port/' format.
  3. Now, we have the URL of the web app. We just need to generate a QR code and print it on the terminal.
  4. The QR code can be generated and printed with literally 2 lines of code.
    url = pyqrcode.create("http://IP:port/")
    print url.terminal(quiet_zone=1)
  5. Run this script and you will see that the QR code will be printed on the terminal.
Enjoy debugging
  1. Once the QR code is printed on the terminal, it can be scanned by a QR code scanner on your phone. This will open the web app in your browser.
  2. For a more app-like experience, you can make a simple android app with a built-in QR code scanner which opens the URL in a webview.
Now you can debug web apps a little more easily. Hope this method makes your life a bit easier.