VS Code for iPad (and Other Phones and Tablets)
I have always admired the potential the iPad has had especially when it was first released several years ago. The thought of having a mobile handheld with a decent size screen that can allow me to watch movies, answer emails, play games and get some office productivity done was a huge selling point for me. As somebody who had grown up always working with some form of analytical toolkit and programming interface, I always wondered whether the iPad could eventually become a true replacement for laptops. I always felt there was some form of limitation despite my best efforts to find random hacks. The biggest sticking point for me was the inability to code on the iPad and therefore always carried around a laptop in my travel bag.
Fast forward to 2021, the question resurfaces, can the iPad replace a laptop? For my use case and what I need to do the answer is big YES. In fact since the start of the pandemic, I’ve used my laptop a handful of times and have largely leveraged my iPad Pro with magic keyboard. So what’s changed? In addition to being able to watch Netflix, play games using cloud gaming services, office productivity, I’ve found a really strong alternative to be able to code.
Now don’t get me wrong, I’ve used tools like Pythonista and Textastic to “get by”, but being someone who loves using tools like sublime text and VS Code, I needed more. I feel I’ve found an amazing alternative albeit with a few trade offs that I’m more than happy to compromise. I’ve got a full screen, desktop like experience of VS Code using my iPad. The only compromise is that I need an internet connection. The ability to do this is all because of the folks over at coder.com who have provided a browser based implementation of VS Code.
Another selling point of running this off of a remote server is you can it off of devices that may not have the most current and fastest specs without compromising too much on performance. Also if you save something on code-server, the ability to pick it up on another device be that a cell phone or another device is defiantly a bonus
I’ve set up a progressive web application (PWA app) on my iPad that runs VS Code through a remote server, a raspberry pi with VPN access in my case. You can easily put this on digital ocean or linode and run it off of their cloud infrastructure as well. If you want to see this in action check out the link below otherwise let me walk you through this process.
Check out VS Code on the iPad – https://youtu.be/qYG2Jn3gMjc
Ok so what you’re going to need are the following:
- iPad, iPhone or some other phone or tablet
- A server such as a raspberry pi or public cloud server
- About 30 min of your time
First lets ssh into our server and update and upgrade our packages
sudo apt update && sudo apt upgrade
The next thing we’ll need to do is to ensure we have the latest version of node
npm install -g n
sudo n stable
Next let’s go ahead and install code the automated script for vs code
sudo curl -fsSL https://code-server.dev/install.sh | sh
This may cause a few errors but don’t panic, let the script do its thing and wait for about 10–20 min depending on the server you are using for the backend. In my case I’m using a raspberry pi 4 with 4GB ram. Now to test out your solution lets check if code-server is working. To do that type this in your terminal.
You should be able to visit code server at localhost:8080
Now let’s go ahead and create a service file for code-server that will automatically start code on reboot. First find the executable path. In order to do that type
This should give you an output like /usr/local/bin/code-server which is the executable path. Now let’s setup the service file.
sudo nano /lib/systemd/system/code-server.service
Now let’s go ahead and build our service file. There are a few things we’ll need to update here.
Environment=PASSWORD='ENTER YOUR PASSWORD'
ExecStart=/usr/local/bin/code-server --bind-addr 0.0.0.0:8080 --user-data-dir /var/lib/code-server --auth password
You can copy and paste the file above. Update your password to log into code-server. The rest can stay pretty much the same. Ok now lets start and enable our file
sudo systemctl start code-server
sudo systemctl enable code-server
Let’s go ahead and check the status of our code-server
sudo systemctl status code-server
You should be error free but if you find any issues, try to retrace your steps. Luckily code-server is setup to leverage the capabilities of PWA apps so now open up safari, visit http://localhost:8080 and you should be able to see your code-server implementation. Even if you reboot it should start this in the background automatically. Now click on share, add to home screen and when you fire this up again it will give you a full screen VS code implementation on your iPad. If you are curious about how to get the VS code logo, check out this video to learn more. It will walk you through the resources and method to get it to work.
Hopefully you enjoyed this article and are able to get the benefits of VS Code on your iPad. If you want to test this out for free on a backend platform then use this referral link to get a free $100 credit at digital ocean. Enjoy!