Ultimate Guide: Selfhosted Visual Studio + Extensions

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

Channel: IBRACORP

Views: 44,534

Keywords: code-server unraid, code-server lsio, code-server extensions, code-server 2022, code server unraid, ibracorp tutorials, vs code server, code-server install, code-server hosting, code server tutorial, code server, code-server docker, selfhosted, ibracorp, ibra corp, ibraco, ibracorp unraid, vs code, visual studio code, vscode, linux, docker, vscode in the cloud, visual studio, ide, yaml extension vscode, vs code in a browser, vscode tutorial, vscode extensions, Vscode 2022

Id: 7FMCBjUVaYQ

Length: 19min 53sec (1193 seconds)

Published: Sun Jan 09 2022