Skip to content

Instantly share code, notes, and snippets.

@kayandra

kayandra/rn-with-wsl-wsa.md

Forked from nkt217/rn-with-wsl-wsa.md
Created May 23, 2023 06:21
Show Gist options
  • Save kayandra/e18138731333a285a6ec7690fe2f1fb1 to your computer and use it in GitHub Desktop.
Save kayandra/e18138731333a285a6ec7690fe2f1fb1 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @xquangdang xquangdang revised this gist Oct 23, 2021. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion rn-with-wsl-wsa.md
    View file
    Original file line number Diff line number Diff line change
    @@ -19,7 +19,8 @@ This tutorial will run on Ubuntu 20.04
    ```

    2. Connect to WSA
    ![image](https://user-images.githubusercontent.com/11795757/138541424-70aac75a-3cc2-4ca6-802e-798ad679abf4.png)

    ![image](https://user-images.githubusercontent.com/11795757/138541424-70aac75a-3cc2-4ca6-802e-798ad679abf4.png)
    - Connect to WSA via IP
    ```bash
    $ adb connect <wsa-ip>
  2. @xquangdang xquangdang revised this gist Oct 23, 2021. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion rn-with-wsl-wsa.md
    View file
    Original file line number Diff line number Diff line change
    @@ -19,8 +19,8 @@ This tutorial will run on Ubuntu 20.04
    ```

    2. Connect to WSA
    - Connect to WSA via IP
    ![image](https://user-images.githubusercontent.com/11795757/138541424-70aac75a-3cc2-4ca6-802e-798ad679abf4.png)
    - Connect to WSA via IP
    ```bash
    $ adb connect <wsa-ip>
    ```
  3. @xquangdang xquangdang revised this gist Oct 23, 2021. No changes.
  4. @xquangdang xquangdang revised this gist Oct 23, 2021. 1 changed file with 7 additions and 7 deletions.
    14 changes: 7 additions & 7 deletions rn-with-wsl-wsa.md
    View file
    Original file line number Diff line number Diff line change
    @@ -15,33 +15,33 @@
    This tutorial will run on Ubuntu 20.04
    1. Install Android debug bridge (`adb`)
    ```bash
    sudo apt install adb
    $ sudo apt install adb
    ```

    2. Connect to WSA
    - Connect to WSA via IP
    ![image](https://user-images.githubusercontent.com/11795757/138541424-70aac75a-3cc2-4ca6-802e-798ad679abf4.png)
    ```bash
    adb connect <wsa-ip>
    $ adb connect <wsa-ip>
    ```
    ![image](https://user-images.githubusercontent.com/11795757/138541436-4b15628d-1504-43b7-902f-de4536bdfb8e.png)
    - Make sure ADB connect successfully
    ```bash
    adb devices
    $ adb devices
    List of devices attached
    172.19.99.153:5555 device
    ```

    ### React Native setup
    I'll follow tutorial on [ReactNative.dev](https://reactnative.dev/docs/environment-setup
    I'll follow tutorial on [ReactNative.dev](https://reactnative.dev/docs/environment-setup)
    ```bash
    # Assuming that you have Node 12 LTS or greater installed, you can use npm to install the Expo CLI command line utility
    npm install -g expo-cli
    $ sudo npm install -g expo-cli
    # Then run the following commands to create a new React Native project called "AwesomeProject"
    expo init AwesomeProject
    $ expo init AwesomeProject

    cd AwesomeProject
    npm start # you can also use: expo start
    $ npm start # you can also use: expo start
    ```
    Select `Run on Android device/emulator` in expo web client
    ![image](https://user-images.githubusercontent.com/11795757/138541943-10fb1fe4-fac2-4b49-b528-f9acc0f85229.png)
  5. @xquangdang xquangdang created this gist Oct 23, 2021.
    49 changes: 49 additions & 0 deletions rn-with-wsl-wsa.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,49 @@
    # Develop React Native app with WSL and WSA

    ## Requirement
    - Windows Subsystem for Linux 2 ([WSL2](https://docs.microsoft.com/en-us/windows/wsl/install))
    - Windows Subsystem for Android ([WSA](https://blogs.windows.com/windows-insider/2021/10/20/announcing-android-apps-on-windows-11-preview-for-windows-insiders-in-the-beta-channel/))
    - NodeJS install inside WSL2

    ## Steps

    ### WSA
    1. Enable developer mode for WSA
    ![image](https://user-images.githubusercontent.com/11795757/138540977-c4f6f48a-a2b7-45e2-838d-3ff8d0942746.png)

    ### WSL2
    This tutorial will run on Ubuntu 20.04
    1. Install Android debug bridge (`adb`)
    ```bash
    sudo apt install adb
    ```

    2. Connect to WSA
    - Connect to WSA via IP
    ![image](https://user-images.githubusercontent.com/11795757/138541424-70aac75a-3cc2-4ca6-802e-798ad679abf4.png)
    ```bash
    adb connect <wsa-ip>
    ```
    ![image](https://user-images.githubusercontent.com/11795757/138541436-4b15628d-1504-43b7-902f-de4536bdfb8e.png)
    - Make sure ADB connect successfully
    ```bash
    adb devices
    List of devices attached
    172.19.99.153:5555 device
    ```

    ### React Native setup
    I'll follow tutorial on [ReactNative.dev](https://reactnative.dev/docs/environment-setup
    ```bash
    # Assuming that you have Node 12 LTS or greater installed, you can use npm to install the Expo CLI command line utility
    npm install -g expo-cli
    # Then run the following commands to create a new React Native project called "AwesomeProject"
    expo init AwesomeProject

    cd AwesomeProject
    npm start # you can also use: expo start
    ```
    Select `Run on Android device/emulator` in expo web client
    ![image](https://user-images.githubusercontent.com/11795757/138541943-10fb1fe4-fac2-4b49-b528-f9acc0f85229.png)

    ## FAQ