Self-Host Code Server in Your Homelab -- VS Code in a Browser!
HTML-код
- Опубликовано: 28 май 2024
- Have you ever wanted to run VS Code in your browser? What if you had access to your terminal and could pull and commit code as well as push it up to GitHub all from a browser or tablet? That's exactly what code server does! In this tutorial we'll walk through step by step of how to install and configure code server to get it self-hosted in your homelab. We'll start with bare metal and virtualization and then work our way up to Docker, Kubernetes, and Rancher. Then, you don't have to carry around your laptop anymore! You can preserve battery life on the go and leave the intensive tasks to your homelab server.
Video Notes: technotim.live/posts/code-ser...
Oh yeah, here's the proof :) github.com/techno-tim/techno-...
Support me on Patreon: / technotim
Sponsor me on GitHub: github.com/sponsors/timothyst...
Subscribe on Twitch: / technotim
Become a RUclips member: / @technotim
Merch Shop: l.technotim.live/shop
Gear Recommendations: l.technotim.live/gear
Get Help in Our Discord Community: l.technotim.live/discord
2nd channel: / @technotimtalks
(Affiliate links may be included in this description. I may receive a small commission at no cost to you.) Tim Kits:
► 4K RUclips Kit - kit.co/TechnoTim/4k-youtube-kit
► Pro Level Live Streaming Kit - kit.co/TechnoTim/pro-level-li...
► Budget Gaming Streaming PC 2020- kit.co/TechnoTim/budget-gamin...
► Performance Virtualization Server- kit.co/TechnoTim/performance-...
► Budget NAS Server- kit.co/TechnoTim/budget-nas-s...
► Coding & Gaming Keyboards- kit.co/TechnoTim/coding-gamin...
► Coding & Gaming Mice- kit.co/TechnoTim/coding-gamin...
00:00 - Intro
00:36 - Why Self Host a VS Code Server?
01:41 - Different Ways to Install
02:23 - Let's Get Started!
02:46 - Plain Old Docker
03:34 - Rancher / Kubernetes Workload
06:36 - Let's Check Out Our Code Server
07:24 - Install Extensions
08:11 - We Have Access to the Terminal
08:42 - Let's Configure SSH and Clone a Repo from GitHub
10:20 - Discord Bot Setup
11:00 - But Can You Develop in a Browser? Let's Write Some Tests!
12:09 - Push the Code Up to GitHub
12:39 - How Powerful Code Server Is
13:41 - What Do You Think of Code Server?
14:08 - Stream Highlight - What would my outro music be???
⏯ Recommended Videos ⏯
► 20 Ways to Use a Virtual Machine (and other ideas for your homelab) • 20 Ways to Use a Virtu...
► Remote Gaming with Promox • Remote Gaming! (and Vi...
► Techno Tim Homelab Tour -- Server Rack and Network • Techno Tim Homelab Tou...
► Homelab Services Tour -- What am I running on my Homelab? • Homelab Services Tour ...
► Let's Build a Discord Bot Using DiscordJS - Moderator Bot • Let's Build a Discord ...
#Selfhosted #CodeServer #Homelab #TechnoTim #Rancher #Docker #Kubernetes
Description tags: Self host VS Code in Your Homelab
Thank you for watching! 
Наука
Do you use VS Code? If so, for code, config, or something else?
btw, if you're new here welcome! 👋 Be sure to subscribe for more content like this!
Vsc for 3d-printers firmware
I used it for my scripts (bash) and some SQL queries
I don't. Yet. Will be setting up code server in the near future to centralize all my scripting... May be a good gateway to actually coding some more instead of just fucking around with powershell.
Hello. I use this docker image "noxonx/theia-php-docker". I would like reverse proxy with Apache tutorial.
I use it to develop react.js frontends, node.js backends, knex.js database queries, and pretty much everything related to web development. It's the best IDE for beginners imo.
Amazing video. Also, I would really like to see a tutorial on a reverse proxy with an SSL certificate
And maybe how to use traefik to make the pods available via dns
found it ruclips.net/video/pAM2GBCDGTo/видео.html
here you go! ruclips.net/video/pAM2GBCDGTo/видео.html
Whelp I guess I have a Saturday project now. Was just thinking of switching from VSCode on the main Desktop, to my Mac to develop on while watching TV or hanging out with the wife. Exceptional video, especially with only 5.9k Subs. You're going places, keep it up! And thanks for the instructions!
You can do it!
Fast Forward, almost 2 years later, MS has released their VS Code Server Preview. While one has to register to get them tunnel one's VS Code (IDE) on the net, it works (locally) well on the homelab / LAN with a couple of flags. Good point is, it is full VS Code with all extensions, and works beautifully on my Ubuntu LXC in Proxmox to serve IDEs across home, all synchronized. Just an update for my favourite You Tuber (Thanks for all you post TIm, much appreciated). May be you want to do an episode if it is of use to subscribers (disclaimer, its MS, not OSS).
The reverse proxy and ssl cert is about the one homelab thing I'm most interested in...
Nginx would be great, but so would anything else.
Gonna have to figure out if Sophos XG has that functionality, any clue?
i use nginx many years now and it never let me down
caddy is also another great option!
Here you go! ruclips.net/video/pAM2GBCDGTo/видео.html
Being a Redhat Admin. I do a lot of coding for Bash, Python-Networking, and Ansible. So this is great for getting code deployed.
Thanks for sharing!
Amazing video! I use code server for the past year and is great! Also, a tutorial on a reverse proxy with an SSL certificate will be awesome.
Found it ruclips.net/video/pAM2GBCDGTo/видео.html
Thanks Tim, I'm just getting back into some python coding again and this will be awesome so I can hop between my machines easily and consistently. One thing though, I had to ssh-add my private key as I couldn't pull otherwise. I thought I followed the instructions properly and watched the steps a few times but I was able to figure this out with the github support documentation. I appreciate the help!
Cam thank you! Good call about adding the key to your keychain!
I’m seriously considering selling my MacBook Pro. Having this set up in the home lab would be a big step in the direction of getting rid of a local Dev machine while hopefully having all the same niceties. Will give it a shot for sure. Cheers Tim.
LMK!
Love the video. I am also a SW Engineer so I like watching how other people have their home setup
Awesome! More to come!
Thanks for your good work. I am hooked to your channel with a high-quality video.
Same. Great quality content that's not just a rehash of what other channels do. I think that Tim being a software developer really sets his projects apart from everyone else!
Wow, thanks!
I love my VS-Code!! The option to code anywhere you like especially when your notebook is slow, or(and) old is awesome! - And the best part in my opinion is, if anything goes wrong -> kill the docker and do it again in a few minutes!! (first use of vs-code set all extensions up and do a docker-backup :D)
Nice!
I use it for all my codes. It seems that I got a new project now. Lol. Nice videos, Tim.
Good to hear!
This will be install on my work dockers for each team. Amazing
Nice!
Nice video Tim. I'm actually thinking on deploying this to use with my chromebook. I'd just need to solve the encryption thing, I'm not able to combine it with a VPN. So it would be great to have the SSL video. Cheers!
ruclips.net/video/pAM2GBCDGTo/видео.html Thank you!
You're awesome Tim. Thanks for sharing your valuable knowledge
Thank you!
this is pretty cool, i host my own Gitlab so adding this service would be nice also
Good call!
Thank you so much, I really enjoy your homelab content.
Liam Lage thanks for checking it out! Welcome!
Huh, I didnt know this was a thing. Thanks for the weekend project!
Any time!
Awesome vid! Will check it out tomorrow straight away
Nice!
So Personally I dont code and I’m not interested in learning what so ever, but I have ben super hock to this video since the second 1.
So clear tutorial like always, well done Tim! :)
Thanks
Niiiice! Thank you!
This is the best thing I have ever seen. Thanks
I wish I could like this more than once!
Liam Lage well, I wish I could love this comment more than once! I guess a heart and thumbs up will do! Thank you!
Code server is so dope, I just set it up on my linode!
perfect! Was thinking about something like this as i hate installing code and reconfiguring it
agreed!
Reverse Proxy Tutorial would be awesome ! We love your tutorials. Good job @Techno Tim #GreatTutorials
Found it ruclips.net/video/pAM2GBCDGTo/видео.html thank you!
Love the music! Need to utilize the music Choice more into your videos .. I mean after all you are Techno Tim!
Thank you!
Thanks for the video and the walkthrough, have a great day
Thanks for the visit
Great video. Installing a reverse proxy with ssl would be an awesome follow up video.
Found it ruclips.net/video/pAM2GBCDGTo/видео.html
This is excellent. Thanks!
this is what I needed, thank you
You're welcome 😊
Awesome work!!
Thank you 🙂 now it's clear
Hi Tim, I know you did this 2 years ago. I am doing a class on kubernetes for my developers and I think this would be something cool for them to try. Do you have an updated version of this that goes through the new layout of rancher. I also am trying to set this up to use longhorn for the persistent volume so that the code server has a self replicating workspace across nodes. I am also trying to figure out how the secrets are assigned to the deployment for them to use. I will hit you up on twitch as well.
Great job on all your videos.
Just discovered your channel, awesome amount of really usefull content! Could you do a video on ways to properly/securely expose some of the servers to the internet? Like I would like to deploy some of my web apps and host them at home but im not sure how secure that would be.
Coming soon!
Great video as usual! Do you use any note service like Joplin? I’m trying to find an alternative to OneNote that I can host on my server, preferably through a Docker.
Not that I know of, will look into it!
Great video!! if code-server is running in a container on a Linux VM (ubuntu 20.04 w/ docker installed), then how do I use docker through the code-server to run other docker images? I am able to run all the docker functionality within the VM however, from the code-server when I installed the docker extension it tells me the docker is not installed. Do I have to use the DooD (Docker-on-Docker- /var/run/docker/docker.sock) to achieve this. Not able to figure this out yet? Please help. Thanks!!
Excellent and timely video for me. Thanks to your other videos I have Proxmox in my home lab with several VMs, with some hosting docker containers.
I too write software and want to learn how to use docker as a development environment.
For instance, I want a container for a database, another for a JS application, and another for VSCode.
How do I setup VSCode in a container so I can edit files in other containers?
Glad it helped!
Hi. You can install an extension called "SFTP" on code server IDE
Which allows you to mount folders via SFTP. You can also open terminal of a remote machine too
If you use the proxy plus ssl cert then you can access it from anywhere what is the value in having the vpn in that case I mean on setting both
is there a way to use the docker extension from code server as it is saying it isnt installed
Great video, would love to see a reverse proxy video but also with some in-dept explanation on how it works. I only know a reverse proxy to use a domain-name for my services (Nextcloud for example) and also for external access. If i don't want to have access to my services from outside of my network, a Reverse proxy is not needed?
Great suggestion! Soon!
Thank you so much!
Bit late to the party on this one but is it possible to use the Docker plugin and run docker commands on a remote host?
Great tutorial.. which font are you using on this? I am not able to use the font that I typically use like CasCadiaCode with Powerline Gylphs which give me custom symbols. Any idea how to do that?
You would have to install them on the host via apt
I've been looking through your previous videos and have watched several as I'm setting up my Homelab (Gitlab CI/CD pipeline) but I'm not sure which videos you are referring to here.
Can you make, or do you have a playlist of the videos mentioned leading up to this? I would like to follow along but I'm still ascending Mt. stupid (Dunning Kruger Effect)
Nevermind - found them!
Can I run other Docker commands in the terminal here? Building images and running Docker containers?
can we run php artisan serve (Laravel PHP) in terminal (which normally run on localhost) ?
@TechnoTim I know this video is 3 years old but how would you install this on TruNAS Scale? I've installed the openvscode server on Scale but it's not seeing my Docker, therefore I can't use the docker extension.
Recently had to redo my home lab and decided to go down the Rancher route this time since Rancher 2 is so much better now!
I decided to use code server after watching your video but I changed it up a bit... I made a custom image which installs (Kubectl, Terraform, Helmfile, Helm3, Docker client) I also mounted docker.sock from the host node and now I can fully manage my homelab from... well my home lab.
I've left the image public at buckinghamio/homelab-code-server if your interested. I'd be game for talking through it too and maybe some collab on other projects with homelabs.
I personally only run a HP microserver gen8 at the moment but I live and breath Kubernetes, helm, terraform, helmfile being a SRE/DevOps guy career wise.
It would be cool to do a video on Jenkins using docker in docker and how you can have jenkins build and deploy its self.
thank you!
Great video as usual, detail and precise. I used to host code server on a surface go but university wanted me to develop .net framework (which is kinda obsolete) that uses gui so I had no choice but to go full on remote vm.... code server is indeed powerful when no gui is involved imo. Would really appreciate if you can make a video about ssl and reverse proxy.
Thanks for sharing!
Here's the video ruclips.net/video/pAM2GBCDGTo/видео.html
This is awesome
Thanks for sharing
Thanks for watching!
So i noticed some of these like docker and others and some proxmox scripts just do root. Should that be sufficient enough instead of making a whole other user to code in?
Hey, 1, thanks for video, very cool.
2- i use nginx proxy manager as proxy tool, (installed via portainer docker) i never managed to get ssl working automatically via gui. by any means, is it possible that share your reverse proxy setup.
Many many thanks for this! I just subscribed. This solves an issue that I've been having for quite some time. In fact I found out about this video today while researching Gitpod which is a paid offering.
Would buying a Raspberry Pi with 8GB ram be powerful enough for this self hosting solution with a focus on web development? Also couldn't I achieve the same thing with remote ssh in vscode?
A lot of companies I've worked at have restrictive policies about building or customizing a dev environment and, in some cases, group policy reverts changes I've made with my dev environment.
As far as home use goes, I've been trying to use my home machine as an all in one machine but there is too much headache. I use Windows 10 and WSL2 at home on a machine with an AMD Ryzen processor. WSL2 requires Hyper V and Ryzen doesn't play well with Hyper V enabled nor does Virtual Box. In order to update drivers using Ryzen Master you have to disable SVM which is what enables virtualization to be used.
Thanks! I have a video on configuring your local dev environment on Windows. Just use WSL1. I still do. Less headaches with networking for web development. Check out my video!
Hello guys ,
Very good tutorial cheers techno tim .
One questions. Did anyone setup a tab auto fill-out at this terminal ?
awesome Vid I am a bit confused about what you did to echo out the context of the id_rsa.pub what was it that you put in because it changed and it got confusing to follow if you could help, please.
I cat'd out the file. I used GitHub's standard documentation for creating a key, check it out!
Johnny Depp teaching me how to self-host Vscode server. A dream comes true.
are you still using vscode server or vscode with ssh extensions ?
Here's the 10 second version of this guide:
1. ssh to your code machine
2. run vim
Hi thanks for the awesome video =) I've set it up as well, al though, bottom left, there is a connection indicator (yours is green).
At my screen it is blue, any idea why that is? It seems that sometimes a popup comes up saying i need to reload the page...
If you watch the console in the browser you see an error from the extension host trying to connect to port 80 on my server..
Seems weird, no configuration is found for port 80, only 8443. (port mapping is 8443:8443)
No errors inside the container/pod as well.
not sure, did you figure this out?
Well, you have github, but completed with a local git server like gitea and a set of CI/CD tools, I see that being really good for making and auto deploying tools and applications locally from anywhere! That is at least my plan even if I don't understand well how work the CI/CD part for now.
But just for writing code and having something always setup for git with the good library installed and all, an IDE in the browser is really good. What made you choose code-server over any of the other alternative available? theia for example seem well received too
soon!
Not able to do this on a 32-bit machine running Ubuntu server. are there any steps to do this?
Hi Tim, did you try to clone privat repo and did it work for you?
Hi! I should as long as you have your ssh keys!
@@TechnoTim I have configured my ssh key like you did in the video.. mhh strange..
speaking about software engineering.. doing web development.. would be nice if you could also write some java and compile it but afaik it is just a text editor and not an IDE .. so not really possible to do most of my stuff from a tablet.. but i assume you can fire up node js via terminal on the browser there right? i would also like to know how much data it consumes so perhaps you could also do it really on the go via mobile data.. do you have a clue?
You can compile anything your that VSCode can. This is running in Docker which then runs on a VM. You can compile anything you normally would on a VM.
@@TechnoTim sure so you'd need to connect via ssh or vnc and fire that puppy up.. IDE has all in one so debugging is also much more comfortable but i get your point Tim
Thanks for the video. If I run "npm run dev" when developing a JS app, the live server only sees the internal docker containers IP Address, how do you get around this problem?.
This is tricky because you are trying to spin up a web server, inside of a service that's running inside of a container....
@@TechnoTim I think it's possible, otherwise, code-server would be as much use a chocolate fireguard for anyone doing web development. Do you use it for Web Development? and if so, how do you preview your code changes?
How do you get tab complete to work in terminal?
If implimented locally what is the best way to have users? Essentially I want to have one for me and another for my son as work on projects. Is there another better way for that use case if I just want it hosted locally?
I am not sure how to support mutiuser
The coder/coder repository on GitHub solves this. It uses code-server from coder.
why showing k8s with rancher for hosting one container?
Any idea how to get jdk installed on it ?
Awesome content!! I’d appreciate the reverse proxy server tutorial as well.
Thank you! Here it is!! ruclips.net/video/liV3c9m_OX8/видео.html
How to start react app in this and map the ports
like you said what's the value for host code server between using VS code with a remote extension to code in the server which also installs all the dependency in the server with the VPN connection or ssh.... mmh.... interesting...
Good point! Well, you don't have to SSH and it runs in a browser!
Catch a like and Subscriber, great content.
Greetings from Germany.
Thank you!
Is there a way to do this using VSCode itself (or other stand-alone app), besides accessing it via a browser?
Why not just use VSCode with a remote ssh extension? The purpose of this is to give you VSCode in a browser so you can write code on the go!
Reverse proxy server tutorial? Yes please!
Soon!
whats the name of your outro song?
How about setting up MongoDB while developing BE , and what if need Android / iOS Emulator. Any direction I can refer to ?
Applications that require a GUI won’t work with this since the application is running on a server and not your computer. GitHub Codespaces have this “issue” to.
1st world problem: to many environments to maintain
I have multiple machines office/laptop/home pc and I a) Hate having to configure all of them b) Have to do partial commit when switching machines... which bad if you try to read it later.
This solves both problems! However there is questions of stability and feature parity... I have new project, so I will try to run this for it and see how it goes.
thanks! let me know!
@@TechnoTim Back from my journey of discovery. Here are my findings:
a) VS code server is not ready to be main development platform. Lack of some supported plugins just killed it for me, also some smaller issues showed up, so it can not be main but...
b) Using a remote server to run and store the code and local vs code to edit is perfect. Having access to same code and same configuration on any machine by just remoting into the server using local VS Code remote plugin was perfect and having in browser access to it as redundancy is great.
I had this very sweet moment while testing. I opened same file in VS code in browser and in VS code local side by side. I edited text in one and text in the other updated, edited it in the other and other updated then opened it in my laptop and just kept typing the same line. 🤗 Perfect!
P.S. I was hoping to use free server by oracle (4 cores 24 GB RAM) to not deal with security but node project I tried to import just imploded because not all the dependencies had arm options, so will have to look for some cheap just on demand server options to host my perfect coding environment.
Whats the diff between ssh connection via VS code and this method ? Is there any pro cons to it ?
This works in any browser, no ssh needed. Works on Android and iOS tablet etc...
Awesome video :)
Glad you enjoyed it
Nice outro music.
Great video ! Is it possible to develop ReactJS and Spring Boot app using VS Code server ?
Justin Coutarel certianly! Anything you can code in VS Code (which is basically anything) can be done here too!
i have question i create map i want to connect mine host to other link server let me know if u can great vid
Amazing video, :)
Thank you very much!
another great video
Thanks for the visit
I know this video is old but i'm trying to get this set up for python. seems like python and pip aren't available. I didn't see you install any binaries
You would have to install them on the host!
Can anybody tell me how to actually see the webpage I'm working on while using codeserver ?
I use the combo nginx proxy manager + codeserver + chrome with app mode enabled for my main dev build for more than a year, and it's pretty great. With nginx proxy manager I add the password security and free let's encrypt https certificate. With chrome in app mode, the chrome window looks like the real vscode, and the keyboard shortcuts works fine, win+w close the code tab, not the window.
nice! I created a video on how to do it with traefik!
Do you know how to do it in windows?
Love the video. Unfortunately, I'm pretty clueless when it comes to servers and docker and I'm running into what's probably (I'm hoping) a basic problem with a simple answer.
As a learning experience, I installed fedora server on an old laptop and that's where I'm trying to get this working. I have code-server running but now I'm trying to figure out how to get to node & npm (node is installed on the server, not in a container, but it isn't seen from within the code-server container).
Can anyone point a clueless newbie in the right direction? I tried 'dnf install nodejs' inside the container (using the terminal in vscode) but I get 'dnf: command not found'. How do I access commands on the host from within a docker container? I haven't found the answer yet on stackoverflow (it's not unlikely that I'm just not using the right search terms).
It's impossible is it not? A docker container is a sandbox. It can't access anything outside itself.
@@Keklmao Yes, that's my understanding, but I thought there is a way to allow limited access to the host. If not, do you know of another way to use node/npm from within the code-server container?
Seems like that's something a lot of people would need, so I'm sure there must be a solution. I haven't found it yet, though. Maybe I just need to dedicate some time to learning Docker.
When I open the server, I get that the site can't be reached. I disabled the AV, just to be shure, but nothing. What could be the problem?
Hi. Not sure. Did you forward ports correctly?
@@TechnoTim if you mean at the router, no I didn't, was it in one of your videos? I guess I missed it then
for some reason it didn't work, it deployed but i get a refused to connect error when trying to load the website, i also get a error that says deployment doesn't have minimum availability but it soon after says active.
Not sure, sounds like port mapping or volume mapping.
A video on reverse proxy and SSL using Let's Encrypt would be great.
#soon
Hey Tim, big fan I love your videos! However, as I was trying to use VS Code for C/C++ remote development, this tutorial did not do the trick. I was unable to use any sort of gcc compiler or execute my C++ code. Instead, I was getting syntax errors left and right, and the run/debug feature was utterly useless. I even downloaded an 'offline' cpptools .vsix extension for c++, but that did not help whatsoever. Have you or anyone else gotten this environment to work for C/C++ development?
You'll need to install the compiler on the host machine.
Is there a way we can collaborate in real-time with remote co-developers on code-server ?
Not sure, I don't think Code Server supports this. Sounds awesome though! LMK if it does.
Can you please make a new Rancher installation tutorial? It seems like some things changes since your last video...
Not much has changed though. Just a few GUI things. Maybe hop in the discord then the comunnity might figure stuff out with you :)
Envoy video would be great
thanks!
@@TechnoTim after looking around at traefik/envoy/linkerd, seems like linkerd is better supported and better equipped.
I am using currently traefik with docker. But I wonder what I would use with kubernetes.
Traefik built with go while linkerd with rust. So I suppose developers may be exited about both, but more developers experienced with go currently
Brah what’s that intro song? 🎶
Can you please make a tutorial on reverse proxy + bastion server on google cloud platform.
Here you go ruclips.net/video/pAM2GBCDGTo/видео.html
Can u please make a video on self hosted VPN server on our local machine with dynamic IP ??
Soon!
@@TechnoTim thanks, highly appreciated
tremendo