on today's video I'm going to show you
how to set up and use the IDE add-on for
home assistant this add-on is a packaged
version of the cloud9 IDE which is an
online integrated development
environment that has been tuned for use
with home assistant you'll be able to
manage your home assistant configuration
files directly from my web browser and
it also includes a terminal so you can
check your configuration and restart
from a system all right guys let's get
started with the setup open your home
assistant and go to haseo I don't store
select IDE and click on install once
installed
scroll down to config and set up a new
username and a password if you setup a
duck DNS URL for your home assistant
change the SSL from false to true so
like that the connection to the IDE is
encrypted now click on save and before
you start the add-on you need to create
a port forwarding rule on your router so
when you try to access the IDE it
directs traffic to the add-on port which
is 8321
now all routers are different so I
wouldn't be able to tell you how to set
it up on your own router but for you to
have an idea I'm going to show you how
it's done on an Asus router there's a
website called port for work on that has
step-by-step instructions on how to set
up a port forwarding rule in different
types of routers you can find a link in
the description below so definitely
check it out alright so when you access
the port forwarding settings on your
router name the new rule hassio cloud9
IDE then setup the port range to
8321
the local IP set it to your raspberry
PI's IP address for the local port set
it to 8321 as well and
set the protocol to TCP click on add
then apply and reboot the router to
apply the changes after the router is
back on mine go back to home assistant
and start the add-on give it like a
minute for the IDE to start and then
click on open web UI
okay so the IDE is up and running on the
left side we can see that we have the
home assistant file tree in the middle
we have the editor area and on the
bottom we have the terminal now
everything is separated into tabs which
you can move around and set it to the
way you want it for example if you open
two files and you want to have them open
side by side or one on top of the other
you can just grab one of the tabs and
drag it to the right side or to the
bottom and it would split the editor
into columns or rows the terminal window
can also be resized so when you are
editing you can get the terminal out of
the way and get more screen real estate
and resize it again when you need it by
the way having access to the terminal
directly from the IDE is very convenient
because you can simply run a command to
check your configuration after you edit
something and also reached our home
assistant without having to leave the
editor the file tree and the top menu
bar can also be minimized to gain more
screen real estate this option is very
convenient when working from a laptop
for example to minimize the file tree
just click on workspace and for the top
menu bar click on the triangle on the
left the IDE also has themes available
so if you would like to change it to a
dark theme for example you can go into
view themes UI themes and select the
theme that you would like to use you can
also change the theme for just the
editor window and not the whole UI to do
that go back to view themes and the
themes for the editor will be right
below that UI themes drop down the
terminal can also be customized but you
will have to go into preferences and
then click on terminal
now I want to show you how to embed the
IDE into home assistant using the panel
iframe component so like that you have
an option on the sidebar and be able to
open it directly from the home assisted
front-end in the configuration.yaml
file enter the following then click on
file and then save after that use the
terminal to restore home assistant using
the command hassio ha restart after home
assistant restart you will now have the
IDE option on the sidebar and when you
click on it it will open the IDE
directly from the home assistant
front-end alright guys so there you have
it let me know in the comments below
what you think about this add-on you can
also find a full written guide about
this add-on on my website you can find
our link in the description below
like always guys thank you for watching
if you like this video give it a thumbs
up don't forget to subscribe if you
haven't done so already and I will see
you in the next video