React Native WSL2 - development environment

gistfile1.txt

# 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-windows)
* [Enable mirrored networking mode in WSL2](#enable-mirrored-networking-mode-in-wsl2)
* [Install tools in WSL2](#install-tools-in-wsl2)
* [Connect to android hardware device from Windows](#connect-to-android-hardware-device-from-windows)
* [Connect to android hardware device from WSL2](#connect-to-android-hardware-device-from-wsl2)
* [Connect to android virtual device in Windows](#connect-to-android-virtual-device-in-windows)
* [Create react native app in WSL2](#create-react-native-app-in-wsl2)
* [Build app in WSL2](#build-app-in-wsl2)
* [Debug app in Visual Studio Code from WSL2](#debug-app-in-visual-studio-code-from-wsl2)

## Install tools in Windows

* Install WSL2 and Ubuntu, see [here](https://docs.microsoft.com/de-de/windows/wsl/wsl2-install)
* Install Android Studio, see [here](https://developer.android.com/studio)
* Install Viusal Studio Code, see [here](https://code.visualstudio.com/)

## Enable mirrored networking mode in WSL2

[Mirrored mode networking](https://learn.microsoft.com/en-us/windows/wsl/networking#mirrored-mode-networking)
has the goal of 'mirroring' the network interfaces that you have on Windows into Linux.
All programs on Windows **and** Linux can connect via localhost.

Add the following lines to %UserProfile%/.wslconfig (thanks to @craigjones-dev)

```
[wsl2]
networkingMode=mirrored
hostAddressLoopback=true
```

## Install tools in WSL2

* Install java-21-openjdk in WSL2 (*sudo apt-get install openjdk-21-jre*)
* Install Android SDK cmdline tools in WSL2, see [here](https://gist.github.com/jjvillavicencio/18feb09f0e93e017a861678bc638dcb0) and adjust directory structure, see [here](https://stackoverflow.com/questions/60440509/android-command-line-tools-sdkmanager-always-shows-warning-could-not-create-se)
* Install nodejs in WSL2, see [here](https://github.com/nodesource/distributions#debinstall)

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
```

## Connect to android hardware device from Windows

To debug on a hardware device connect to android device via adb

* start adb server in Windows: *adb kill-server && adb server start*

## Connect to android hardware device from WSL2

To debug on a hardware device connect to android device via usbip and adb from WSL2 (thanks to @cjshearer):

* [Connect USB device to WSL](https://learn.microsoft.com/en-us/windows/wsl/connect-usb/)
* start adb server in WSL2: *adb kill-server && adb server start*

## Connect to android virtual device in Windows

To debug on a virtual device 

* create a virtual device in windows with Android Virtual Device Manager, see [here](https://developer.android.com/studio/run/managing-avds)
* start the Android Emulator, see [here](https://developer.android.com/studio/run/emulator), the adb server automatically starts on Windows.

## Create react native app in WSL2

```
npx react-native init AwesomeProject
```

## Build app in WSL2

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

```
npx react-native run-android --variant=debug --deviceId <deviceId>
```

## 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](https://code.visualstudio.com/docs/remote/wsl)

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](https://stackoverflow.com/questions/51666188/how-to-debug-react-native-apps-in-visual-studio-code/56233781#56233781).