Building a react native app in WSL2

rearct-native-app-in-wsl2.md

Building a react native app in WSL2

Install, build and debug a react native app in WSL2 (Windows Subsystem for Linux) and Ubuntu.

• Install tools in Windows
• Install tools in WSL2
• Create android virtual device in Windows
• Start android virtual device in Windows
• Start adb server in Windows
• Enable access to adb server from WSL2
• Enable port fowarding to metro bundler from Windows
• Create react native app in WSL2
• Build app in WSL2
• Debug app in Visual Studio Code from WSL2

Install tools in Windows

• Install WSL2 and Ubuntu, see here
• Install Android Studion, see here
• Install Viusal Studio Code, see here

Install tools in WSL2

• 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

Create android virtual device in Windows

Create a virtual device (e.g. Nexus_5X_API_29) in windows with Android Virtual Device Manager from Android Studio.

Start android virtual device in Windows

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

Start adb server in Windows

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

Enable access to adb server from WSL2

Set environment variable to access adb server, WSL_HOST is ip of vEthernet (WSL) interface in windows

export ADB_SERVER_SOCKET=tcp:129.168.0.51:5037

Enable port fowarding to metro bundler from Windows

Add port fowarding from windows to metro bundler running in WSL2, listening on port 8081, enabling a connection via adb from the emulator to WSL2.

WSL_CLIENT is ip of WSL2

iex "netsh interface portproxy delete v4tov4 listenport=8081 listenaddress=127.0.0.1";
$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"

Create react native app in WSL2

npx react-native init AwesomeProject

Build app in WSL2

Add paraameter in file proguard-rules.pro to ignore okhttp3 warnings

-dontwarn okhttp3.internal.platform.*

Start metro builder

npx react-native start

Build app, set device as parameter deviceId from result of adb devices

npx react-native run-android --variant=debug --deviceId emulator-5554

Debug app in Visual Studio Code from WSL2

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 target

"type": "reactnative",
"target": "emulator-5554"

Start debugging.