Transcription

I have to say I really love technology whether that's using the iPad and building code to do a lot of cool things or using technology to make your drinks. But regardless the experience is awesome. Today I'm going to show you how you can go ahead and install VS Code on your iPad and get a full desktop experience using your iPad. So it's very simple, you put the icon on your desktop, you click it, it's gonna go ahead and load it. You put in your password, hit submit. You are now logged in to VS Code server running on your iPad and I've actually built this entire script that you're seeing here and I'll link something similar in the description. We'll run every now and then and check stock for me. Now this VS Code server is actually running off of my Raspberry Pi and I've built a PWA application for the iPad so that you can actually go ahead and get that full desktop experience. So if you want to learn how to make this stick around I'm going to show you step by step. Okay so first let's go ahead and exit out of this and we're gonna go and open up an application called ISH. Now ISH is what I use basically to do all of my Linux commands on the iPad. It's a free application check it out on the App Store. I'm also gonna put a link up in the corner and in the description where I walk you through how to set up ISH on your iPad. So let's clear this out. Okay so first we're gonna go ahead and authenticate into our Pi. So we're gonna SSH into the Raspberry Pi and then we're gonna say yes to fingerprinting and then finally we're gonna put in our password. Now just for context I'm using a Raspberry Pi 4 with the 4 gigabyte RAM. Now the other thing we need to do is we need to make sure we have the right version of node. So the Raspberry Pi 4 gets shipped with version 10 and we need at least version 12 for this to work. So I'm gonna go ahead and install a helper file that's gonna allow me to go and manage the versions of my node. And so what I'm gonna do is I'm just gonna go ahead and clear this out and then type in sudo n stable. Now that's gonna give me the most stable version of node as of this recording which is version 14. So let's clear this out and now we're gonna go back and check our node version and we're good we have node version 14. Okay so next we're gonna go ahead and execute that script and sorry that went a little bit fast but if you look on the top it's it's a curl command and I'll put that in the description and what that does is that automates the process end-to-end for you to go ahead and install code server. And again code server is an implementation of VS Code. Alright now here you're gonna run this inflection point where your natural tendency is gonna is going to be to exit this because you see these errors here. Don't do that just let it run its course. It's actually trying to find some other packages when these errors do pop up and what you'll notice is if you let it run it's gonna go ahead and locate all the packages that it needs. Now this process is very lengthy it probably takes end-to-end to run for about 10 to 15 minutes for this actual sudo command. So run it step back grab a coffee and then come back. Alright so now after that runs which was there for about 10 minutes I just cut out that part of the video. It's gonna go ahead and search the rest of the dependencies but I'm gonna let it run because I want you to see exactly what's happening so that you can compare and make sure that you have a similar experience with your Raspberry Pi. And now you know I should also say that as I say this is running on a Raspberry Pi in reality you can run this on a Linux server. You can run this in Google Cloud and you can use things like tensor units to really boost up the speed in the background if you're doing machine learning. You can put this in DigitalOcean and access this externally as well. So you can really put this anywhere but I think using a Raspberry Pi is probably the easiest way to show you. Okay so actually now this is done running. Okay so let's go ahead and clear this out. So the next thing I want to go ahead and see is check out the actual hostname address and I just realized I should be using capital I not small I because capital I is gonna give me the local address of the Raspberry Pi. So I'm gonna type in hostname tack capital I and that's gonna give me the IP address for the Raspberry Pi itself. The next thing we're gonna do is we're gonna go ahead and run code server to make sure that it actually installed correctly. To do that you just type in code hyphen server and this is exactly what we want to see. This tells me that it's actually working and we're not serving this over HTTPS because this is over your local server. Now there are ways to do that with self-signed certificates but we're not gonna go there today. What we are gonna do is we're gonna go ahead and edit that config file and within that config file the only thing we're really gonna touch and change is the password. Everything else will leave as is. So I'm just gonna go ahead and edit this password and just for simplicity's sake we'll make it something very easy for now just say make it hello 1 2 3 and I changed my mind let's also go up here and change this bind address to 0.0.0.0 because I'm not going to be using a reverse proxy like nginx we're just going to be serving this on our host so any basically any device on the network is going to be able to go ahead and access it. So let's go ahead and run code server again and we see that it's actually running on 0.0 so now let's go ahead and go to that website so it's .201 and then the port was 8081 I changed it to for now and when you go ahead and run code server and you put in the password hello 1 2 3 we hit submit now this may take a little bit of time on the first run because it's trying to initialize everything in the back end what I found is that when I ran it the second or third time it ran pretty quick so there you go you have an instance of code servers just telling you that it's not going to be served over HTTPS but outside of that you have a working instance of code server which is awesome let's just go ahead and check out some of the things you can go to your directory and open a folder if you wanted and again this is running the latest version which is 3.9 as of this recording I was like using the dark theme so we're gonna go ahead and change that over and the settings as you can see get applied automatically and now it goes into dark mode which is awesome okay let's go back for a second to the pie there's a little bit more work to do so what I want to do is I want to find the execution path which is right there and that's gonna be important because we're gonna create a service file and let me just fix this and add in system there you're gonna create this service file and you're gonna copy and paste this code now I will have this on github as well you can go ahead and download this code and put it and use it for your Raspberry Pi and as you can see under the X path that's basically the execution that I use or the execution path that I used so we're gonna go ahead and start this system file and all this does is that it runs a process in the background so you don't have to start code server every single time on your own and once you've done this we're gonna go back and check the status to make sure that it's running properly which it is and that's awesome and now we're gonna enable it because I want to make sure that every time on reboot this actually runs on its own so you don't have to go back and run it every single time so what we're gonna do is we're gonna go ahead and write in sudo system CTL enable code server and again that's gonna do that in the background for you it's gonna create a symbolic link and now we're good to go so I always like to just go ahead and finish this off with a reboot so we just hit sudo reboot and now we're just gonna go ahead and run this back again to make sure that the actual status shows that code server is running fine so let's go ahead and run this and right off the bat I see an issue and that's something that I did sorry and that is I forgot to change the bind address in the actual service file so let's go back and open the service file and we're just gonna go ahead and change that bind address again back to 0.0.0 and again it because I'm not using reverse proxy I have to do this if you are using a reverse proxy you're fine especially if you're using like a pie hole or something like that and you can go ahead and set up your local DNS but outside of that I can't really do that here so I just changed the bind address back to there and I'm gonna go ahead and restart this code server it's gonna go ahead and tell me that I need to go and reload the daemon which is fine so we're gonna go ahead and do that okay now once that's done let's go back and look at our status and now I'm running out of bind address of 0.0.0.0 which is exactly what I want now that just means any device on your server can go to the local IP address of the Raspberry Pi which in this case is .201 and we'll change it back to port 8080 because that's what we have in our service file and we go ahead and back and rerun this and you're gonna see how much more quicker this is so this runs I've got to go back and reset my settings again so first things first for me I have to go back in and change this back to dark mode because I just can't work in this kind of an environment it's too stressful so here we go we change it back to dark theme all get saved and now in the future when I run this it's gonna be fine it's gonna all be in dark mode now I'm gonna go and run this in our private window and I'm gonna try to create a PWA which is basically a progressive web app and that allows you to go ahead and add this to your home screen so as you can see it's called code server I'm gonna just change it to VS code now it's got it's on my desktop or I saw my iPad which is great what I don't like is that icon so I actually want to have the traditional VS code icon so we're gonna switch that in a second but I just want to show you the beauty of this now is it's full screen so no longer do I have a browser window or within you know where I can go ahead and put in a URL or something it's actually a full screen experience and that's what I love about this alright so let's go ahead and now take care of that icon because man that bothers me so I'm gonna open an application that I have it's called textastic I use it every now and then for coding but really I like the fact that it has this cool FTP capability now this is the icon I want to use I want to be able to have this on my desktop because that is traditional VS code logo and that's what really what I want to use and that's what we're gonna go ahead and change our desktop icon to so in order for me to do this I need to go ahead and open up the SFTP access basically SSH into this server that we built so I'm just gonna give it a name for now I'll go ahead and log in with the IP address that we've been using put in the username and put in the password and then now we're done I'm gonna go ahead and open this and I'm not gonna save this directly into the VS code file yet just because of permissioning I'm just gonna go ahead and upload this into my into my documents folder for now or downloads folder I should say for now and just throw it in there and we're gonna go ahead and move it within the actual Linux commands and use the sudo command to do it it's just a lot easier alright so I'm gonna go ahead and find that directory and you see that the two files are sitting in the downloads and that's those two VS code files and again these will be available on my github so you can go ahead and just download them from there okay so now this took me a little bit of time but I'm gonna save you guys the effort here to find the actual location of where this stuff is so supposed to get moved into for this to work with VS code server so I'm gonna be going ahead and seeding into a whole bunch of directories but just give me a second I'm gonna print the working directory and that's what you should be using at the end of the day so let's go ahead and type in PWD and that is a directory that you need to use so go ahead and CD into that directory over there once you've done that we're gonna go into browser then finally go into media and this is the actual directory where all of those files sit today but I want to grab that path over there because that path is what I'm going to use to move my documents over and you'll see that in a second so let's go back into our downloads and you see those two files so I'm going to type in sudo mv for move and I'm going to type in VS star that basically means that I'm going to move any file that starts with VS and then anything after that basically into that directory that we copied the path to so now if I go back into that path into the VS code path I should say you'll see under media now I have those two files sitting there which is exactly what I want and now we're just going to go back and now I'm going to open the pages folder and in pages you're going to see the login.html which is going to go into the login.html and we're going to go ahead and change two lines which are right here and those are basically your PWA icons that it's supposed to display so we're going to type in the VS code ones that we actually added now let's clear this out and now we're going to go ahead and see that when I actually try to save it now it actually defaults to the right icon that I want so I can call this whatever I want so I'm just going to go ahead and back this out call this VS code server hit add and as you can see it's added to my desktop and now I can basically call this anything and it's a full instance of VS code running off of my Raspberry Pi now this is pretty awesome and the benefit of this is I can install whatever I want that you'd be able to install in a general VS code server you can install on this just keep in mind that you're going to be constrained by the actual capacity of the Raspberry Pi but outside of that you know the fact that you can do this is awesome and I can code on your iPad so hopefully you enjoyed this video if you did please consider liking and subscribing and I will see you next time thanks very much bye bye