VSCode on Browser (iPad/Android) with ColabCode | Google Colab Python

Key Takeaways

hey friends welcome to one little coder do you know that you can actually access vf code on your browser yes that is possible with github code spaces github code spaces is a hosted environment for a vs code so you can actually open vs code and then do everything that you do with your computer's vs code but the problem with codespace is that it is still in early beta and a lot of people have not got access even after requesting access but what if you want something that is like codespace where you can access vs code in the browser uh without you know you have to set up much and that is where collab code comes into picture thanks to abhishek toggle for putting together this package so collab code is a python package that helps us spin up a vs code instance quickly on google collab so vs code has an open source version called code server so that code server can be installed on any next mission and that's what is happening under the code between behind collab code so let's quickly go ahead and see how we can access collab code and vs code on our browser so i've got a vs a google collab environment which i'm not connected by the way which is a mistake i'm sorry uh that would probably take some time so while it is getting connected so the simple way for us to install collab code is pip uh install collab code so after we install collab code so you can actually see the see the documentation there are two ways you can access collab code one is uh from terminal as a command um like typically how you do with the clies and the other is within a python code so what we're going to do in this tutorial is we're going to look at the way how to do with python code so the other thing that i wanted to highlight here is collab code by default itself will give you an ngrok instance and then now it will give you a link but if you want to use your own in croc it's always better to set up your own ingrock and take authentication from there and uh the advantage with that is you get a slightly longer ingrock session you have control over the url that you get so first we will see normal collab code instance then we will see how to do use the other features of collab code so right now we have installed collab code successfully next is from collab code import collab code just slightly you have to pay attention to the cases so it's propagation that is um um small case so after you do that you can just simply say collab code and then you can just fire it up you can like simply do it without you know adding any parameters so let's do it before that you can actually see code is equal to true by by default lab is equal to false we have already got another video which shows how you can use jupyter lab on your browser you using collab code with this video specifically for vs code so we are right we are going to leave it as a discord is equal to true and let's run it and once we run it we would uh we would get a collab sorry a vs code instance with an ngrok url and once we click the incro url the vs code instance should ideally open so you can see that it is working i've not edited this video so you can actually understand how much time it takes so click this link it will take you to a url where you would see the hosted uh vs code environment very similar to codespace if if ever you get code space and when i say very similar to codespace the reason i say that is you can copy this link and then paste it on your tablet or ipad wherever it is so so it is truly you know browser based like no need for any platform or anything so basically what has happened is this code server has got installed on the collab machine on the machine that google has given you so as long as that session is active and as long as your ingroud title is active this link would work so let's quickly see before even we see that i would like to also show another quick instance so now that you saw that the vs code is ready sometimes you know you want to protect your instance with the password and that is also available here password is equal to let's say one little quarter and while we do this i would also show you that uh we can use our own in rock authentication so when you install ngrok you can go to encroach dashboard and then you would see your authentication code here it's always not advisable to share your code with anyone so i'm just making it for this video i would reset it up this video so take your authentication authentication code token then save it probably you can delete it then then you can say uh definitely this is not the way you use an authentication token probably you can use environment variable um or a token file but i'm just showing it for simplicity okay and now if we fire it up so it would have uh it would use our in grog instance and also it would ask a password before it uh it lets somebody or anybody use uh the vs code instance so then grog url so we click the url it is asking for password and you know what is the password that we give so once i enter the password it's going to ideally take me to that place and then we'll uh we'll write a sample python code and then we'll see how how things work and what what kind of things are there so this this ngrok url you can now take this and then open it in any browser or anywhere else like it is not this um browser specific like uh if if i if i want okay let me first even in fact before that i'll let me create a create a file new file and uh let me call uh let me you know just write a sample python file and put pandas as pd i think you can sorry you can see let me zoom it in um if you want to you know change the theme color theme i want let let's say dark so change it to dark you can like everything that you do um select uh select python yeah um c bond as sns and then uh let's quickly write something df is equal to sns.load dataset of tips and um sns plot is equal to s dot scatter plot x is equal to total bill y is equal to um y is equal to okay i don't want to play with the indentation y is equal to tip and data is equal to df and once we have that um sns plot dot figure dot safe figure i think let me just quickly see seabond safe figure [Applause] we should get yes a fig output fig vscode.png so right now we have successfully created a python file so now we are going to say saying sample uh cbond we are saving it in the root file once you save that you can now invoke your terminal new terminal once we have the terminal in place let's uh let's look for the current files so c1 is there so python sample yeah the other thing that i forgot to mention is uh when you open vs code by default you get the python installed you don't have to install python extension for vs code it also comes with jupyter so you can do that um yeah right now we don't have files open i should have probably opened the files root file let me open the root folder now it's going to slightly you know close and open again because i'm i'm making my root folder the current folder someone root c bond is there output vs code is there and you can see the file so let's say you want to make some change um say i want to set a title set title and what's the title title vs code browser bad title but um yes uh open your terminal you can use shortcuts as well if you want open your terminal say python sample executed to get a new vs code after it gets executed no new image and then you got vs code browser and then the image so basically everything that you can do with the vs code you can actually do you can set git if you want um you can install any extension that you want you can do code debugging if you want like whatever code you want to debug you can debug so basically you get a full-fledged proper vs code editor on the browser and also the fact is that you it it is predicted with a password so you can share this link so what i wanted to show next is to quickly show you how you can take this link and then open it somewhere else so let me let me get a chrome instance which is uh you know which is not this browser so like that means my google is not open so which means my collab instance is not open so but still i'm going to show you that just because you have this ngrok url and you know the password you can actually log into that and then access the same code space so this could be really helpful if you are doing a code pairing or your your working on a pair programming or you're working on a project university project or a team project where you want to share the code with you know others so that's one advantage i think the biggest advantage is leveraging google collapse machine so if you're working on a machine learning project sometimes you may not want to actually code on a jupiter environment i mean uh jupiter is good collab environment but not every time you you actually like a jupiter you know notebook setup so that is the instance where you would probably want a proper id code editor and uh vs code is you know one of the most popular code editors that is currently available and then if you can get vs code on a powerful collab machine i think that is um that is a real win-win for anyone who does it so as you can see we can successfully see this this on a different machine so if you want you can like change color theme like um let's say on change something you you can like totally play with whatever you want like solar is light so you can play with whatever you want everything is same see you change here and then you would see things getting changed here uh this is this is sample editing once you get it you go here so you see that so it is really good for even pair programming and then you know you have a centralized environment in your organization like probably if you are a big corporate you may not need this but if your startup this is extremely handy and like i said if you get uh your own ingrock url and then your own authentication you get a longer session and then you can start leveraging that so i i hope this is really helpful and like everyone who misses codespace should definitely rigid because even if you do not have a computer all you need is you know a tablet and a keyboard bluetooth keyboard connected you have access to gpu tpu and powerful linux mission then you can actually do machine learning or any any sort of software development on a proper ide that is quite popular in the entire world so this is quite helpful and once again thanks to abhishek talker for putting putting out this package if you really like this package go ahead and then give star uh to the package and then give a shout out to the developer on twitter or linkedin wherever you know you are um you can read more about it what kind of other use cases are there like i said this this package can also be used to spin up a jupiter lab instance and i've made a separate video for that i'll link that video you can you can see it uh at the top right and thank you so much for listening to me if you have any questions please let me know in the comment section otherwise happy programming and stay safe