Cloud development environment such as Github Codespaces or Gitpod is the emerging tool that help your developer life so much easier. The concept is that you don't need to install anything on your machine in order to boot up your application, but it is done on the cloud and accessible via Visual Studio Code IDE in the browser.
Flutter is also a fast growing SDK that allow developers to "write once, deploy everywhere" with native performance widgets. By the time of this writing, it has native support for most of popular platforms from mobile to desktop.
In this article, I will guide you through setting up a bridge between your Android devices and a Codespaces instance for mobile app debugging.
Before we start, make sure you have these items below checked:
- Github account with Codespaces (it's not Generally Available yet, so you might need to register for its beta program)
- ngrok.com account
- An Android 11 device (I'm using Samsung S21+ for this tutorial)
Installing ngrok on local device
ngrok is a service that expose your local port to the Internet without complicated setup. They have a free tier account, so let's head over to ngrok.com to register and follow their onboarding guide.
Preparing your mobile device
We need to enable developer options to proceed further. Simply clicking multiple times on the build number in Settings > About Phone until the developer options notice appears.
With Developer options enabled, head over to the section of the same name and scroll down to Wireless debugging section and turn it on.
Preparing Github Codespaces
The Codespaces instance needs to use a specific container image in order to run Flutter. Create a folder named .devcontainer in the root of your Github repo. Add below lines into devcontainer.json which is inside the created folder.
{
"image": "cirrusci/flutter:latest",
"forwardPorts": [3000]
}
You might need to restart your instance if it's running
Installing adb on local device and Codespaces
ADB, a.k.a Android Debugging Bridge is a command line interface that manages the connection between development machine and a mobile device. Below are some quick scripts for installing on different platforms.
MacOS
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
brew install android-platform-tools
Linux
wget https://dl.google.com/android/repository/platform-tools-latest-linux.zip
unzip \platform-tools-latest-linux.zip
sudo cp platform-tools/adb /usr/bin/adb
sudo cp platform-tools/fastboot /usr/bin/fastboot
Windows
Follow this guide for more detailed steps.
Note: Make sure the adb versions on your device and Codespaces instance are the same. Run
adb versionfor more information.
Pairing mobile device
Firstly, we need to establish a connection between our local device and mobile phone. Head over to Wireless debugging option that we enable earlier and hit Pair device with pairing code.
Open the Terminal and run below command with provided address and port:
adb pair <address>:<port>
On success, you should see some message like:
Successfully paired to 192.168.1.3:12345 [guid=xxx]
Now we need to connect our device to a Codespaces instance. Hit Pair device with pairing code again. Then run ngrok command:
ngrok tcp <address>:<port>
After getting the public address from ngrok, run this command in Codespaces Terminal:
adb pair <ngrok address>
On success, you should see some message like:
Successfully paired to 0.tcp.ngrok.io:12345 [guid=xxx]
Connecting device for debugging
In Terminal, run below command to spawn a new ngrok tunnel:
ngrok tcp <address>:5555
Replace the <address> with the address we use earlier. Then connect this new tunnel in Codespaces Terminal with:
adb connect <ngrok address>
Done! Now you can run flutter run to debug Android app on your physical device.
Some notes
If you couldn't access an Android 11 device, you can still use USB with this guide from Some Techy Website