Running Remote VSCode (Visual Studio Code Server) on Google Colab Browser

Key Takeaways

hey friends welcome to one little coder in this video we're going to learn how to set up a remote vs code server that could be accessed so you're going to set up that vs code server on google collapse machine and then from that uh you can use that vs code ide um anywhere where you have got an internet access so the way we are going to do is based on this tutorial so thanks to ahmed chaudhary for putting together this tutorial which helped me put together this video for you so the way we are going to do is first we are going to install this instance of code server that helps us access vs code on any machine anywhere just with a browser so basically you need a linux mission which is what we have got as a google cola mission and then once you install this vs code instance server on this linux mission so you just have to start the vs code instance uh server and then you get a local host url the problem with the localhost url is that would be valid only within this uh linux machine which you cannot access because you google up doesn't give you a browser access right so further what we are going to do is we are going to use um the google collab we are going to use ngrok we are going to use ngrok and then tunnel that particular localhost url to a public internet url which could be uh accessed anywhere where you have got in uh internet access so if you are not familiar with ngrok uh inrock is a very popular tunneling service so we have already put together videos uh on how you can simply under temporarily quickly install a machine learning web application on google collab uh using ncroc so i would recommend you to check that video and i would also link that video just below the like button and if you like this video please uh like give a thumbs up and then share the video and if you have not subscribed please subscribe so let's get started with this thing you can actually read about what is code server and how to use all those things here so we'll quickly go and see how to install it you can copy this paste it here and then you can start installing once this installation is done then we are going to use pi and grock pi and grocer python package wrapper around in glock so let's kick start that once you kick start that you can see that uh pi and grock is installed so then you have to import and grock and then you are starting n rock on a particular port so this uh particular port is essential because that port is where we have to now route our code server instance so this is the url at this point uh you there is nothing you are seeing through this url so you can have a look at it next um we are going to now start the code server instance and we are routing it to this particular uh port so let's start it once you started now you are sending output to this particular port and now let us refresh this link which is what we got here so it's the same link so let's see what happens it's still loading and uh it is almost done and it's going to ideally show you so it's going to show you an instance of ide so you can start writing the code so you can like um go here and you can say okay i think this is not quite visible i hope this is visible now so you can go here and then you can start writing the code that you want and if you want to say okay i want to write a python code so i can simply go and start a python file uh you can start with anything i'm just starting with the language that i am familiar with so click the python file uh so it's going to okay it's going to start a new python so you can click here go file new file and then once you go there if you want to load python so you can click the plain text here and then say i want i want python okay i've got python and now i'm going to say okay import math and say uh answer is equal to math dot square root of um let's say 256 i'm not sure or if 256 is a round figure then i can say sample pi i'm saving it on my root sample y dot pi so it exists i just want to override it now i can just fire up a terminal okay i can download this file also so that's the base safest option if you want to do or in case if you want to connect with your git you can do all those things so that you don't lose actually anything you can just simply start using it but i'm just going to fire up my terminal and say python sample oops sample pi dot pi and then when we run it nothing happens because i have not printed it and save it and when you run it you get 16 when you put 16 here and you get whatever right so or if you want to print the same answer like for uh i uh i in re sorry i in range of 0 to 10 and you get the same answer so you have successfully written a python code and you have executed it you could download it and you can also install extensions that's a beauty array so you've got a full-fledged ide on your browser without any um big dependencies just by firing on google collab and installing code server and once you're done with this thing once you're finished with this thing so you can probably close it um or if you're uh you know if you don't want to give this code to if you don't want anyone to use this so what you can do is you can securely disconnect it once you securely disconnect it now when you click this url nothing is going to happen in this url because now you have securely disconnected it so when you again start your ngrok instance it's going to start with a new url so let me just show you so um in the free edition you cannot have multiple ingrock session but the idea is uh it will start with a new url and then that url is going to be different from this so that no one else can access your uh vs code um same instance so this is quite a handy tutorial once again thanks tommy chaudhary for putting together this uh documentation which is which is quite a simple idea but um you know it doesn't click for a lot of people to think like this and that's the main thing about this small little hack that helps you install uh vs code server on google collapse linux mission and then fire up that server instance and tunnel it through uh ngrok to access it anywhere with that url it could be your ipad or a mobile phone or whatever it is so i hope this video was helpful for you and if you have any comments please let me know in the comment section and i hope you test it out this is a very beautiful hack and at least for the sake of its beauty and elegance you should try it out and if you have not subscribed to our channel please subscribe and until next video please stay safe bye