Expo AVD (Android Virtual Device) on Windows Subsystem for Linux (WSL2)

This article is the second and final part of two parts tutorial to completely run a Expo project through WSL2.

Prerequisites:
WinRAR/7Zip
Unzip
The previous step of this article

On the previous part of this tutorial we managed to open our Expo app by the QR code adding some network configs on our Windows and WSL. Now we'll move further to make it work with AVD as well!

To be able to run our virtual device we'll need to have a virtual device on our Windows, add the Android SDK on our WSL and install ADB to allow the connection between our Expo app on WSL and the virtual device on Windows.

Installing WSA

There's a Android version of WSL, in this case WSA, Windows Subsystem Android, it works almost like WSL, but its a Android environment.

Testing locally on my computer and on other teammates computers it worked better, some teammates have very old computers and that was a decisive point to opt on WSA. So basically we'll move on with WSA because it is more performant AVD than Android Studio.

To install WSA go to this github repository scroll to the readme and, on the Download section select the stable build for your Windows version and processor architecture.

On the page it opened go all the way to the bottom to the download table and select the second download option, right now, while I'm writing this article, the version is WSA_2311.40000.5.0_x64_Release-Nightly-MindTheGapps-13.0.7z

With that downloaded file move it to the root of your C: of your Windows and extract that file there, after this you should have this folder on your C:

Note: if you're not able to extract that file you'll need to install WinRAR or 7Zip on your Windows

Now open that folder and look for the script Install.ps1 (if your Windows is not configured to see the file extensions it'll be just Install).

Now right click on the Install.ps1 file and click on Run with Power Shell or anything similar to that.

It'll open a Power Shell window with a bunch of other windows and ask some permissions, but no worry, that's expected. Just click on continue buttons, let the windows load its views and move on. When the Power Shell process finishes just press any button to close the window.

After the process finished look for a window called Windows Subsystem Android, it'll open with a title at the top left corner as System. The window is similar to this one

On this window go to Advanced Configuration and turn the Developer Mode on (that menu option could be hide on a hamburger menu at top left corner). It could ask for some admin permissions, just allow them.

If work as expected it'll suggest you that you can run the ADB server on 127.0.0.1:58526. After turn it on you can close all the WSA windows since it runs on background.

After close all the windows you can check if ADB is working checking the Windows Task Manager and check if the WSA is there

Search for Android

Troubleshoot

Running the Install.ps1
If you get a error trying to run the Install.ps1 script try run the Run.bat script instead.

Developer mode not showing the 127.0.0.1:58526
If you can't see the 127.0.0.1:58526 after turn your Developer Mode on, try reinstall WSA with a PRE-RELEASE build instead.

Installing Android SDK on WSL

With your WSA installed now you'll need to install Android SDK on your WSL. Expo needs that to run the app with Android.

I found a awesome tutorial to do that on WSL, but we'll not use everything there and also I needed to update some of the commands so, I just get and update what is needed here.

Now open your WSL, go to the your user root folder and run the following commands individually

sudo apt install openjdk-8-jdk-headless

wget https://dl.google.com/android/repository/commandlinetools-linux-6200805_latest.zip
mkdir -p Android/sdk
unzip commandlinetools-linux-6200805_latest.zip -d Android/sdk

export ANDROID_HOME=$HOME/Android/sdk
export PATH="$ANDROID_HOME/emulator:$ANDROID_HOME/tools:$ANDROID_HOME/tools/bin:$ANDROID_HOME/platform-tools:$PATH"

sdkmanager --sdk_root=${ANDROID_HOME} "tools"

sdkmanager --update
sdkmanager --list
sdkmanager "build-tools;28.0.3" "platform-tools" "platforms;android-28" "tools"
sdkmanager --licenses

Agree to all the agreements and, after all, you'll have a Android folder on your user root

Now with Android SDK installed we Expo will run with Android, otherwise it'll throw a error saying that it didn't found the Android SDK.

Installing ADB

Now we'll need to install ADB (Android Debugging Bridge), this is what will make the connection between our Expo project on WSL and the AVD on Windows with WSA.

To install ADB go to this link, scroll down until you find the markdown and there click on the first platform tools, its the one that has Android Debug Bridge version 1.0.41

It'll download a zip file on your your Windows, move that file to your WSL user root.

For those who don't know, you can find your WSL Linux on the side of your File Explorer. There you can navigate to your user root folder manually in a WYSIWYG way, then paste the file there on your user root folder.

Again on WSL and with the file platform-tools_r34.0.5-linux.zip on your user root folder, unzip this file and go to the extracted folder platform-tools.

On the folder run you'll need to run ./adb connect <WSL IP:WSA PORT> to create the connection between WSL and WSA, but before that lets get that IP and port.

Getting WSL IP
To get the WSL IP, on your WSL terminal run netsh.exe interface ip show address and look for the WSL interfaces. In my case is these two:

In my specific case I need to get the IP Address from "vEthernet (WSL (Hyper-V firewall))", but your interface name may be different than mine, either way just get one of the WSL IP's and and save it to use later.

Getting WSA Port
Go to your WSA, on that same page we turned Developer Mode on, check the message it displays right below it and look for the port

For all the tests I made the port was the same, but I'm showing how to get the port just in case!

Getting back to our WSL on the platform-tools folder with that ADB command we view before, with your WSL IP and the WSA port run ./adb connect <WSL IP:58526>

WSA may ask you to allow the ADB connection, if that happens click on "Always allow from this computer" and "Allow"

Check if your ADB was connected successfully on your WSA running ./adb devices, if it display something like that we're connected!

Running the Project with AVD

Now go again to your project folder and run it with npm run start:wsl then press a to open Android AVD.

It should open two windows from WSA, one with the Expo app and another one with your project running, just like this

And then, congratulations, your Expo project is fully working through WSL!

Troubleshoot

unzip is not defined
If you got a issue saying that unzip command not found or something like that, this is because you don't have unzip installed on your WSL, you just need to install it.

./adb connect
You got a error when try to connect on ADB or nothing simply happens after you run the command, maybe your WSL IP is the wrong one, double check if you typed the IP correctly and also you can try to use another WSL interface IP Address.

That's all folks!

I really hope that this tutorial is as useful to you as it was to me to figure out how to make a Expo project run on WSL! Feel free to ask any questions down below and thank you for reading it!