Document how to run backend and frontend in WSL2

[raman325]

Notes that @petro provided:

1. Install VSCode on windows.

2. Get/Enable WSL2 on windows.

3. Install Ubuntu WSL2 image.

4. Start ubuntu wsl2 image.

5. Install Docker.
   0. In docker...

   1. Settings -> General -> Check Use the WSL2 based engine
   2. Settings -> Resources -> WSL Integration:
      1. Check Enable integration with my default WSL Distro
      2. Turn on the toggle for your Ubuntu wsl2 image.

6. Install Home Assistant Core Dev Container
   0. Open VSCode

   1. Click the <> arrows in the lower left corner.

   2. Select Connect to WSL

      • This may take a moment, it's connecting to ubuntu in WSL. Once it's finished, vscode will be running from ubuntu.
      • The vscode instance will be running from /home//

   3. Open a new terminal in vscode and run

      git clone <path to your github fork of HA core>
      

      • this will create a core folder located at /home//core

   4. Hit file -> open folder, from the dropdown select core, then click OK.

   5. Hit F1 to open the command pallet and then search for Dev Containers: Reopen in Container

      • This will build your container, it takes a moment.

   6. Keep this window open, this is the HA backend. We will be coming back here after installing the frontend.

7. Install Frontend
   0. Open a new VSCode window.

   1. Click the <> arrows in the lower left corner.

   2. Select Connect to WSL

      • This may take a moment, it's connecting to ubuntu in WSL. Once it's finished, vscode will be running from ubuntu.
      • The vscode instance will be running from /home//

   3. Open a new terminal in vscode

   4. Install nvm

      1. run this to install nvm

         curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
         

      2. run this to get it to run:

         source ~/.nvm/nvm.sh
         

   5. Make a clone of HA fronend, run

      git clone <path to your github fork of HA Frontend>
      

   6. Hit file -> open folder, from the dropdown select frontend, then click OK.

   7. Open a new terminal in vscode (or use your existing one and type cd frontend

   8. Run the following commands to install dependencies for the frontend.

      nvm use
      script/bootstrap
      

   9. Run the frontend

      script/develop
      

8. Go back to HA's vscode window.

9. Open .devcontainer/devcontainer.json. Add

     "mounts": [
       "source=/home/<your windows username>/frontend,target=/workspaces/frontend,type=bind,consistency=cached"
     ],
   

10. Open config/configuration.yaml, change the frontend section to

    # Load frontend themes from the themes folder
    frontend:
      themes: !include_dir_merge_named themes
      development_repo: /workspaces/frontend/
    

11. Run Home Assistant from the Run and Debug button in VSCode.
    Copy Snippet
    Edit Snippet
    Wordwrap
    Install VSCode on windows.
    Get/Enable WSL2 on windows.
    Install Ubuntu WSL2 image.
    Start ubuntu wsl2 image.
    Install Docker.
    In docker...
    Settings -> General -> Check Use the WSL2 based engine
    Settings -> Resources -> WSL Integration:
    Check Enable integration with my default WSL Distro
    Turn on the toggle for your Ubuntu wsl2 image.
    Install Home Assistant Core Dev Container

Open VSCode
Click the <> arrows in the lower left corner.
Select Connect to WSL
This may take a moment, it's connecting to ubuntu in WSL. Once it's finished, vscode will be running from ubuntu.
The vscode instance will be running from /home//
Open a new terminal in vscode and run

git clone
this will create a core folder located at /home//core
Hit file -> open folder, from the dropdown select core, then click OK.

Hit F1 to open the command pallet and then search for Dev Containers: Reopen in Container

This will build your container, it takes a moment.
Keep this window open, this is the HA backend. We will be coming back here after installing the frontend.

Install Frontend

Open a new VSCode window.
Click the <> arrows in the lower left corner.
Select Connect to WSL
This may take a moment, it's connecting to ubuntu in WSL. Once it's finished, vscode will be running from ubuntu.
The vscode instance will be running from /home//
Open a new terminal in vscode
Install nvm

run this to install nvm

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
run this to get it to run:

source ~/.nvm/nvm.sh
Make a clone of HA fronend, run

git clone
Hit file -> open folder, from the dropdown select frontend, then click OK.

Open a new terminal in vscode (or use your existing one and type cd frontend

Run the following commands to install dependencies for the frontend.

nvm use
script/bootstrap
Run the frontend

script/develop
Go back to HA's vscode window.

Open .devcontainer/devcontainer.json. Add

"mounts": [
"source=/home//frontend,target=/workspaces/frontend,type=bind,consistency=cached"
],
Open config/configuration.yaml, change the frontend section to

Load frontend themes from the themes folder

frontend:
themes: !include_dir_merge_named themes
development_repo: /workspaces/frontend/
Run Home Assistant from the Run and Debug button in VSCode.

[codyc1515]

Thank you for your guide. I have refined this into precise, actionable steps here. Your feedback is welcomed.