Struggling to set up a dev environment

[julianna-langston]

This is more of a documentation issue, but that wasn't an option. I'm trying to work on an accessibility issue, so that's why I chose this category.

I'm running Win10, and I just forked this repo.

Anyway, I'm trying run a demo version of the frontend on my machine so that I can try to work on a bug fix. However, I'm struggling with different instructions in the documentation. Here are the steps I've taken so far:

I've run yarn install, scripts/bootstrap, and scripts/setup (which I guess are all the same thing). Everytime, I get this messages about unmet peer dependencies:

➤ YN0002: │ home-assistant-frontend@workspace:. doesn't provide @octokit/core (p072ae), requested by @octokit/plugin-retry
➤ YN0002: │ home-assistant-frontend@workspace:. doesn't provide component-emitter (p61299), requested by vis-network
➤ YN0002: │ home-assistant-frontend@workspace:. doesn't provide keycharm (pf5208), requested by vis-network
➤ YN0002: │ home-assistant-frontend@workspace:. doesn't provide timsort (pcc428), requested by vis-network
➤ YN0002: │ home-assistant-frontend@workspace:. doesn't provide uuid (p68349), requested by vis-data
➤ YN0002: │ home-assistant-frontend@workspace:. doesn't provide uuid (pabc3e), requested by vis-network
➤ YN0002: │ home-assistant-frontend@workspace:. doesn't provide vis-util (p65cb7), requested by vis-data
➤ YN0002: │ home-assistant-frontend@workspace:. doesn't provide vis-util (p0582e), requested by vis-network
➤ YN0000: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements for details, where is the six-letter p-prefixed code

Even still, I tried using the command pallette to run "Tasks: Run Task" > "Develop Frontend", and it told me that the Build was done, so I tried hitting F5, and it told me there had been errors when running the task. The errors were all with eslint in script/version_bump.cjs, so I disabled those eslint rules and tried F5 again. A browser came up pointing to localhost:8123, but the localhost server wasn't running. (The error was "localhost refused to connect.").

The "Configure Home Assistant" instructions starts with editing a config/configuration.yaml file, but that file doesn't exist in the repo, nor does the config folder.

I feel like I'm missing something. Does anyone have any advice on how to get unstuck?

[Misiu]

This is a long story...
I'm not an expert, but I'll try to describe steps that work for me.

1. Pull Home Assistant Core (https://github.com/home-assistant/core) and open it in Visual Studio Code.
2. Edit devcontainer.json and add these lines:

  "mounts": [
    "source=C:\\Users\\Tomek\\Documents\\GitHub,target=/workspaces/github,type=bind,consistency=cached"
  ]

This will allow you to map your local folder C:\\Users\\Tomek\\Documents\\GitHub to devcontainer as /workspaces/github
3. Edit configuration.yaml and add:

frontend:
  development_repo: /workspaces/github/frontend/

This step is needed to "tell" HA to use your local frontend instead of the build in one (please notice that I use folder rontend, because I have frontend in folder C:\Users\Tomek\Documents\GitHub\frontend
5. Pull Frontend and open it in Visual Studio Code (it should suggest to reopen in DevContainer, you should do that - you need Docker for Windows for that)
6. run yarn run build or pick build from available scripts list:

This will build your local frontend version and you will be able to use it with your local version of home assistant.
8. Reopen core in devcontainer - you can hit Ctrl+Shift+P and type reopen and pick:

9. click on Run and Debug and click on green arrow.
10. Navigate to http://localhost:8123/ and you should have local home assistant running with local frontend. Now you can make changes to frontend and it will rebuild, so hitting F5 in the browser will load the changes.

This works for me, I might missed some steps, so if you find some please let me know.

Ideally, we should be able to use local frontend with a running HA. I'd like to be able to specify where the home assistant is (IP) and frontend would use that home assistant during development, but I don't know if this is possible.

[Shahdurran]

is this a solution for windows?

[jenetjoshicnit]

hi @Shahdurran , did you set up the development environment using the following instructions. If yes, please help me with the process iam also stuck in the situation where i followed instructions listed by @Misiu , can you guys please help me in this.

[messiuw]

I also have an issue with setting up the dev environment. When running the last script from the frontend dev manual (https://developers.home-assistant.io/docs/frontend/development/#development)
nvm use
script/develop

I get the following error:

TypeError [ERR_INVALID_MODULE_SPECIFIER]: Invalid module ".\build-scripts\gulp\webpack.js" is not a valid package name imported from C:\Users\mpolk\dev\homeassistant\frontend\gulpfile.js
at new NodeError (node:internal/errors:387:5)
at parsePackageName (node:internal/modules/esm/resolve:777:11)
at packageResolve (node:internal/modules/esm/resolve:800:5)
at moduleResolve (node:internal/modules/esm/resolve:901:20)
at defaultResolve (node:internal/modules/esm/resolve:1115:11)
at nextResolve (node:internal/modules/esm/loader:163:28)
at ESMLoader.resolve (node:internal/modules/esm/loader:841:30)
at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
at ESMLoader.import (node:internal/modules/esm/loader:525:22)
at importModuleDynamically (node:internal/modules/esm/translators:110:35) {
code: 'ERR_INVALID_MODULE_SPECIFIER'

Did anyone also have the same issue?

[jenetjoshicnit]

hi @chammp , did this help run your home assistant frontend ?

[chammp]

Yeah, as I wrote above this fix made it work (natively in Windows, without WSL/devcontainers)

[jenetjoshicnit]

ok, i did all theese but iam still stuck in this, i ran the core , but it is saying frontend did not load , i got this instead,
"[homeassistant.bootstrap] Detected that frontend did not load. Activating recovery mode", as i did
"mounts": [
"source= C:\Users\jenet\homeproject\frontend,target=/workspaces/frontend,type=bind,consistency=cached"
], in my devcontainer.json, i also configured configuration.yaml but it is now not detecting the frontend, what can i do now, can u please help me with this @chammp ?

[chammp]

I switched to a dev container for FE work. I couldn't get the build to work natively after several tries. Sad thing is that build takes 10 times longer now...
One hint I can give: you need to escape the backslashes in your path as you're in a json file. My mounts looks like this:

  "mounts": [
     "source=C:\\Users\\chammp\\dev\\ha\\homeassistant-frontend,target=/workspaces/frontend,type=bind,consistency=cached"
  ]

[jenetjoshicnit]

hi @chammp , i also added it like this only ,

in devcontainer.json ,
"mounts": [
"source=C:\Users\jenet\homeproject\frontend,target=/workspaces/frontend,type=bind,consistency=cached"
],
``
and in configuration.yaml,
frontend:
development_repo: /workspaces/frontend/

but it is still not working,do you have any idea about it ?I don't have any idea how to figure it out from this