Install, build and debug a react native app in WSL2 (Windows Subsystem for Linux) and Ubuntu.
- Install tools in Windows
- Install tools in WSL2
- Connect to android hardware device from WSL2
- Connect to android virtual device in Windows
- Connect to Windows Subsystem for Android
- Create react native app in WSL2
- Build app in WSL2
- Debug app in Visual Studio Code from WSL2
- Install WSL2 and Ubuntu, see here
- Install Android Studion, see here
- Install Viusal Studio Code, see here
- Install java-8-openjdk in WSL2 (sudo apt-get install openjdk-8-jre)
- Install Android SDK cmdline tools in WSL2, see here and adjust directory structure, see here
- Install nodejs in WSL2, see here
Set environment variables in .profile or .bash_profile
export ANDROID_HOME=/home/xxx/Android/cmdline-tools/latest
export ANDROID_SDK_ROOT=/home/xxx/Android
PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools
PATH=$PATH:$ANDROID_HOME/bin
export JAVA_HOME=/usr/lib/jvm/java-8-openjdk-amd64
To debug on a hardware device connect to android device via usbip from WSL2 (thanks to @cjshearer):
To debug on a virtual device create a virtual device (e.g. Nexus_5X_API_29) in windows with Android Virtual Device Manager from Android Studio.
Start Android virtual device (e.g. Nexus_5X_API_29) in windows
"C:\Program Files (x86)\Android\android-sdk\emulator\emulator.exe" -avd Nexus_5X_API_29
adb kill-server
adb -a nodaemon server start
Change firewall rule for adb.exe on first usage in Defender Popup or with Windows Defender Firewall allowing access for the public profile, because the vEthernet (Wsl) adapter belongs to the public profile
Set environment variable to access adb server, WSL_HOST is ip of vEthernet (WSL) interface in windows
export WSL_HOST=$(tail -1 /etc/resolv.conf | cut -d' ' -f2)
export ADB_SERVER_SOCKET=tcp:$WSL_HOST:5037
Somtimes adb crashes using the environment variable config. One solution is to use socat (thanks to @tuanna1601).
Unset the environment variable if necessary.
unset ADB_SERVER_SOCKET
Install socat (eg. sudo apt-get install socat). Socat relays the requests from wsl2 to windows using the following command:
socat -d -d TCP-LISTEN:5037,reuseaddr,fork TCP:$(cat /etc/resolv.conf | tail -n1 | cut -d " " -f 2):5037
The metro bundler is running in WSL2, listening on port 8081. Windows 10 version 2004 brings network forwarding from WSL2 to Windows. So the app can connect to the metro bundler from the emulator via Windows localhost.
Sometimes there are problems with the network forwarding. A work around is to use the following script.
WSL_CLIENT is ip of WSL2.
iex "netsh interface portproxy delete v4tov4 listenport=8081 listenaddress=127.0.0.1" | out-null;
$WSL_CLIENT = bash.exe -c "ifconfig eth0 | grep 'inet '";
$WSL_CLIENT -match '\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}';
$WSL_CLIENT = $matches[0];
iex "netsh interface portproxy add v4tov4 listenport=8081 listenaddress=127.0.0.1 connectport=8081 connectaddress=$WSL_CLIENT"
To debug the app running on Windows Subsystem for Android (WSA).
Install Windows Subsystem for Android.
Start adb server in Windows.
Enable access to adb server from WSL2.
The metro bundler is running in WSL2, listening on port 8081.
To enable access from WSA to WSL2, configure adb reverse port forwarding on WSA.
Connect to the WSA via 127.0.0.1:58526 and execute adb reverse.
adb connect 127.0.0.1:58526
adb reverse tcp:8081 tcp:8081
npx react-native init AwesomeProject
Add paraameter in file proguard-rules.pro to ignore okhttp3 warnings
-dontwarn okhttp3.internal.platform.*
Start metro JavaScript bundler and bind to an ipv4 address to enable port forwarding to windows
npx react-native start --host 127.0.0.1
Build app, set device as parameter deviceId from result of adb devices
- deviceId emulator: emulator-5554
- deviceId WSA: 127.0.0.1:58526
npx react-native run-android --variant=debug --deviceId <deviceId>
Start vs code in WSL2
code .
and install extensions for VS Code
- Remote - WSL
- React Native Tools
VS Code UI runs in windows and the VS Code Server runs in WSL2, see here
Add a launch configuration in file launch.json with specified type and request
"name": "Attach to packager",
"cwd": "${workspaceFolder}",
"type": "reactnative",
"request": "attach"
Build app, attach to packager and start debugging, see here.