Web & React Native development in WSL

#webdev #reactnative #wsl #windows

Intro

As many of You, I like Windows for it's simplicity, but developing software on that OS sometimes can turn into a nightmare. Recently Windows released WSL2 - big update to Windows Subsystem for Linux, which brought:

new architecture
full Linux kernel
much, much faster IO
easy to install Docker
more info here

Although WSL2 has many improvements towards its predecessor, it has also some downsides like virtual network hidden behind NAT and lack of access to USB devices.

Before

First, assure that You have WSL2 installed (check this link).

Secondly, I strongly encourage to check Windows Terminal (which is open-sourced on Github)

Setup

Add the snippet below to the end of Your shell config file (usually .bashrc or .profile)

export $(dbus-launch)
export LIBGL_ALWAYS_INDIRECT=1

export WSL_HOST=$(tail -1 /etc/resolv.conf | cut -d' ' -f2)
export DISPLAY=$WSL_HOST:0

export ADB_SERVER_SOCKET=tcp:$WSL_HOST:5037

Now Your WSL is ready.
You can:

install some GUI on linux and use Windows X Server to run graphic apps from linux (e.g develop some Electron-based apps)
develop mobile apps using React Native (just follow official instructions for Linux)

React Native & adb

There's one more thing about adb. You have to start it under Windows (e.g. cmd)
As You remember, there's no USB support in WSL :)

Final steps:
1) Start adb server in windows
2) Enable port fowarding to metro bundler from Windows
3) Follow React Native docs. Remember to execute commands under WSL, not Windows.

Final note

That's my first post in the DEV community :) Please give me some feedback.

Top comments (5)

Đặng Xuân Quang • Jun 7 '20

I have problem with adb devices on wsl2. If I set ADB_SERVER_SOCKET, adb always throw segmentation fault error. Any idea how to resolve this problem?

Victor Wads • Oct 12 '20

Some my problem:

adb -a -P 5037 nodaemon server on Windows side
wsl --shutdown on Windows side
adb devices on WLS2 side

My .zshrc / .bash_profile:

export $(dbus-launch)
export LIBGL_ALWAYS_INDIRECT=1
export WSL_HOST=$(tail -1 /etc/resolv.conf | cut -d' ' -f2)
export DISPLAY=$WSL_HOST:0

# Android Config
export ADB_SERVER_SOCKET=tcp:$WSL_HOST:5037
if [ -d "$HOME/Android/sdk" ] ; then
    ANDROID_HOME="$HOME/Android/sdk" #location same as step 3
    PATH="$ANDROID_HOME/emulator:$PATH"
    PATH="$ANDROID_HOME/tools:$PATH"
    PATH="$ANDROID_HOME/tools/bin:$PATH"
    PATH="$ANDROID_HOME/platform-tools:$PATH"
fi