are you sick of struggling trying to figure out what the right tool is for the right
job are you there straining hurting yourself stressing and worrying about trying to get the job
done in the most efficient way possible but we've got the solution for you meet code server
code server is designed to run in your browser and give you easy access to edit all your config
code and any other server based files directly in your browser from anywhere in the world no more
needing to go through the terminal no more needing to worry about whether permissions are there
whether you can get access to the files on the server in fact you don't even need something like
nextcloud to help you get the job done nihao ibrahami and welcome back to another ibra corp
video thank you for tuning in with us today as usual it's a pleasure to have you here and
judging by your intro we're going to be going with code server today we're going to show
you this nifty tool that's going to help you manage all your configuration and code remotely
and it's going to be able to run directly on your server and you can run it in any browser this will
tie in perfectly to a future video where we're going to do the ultimate ophthalia guide for 2022
so if you're interested in that video make sure you subscribe so you get notified
once we put it up but just quickly so what is code server the highlights are code on any device with
a consistent development environment use cloud servers to speed up tests compilations downloads
and more and preserve battery life when you're on the go all the intensity of tasks run on your
server coder works with the tools that you work with so there's no need to change your preferred
editor ci tooling or version control system you'll be able to speed up your builds and tests
you can use the power and scale of the cloud to offload the burden of slow builds
and test your local machine you can develop with any device just access the workspace
from anywhere with the same snappy development experience that you expect from a local ide
you can onboard to new projects from whenever and wherever you are on board to a new project
can take days away from your productivity and hinders collaboration get on the same page and
stay on the same page faster secure your data and source code source code and data can remain
secured in the cluster or in authorized repos not sitting on a workstation or laptop so guys those
were the words from the developer and coda is a useful tool it's a really really cool tool because
it's going to allow you to edit stuff commonly need a text editor for or something like notepad
plus plus then you're worrying about permissions and trying to get everything working that way
so we're going to show you how to install it using docker and today we're going to be using the
example not unraid but the same principle applies to anywhere else that you use docker as well
alternatively on the github page you can find all their information in terms getting started with
just the script and you can run it that way as well it's also really beneficial for you to think
about how you want to deploy code server because you can deploy code server at your server at home
you can deploy it if you have a server in the cloud and it's going to allow you to access
your files and manage stuff so much easier we can also install extensions which will allow
us to validate our content and code for example yaml configuration especially when we're using
orthelia or any other yaml-based configuration file the validator will be able to actually find
extra spaces or incorrect characters whatever the case might be to help you troubleshoot your
issues faster and since we're all about modern problems and modern solutions we think this is
definitely one for you so if you're interested stick around and let's get stuck into it
so guys welcome back to another video this week absolute pleasure to have you here and today like
i said we're going to be looking at coda so we're looking at coder here is their repository the
original coder slash code server and if we scroll down it's got a whole bunch of information for
us to absorb and read now the main page is pretty brief there's not too much that needs to go on but
if we go to coda.com then you'll get a little bit more information in terms of their documentation
and all the other sort of information that you might find relevant so i highly recommend you guys
check out the official docs for this one and we'll see that you've got a whole bunch of different
ways that you can deploy coda to get the job done now if you've never seen it before you might be
wondering you know what does it look like how does it work we're going to get straight into the
install and then i'm going to show you how to use it and i will also add a couple of extensions like
the yaml extension as well so that we can have the best sort of environment where we can edit stuff
directly in our browser so let's get stuck into the install and let's see how we go from there as
usual we're signed into unraid and we're sitting in the app store at this point in time if you're
using an operating system that isn't unraid that's perfectly fine it's still just running docker so
we'll show you the docker image that we're using and then you can go ahead and use it as well so in
the search bar let's type code server now you see various different options today we're going to go
with linux servers repositories version so code hyphen server is the one that we want to use so
big shout out to the linux server team thank you very much for your awesome work continually making
these images for us to use just give them props if you want to help support their work be sure
to head over to linux server.io and support them any way you can you've also got the support button
here if you're on unraid so that you can follow it through and help support them that way we're going
to go with code server let's click on it and we'll go to install and we're going to get asked which
branch that we want to install so we're going to go ahead and click default and now you'll see we
land on the configuration page again if you're following this in terms of just a normal docker
deployment these are your variables that are already configured in a template here in unraid
but in your case you would put them in your either docker run command or your docker compose file
so be sure to refer to the official docs on how you want that deployed especially the linux server
ones they do have their own docs for this as well so with the main configuration page open we're
going to start looking through so the first thing we're going to do is probably pick our internal
network so let's pick our custom docker network there we have a video on that if you don't know
about it so be sure to check that out for the web ui the default port is eight four four three
now unless you need to change it leave it as is if you're not sure whether it's taken we'll drop down
docker allocations here and then we can basically just do a control f eight four four three
and i don't have that taken so that should be fine so let's leave eight four four three as our port
now there's a few passwords that we are asked to configure the first password is
the optional web gui password now at this point is where i will interject and say if you have
followed our orthelia documentation and you have authelia working on all your other applications
this is the perfect scenario to put orthelia over the top so that you can protect code server it is
really really important that you guys make this particular app very secure as you can imagine
it's going to have access to your file server it's going to have access to your files and
your code so we want to make sure that that's safe in order to do that apply ophthalia over
the top even if you did set a password here in the gui i would still put ophthalia over
the top so i can't reiterate that enough please make sure that you make it secure in order to
protect yourself and protect your system from vulnerabilities but the first password is pretty
simple so we've got optional gui password if password or hash password is not provided there
will be no auth so i'm going to put a password in there and we'll just go with something that works
for us you then got the hash password so as it says here if you configure this it will override
this field okay and the instructions on how to do this are below then we have the sudo password
if it's set user will have pseudo access in the code server terminal with the specified password
so let's set a sudo password and do we want that hashed as well so we've got the option to hash
that as well if required then you've got proxy domain if this optional variable is set the domain
will be proxied for subdomain proxy so in this field we'll put something like code.ibracorp.io
that's in my case if yours is going to be something else obviously make it relevant to
yourself then i have the default workspace so what's our default workspace to show up when
we open it up if it's set code server will open this directory by default and currently that's
configured to slash config slash workspace so where's config let's go to edit under the app data
location and we can see that the container path config is referring to our app data location here
on code server so it's basically going to be app data code server forward slash workspace that's
going to be the default one that opens so what we can do to add to this is actually add a additional
path to allow us to access any of the shares that we want whenever we want so we'll go to
add another passport or variable so in here we're going to put in a path called array so i've just
given it the name array we've got the container path to forward slash array so the reason why
we do that is inside the container then it will see something called array you can rename it to
whatever you like that just makes sense to us so we're going to use that for the host path where we
want that map to from the container to our host i've told it to just look at the very top level
in unraid which is mnt if you don't want that if you feel like that's a bit too risky for you and
you only want it to look in a specific location then by all means instead of mnt go down a little
further break down the list go down into user for example you can go to user you can go to updater
whatever the case might be so in our case we can just put update if we wanted to and then in that
case i'd probably call it appdata all right but i want everything to come through in there because i
want to be able to access everything on the server remotely so i'm going to leave it at the very top
level which is mnt so now that we've left the mnt the default value we don't need to change and the
access mode is read right that's perfectly fine if you want to put a description in there you can go
ahead and click add all right for those following along with a docker compose or diaper run command
obviously the principle applies just map it to wherever you need to map it to we then have
app data so we've got our path and we've also got our extra array path here mapped as well
that's pretty much it guys so once we're done go ahead and click apply
now back in our docker tab we can see code server is running and it's ready to go
and i've gone and put it in our file management docker folder that we've created
i get asked quite a lot guys if you're interested in how we got this to look this way and have
these docker folders we literally have a video called docker folders on our channel
so be sure to check that out and it will help you get that set up for yourself so from this point
we can now run it so let's click on it click web ui and then we're going to be confronted with the
password that we configured perfectly fine let's try that out now let's absorb what we're seeing
here for a moment you saw a little warning come up there that warning basically said we're being
accessed over an insecure domain that's fine and the reason is we are accessing it locally so it's
not a secure domain once we reverse proxy it that message should no longer be there
so let's clear the notification that's fine so we're in this first page it's going to give you
a couple of things to help get started which is fantastic first thing we'll do is change the theme
because i know at least for me i absolutely can't stand white themes anymore i don't know what's
happened to my eyes but i just can't go back to see in here we've got dark we've got default dark
you got hindi dark you've got all sorts of themes which is really really nice
we're going to go with dark visual studio you guys watching this in the dark you should appreciate it
a little bit more so with the theme set you can pretty much stop there but you've got the whole
thing that you can go through if you wanted to so that you can keep uh customizing things with the
way we want so for example we've got the command palette there if you wanted to change some key
bindings to help you manage things a little bit easier you can definitely remap stuff the way
you want you've then got the menu bar if you want to toggle that if you want language support and
extensions and then if you want to quickly open a file so the next thing we want to do is open up a
folder and start navigating to what we need so in the top here we'll go to the menu bar go to file
and go open folder as you can see the default thing is showing us is that config folder which
is the app data folder for code server there's nothing really in there that we want to change
so what we'll do is click the dots to go back and you'll see array here now array is what we mapped
in the docker container template if you named it something else it'll be under that name that you
gave it but we're going to go with array and then we've got all the stuff underneath that so then
if you go to user and appdata for example we can click ok and here's our appdata folder ready to
go so let's look at something like orthelia for example click on configuration yml and as you can
see we have access to this configuration file from anywhere in the world through our browser we don't
have to go through the file server we don't have to go through something like next cloud
we don't have to worry about smb shares none of that it's all directly in the browser for us
beauty of it is if we start typing stuff and we make changes to the file and we get out of it
and we go something like here and then we come back the file's already saved as we go along as
you can see we also opened the file which opened up a new tab so then we can switch between files
really really easily helping us get that workflow and working really really fast so that's something
that's really good so i might just take that out it doesn't matter anyway it's commented but
that's the first part of it now on the side here you can see you've got this awesome little thing
here to scroll up and down through the file and help you find stuff a lot quicker if you guys have
used visual studio before on your desktop you'll feel a bit familiar with it if you're completely
new then you know obviously i'm showing you a couple of things just to help you get started in
the top here you've also got the split editor so if we click the split editor you can have two side
by side so that you can work along two different files and follow them along so maybe you've got
a template or the configuration and you want to just compare it to you know the new one you can
do that as well so that's opening and editing the file that that's how easy that is it's so simple
but code server can be changed and added to so that you can really increase your productivity
where possible so we'll keep following down the list here on the side in the manage icon the
little cog icon here we'll click that and then you've got a whole bunch of settings that you
can go back to so if we go to settings for example we can change the font size the tab size you know
white space if you want to render it word wrapping how you want it to behave with extended sentencing
you've got your text editing settings you can basically customize everything and it'll really
help you navigate and use the application in all sorts of different areas we've then also
got the workbench you've got the window any other features you want to add there's obviously so much
here that if we were going to go through every single option guys we'll be here all week but
so help yourself make sure you go in and just have a look around poke around see what settings there
are because there's usually stuff in there that will make your life really really easy the next
section we're going to talk about is extensions so in here you've got some extensions already but if
we want to add some in the in the left hand side here or using ctrl shift x extensions and it's
going to bring up a sort of app store and it's going to show you what's popular so here's all
these different popular ones they don't already have them one that we always use quite often these
days is yaml so why don't we install the yaml extension click of a button we can install that
and then back in our settings that we were in before we've got our yaml settings there
and we can go through and basically work through all the settings for that the way we want if we go
back to the explorer and i click on authelio configuration so what we'll do is purposely
put an extra space so let's say here in front of refresh intervals we just put an extra space here
automatically straight away we haven't had to do anything we'll see this red marker come up
and we'll see that the file also turns red and in the tab it's red as well immediately it's telling
us that there's a formatting issue so if we just hover our mouse over this all mapping items must
start at the same column so it immediately tells us something's off here as soon as i backspace it
it validates happy days you know that something looks right so in the event that you know for
example here that we've added an extra two spaces here we're trying to figure out where the issue is
straight away it just reads it for us and tells us it's somewhere here so as you scroll down the file
the rest of these are going to be wrong because they're not in the same configuration anymore so
if we scroll up you can usually pinpoint now okay from this point on something's broken
here it is right here if i backspace that too far it's wrong as well just enough and it validates
so a really really useful extension for you guys especially when you're following our documentation
on something like orthelia it's going to make your life so much easier so i highly
recommend that extension and pretty much the last thing i want to show you guys today is the
ability for you to manage your source code and have it so that code server directly talks to
your repositories and publishing it to github so that that way you can code stuff in your github
directly in code server so you don't even have to go to github to do it so in here under source
control if we click on that you're presented with two options so you've got initialize repository
and you've got publish to github so what this will do is the current folder that's open it
doesn't have a git repository by initializing it you'll initialize a repository which will enable
source control features powered by hit you can also directly publish this folder to a github
repository so the times where you create you know in our scenario we create unread templates unread
container templates we could actually just use it here create the folder and then just
publish it directly to github if you're using a laptop if you're using some sort of device
you want to be able to edit the files but you don't want to store the files on your laptop
and you want to have it consistently accessible no matter where you are
this is going to be the perfect solution guys so guys that's code server i hope you enjoyed that
it's a super easy thing to set up and use the last thing i would suggest you guys do
is reverse proxy it out so that you can get full functionality there is limited functionality in
certain things or they may not behave that well in a unsecure environment so reverse proxying it
give it that certificate access it from a secure domain and then apply orthelia over the top if you
haven't watched our nginx proxy manager cloudflare or orthelia videos i highly suggest you go check
those out on our channel this tool will help you go into those a little bit easier and help
you manage your configuration as you go along if we missed any features or any important tool
tips that you want to share with other people who are watching the video be sure to let us know in
the comments below or join us on our discord and have a chat with the community we'd love to see
you there it's a new year here at iprakov 2022 and we can't wait to keep pushing out some more
content for you if you want to help support the channel please check the links below any way that
you choose to support us is appreciated remember to like and subscribe it really helps youtube get
us out there and show people that we've got some content they might be interested in thank you to
all of our loyal fans we really appreciate you and we'll see you in the next hyprecorp video