Amazing thread, thank you so much @MizterB!
I’m trying to return to frontend development after some time, I’ve cloned the frontend repo, opened it in VS Code, then I was asked to reopen it in dev container, after a second I’ve tried following the steps (GitHub - home-assistant/frontend: Frontend for Home Assistant), but the first one gives me an error:
vscode ➜ /workspaces/frontend (fix-selector ✗) $ script/setup
➤ YN0000: ┌ Resolution step
➤ YN0002: │ @formatjs/intl-locale@npm:2.4.40 doesn't provide @types/node (p4040e), requested by @formatjs/intl-getcanonicallocales
➤ YN0002: │ @web/dev-server@npm:0.0.24 doesn't provide rollup (p8cfb8), requested by @rollup/plugin-node-resolve
➤ YN0002: │ home-assistant-frontend@workspace:. doesn't provide @egjs/hammerjs (pc1ec5), requested by vis-network
➤ YN0002: │ home-assistant-frontend@workspace:. doesn't provide @types/node (p7c56b), requested by @formatjs/intl-getcanonicallocales
➤ YN0002: │ home-assistant-frontend@workspace:. doesn't provide component-emitter (pe6728), requested by vis-network
➤ YN0002: │ home-assistant-frontend@workspace:. doesn't provide keycharm (p71c12), requested by vis-network
➤ YN0002: │ home-assistant-frontend@workspace:. doesn't provide timsort (pc0292), requested by vis-network
➤ YN0002: │ home-assistant-frontend@workspace:. doesn't provide uuid (p3a84b), requested by vis-data
➤ YN0002: │ home-assistant-frontend@workspace:. doesn't provide uuid (p9d383), requested by vis-network
➤ YN0002: │ home-assistant-frontend@workspace:. doesn't provide vis-util (p2581d), requested by vis-data
➤ YN0002: │ home-assistant-frontend@workspace:. doesn't provide vis-util (p014f8), requested by vis-network
➤ YN0000: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code
➤ YN0000: └ Completed in 0s 834ms
➤ YN0000: ┌ Fetch step
➤ YN0000: └ Completed in 15s 792ms
➤ YN0000: ┌ Link step
➤ YN0001: │ Error: EPERM: operation not permitted, chmod '/workspaces/frontend/node_modules/@babel/core/node_modules/json5/lib/cli.js'
➤ YN0000: └ Completed in 7m 30s
➤ YN0000: Failed with errors in 7m 47s
vscode ➜ /workspaces/frontend (fix-selector ✗) $
especially this one:
Error: EPERM: operation not permitted, chmod '/workspaces/frontend/node_modules/@babel/core/node_modules/json5/lib/cli.js'
when I try to develop gallery and run cd gallery && script/develop_gallery I get this errors:
./node_modules/.bin/gulp: 1: XSym: not found
./node_modules/.bin/gulp: 2: 0023: not found
./node_modules/.bin/gulp: 3: 687149e66e3e6360895d0ac20c73b31a: not found
./node_modules/.bin/gulp: 4: ../gulp-cli/bin/gulp.js: not found
I’m using Windows 10, VS Code 1.72.0 and Docker 4.7.0
Any ideas what might be wrong?
this is a great post, thanks a lot
I have updated the original post, as many steps (especially for debugging) were extremely out of date.
2 Likes
Hello,
when I debug my custom componentvin dev container if I made a mistake, after fixing it, I have to close VScode and reopen it for my fix to take effect.
Is there a way to make it faster
Thank’s
Great post, clear and concise 
I created a mount folder for one of my custom components adding something like:
// Custom component
"source=${localEnv:HOME}/dev/ha-netro-watering/custom_components/netro_watering,target=${containerWorkspaceFolder}/config/custom_components/netro_watering,type=bind"
It works as expected - in terms of folder sync - but I cannot ignore it with github in despite the following configuration in .gitignore file
config
Did i miss something ?
Was getting access errors when building the devcontainer using Docker Desktop. Running the container with the privileged flag seemed to solve the issue. Added the following line to devcontainer.json:
"privileged": true,
When mounting folders in custom_components, I had to make sure the config directory already existed in the repo or vscode would get access errors writing the configuration files.
Also git in wsl seems to block the repo as an unsafe repository in the latest versions. Ive seen mention of using the below json entry to fix this but i couldnt get it to work. I currently have to manually mark it safe using the vscode git tab during build.
"postStartCommand": "git config --global --add safe.directory ${containerWorkspaceFolder}",
Also found a way to add Bluetooth support when running the devcontainer on linux. Using this method i was able to run the devcontainer on my HA production server and SHARE the bluetooth adapter with the existing HA instance. Add the following mounts:
"mounts": [
"source=/var/run/dbus,target=/var/run/dbus,type=bind",
"source=/dev,target=/dev,type=bind"
]
I struggle a lot to get it working these days - even though all was great a year ago.
To overcome the git problem, I’ve modified .devcontainer.json with:
"postCreateCommand": "git config --global --add safe.directory ${containerWorkspaceFolder} && script/setup",
But the mounts wouldn’t work. The whole config directory seems to be automatically mounted back to my local clone of core on my Windows machine, but I don’t know how to link my custom components into the right place. If I try this in Windows, it only results in .lnk links that don’t work in VSCode or the container.
I’m also struggling to get custom_components working. I was able to get the main core devcontainer up and running just fine.
I suspect it might be that I’m running on MacOS, and Docker does some different things there. Every local path I try to mount gets /host_mnt prepended to it, and of course that means it can’t find the rest of it. Is /host_mnt is the root of the my git clone of core? Is there no way on MacOS to mount things outside that fs root? Thanks for any help, I am scarcely a VSCode or Docker expert.
I’ve started on custom component development for a side project and I could not get the custom component to work without logs saying it couldn’t be found when I was directly creating the files in the dev container in vs code. As the same files worked on my production server this was infuriating.
Using the mapping example above to map my custom component git repo to the custom_component directory fixed it, I was nearly out of ideas, this also improves the development workflow considerably.
Thanks for the great article.
1 Like