How to use Visual Studio Code on your iPad

I recently came across the problem that when being on vacation I don’t have my main computer available. I usually only go on vacation with a light weight set of IT equipment, which is in this case my iPad Pro and a few cables and chargers. This is a conscious decision since I don’t want to invest too much - in the best case no time at all - into sitting in front of my computer. How ever, there are situations where you need to do a quick fix: for example one of my websites breaking or any other service not running anymore. Even if this would be theoretically possible it is hard to fix these things on a smart phone without having an IDE like VSCode[arch] in place.

Thus I needed to have a setup which allows me to fix at least urgent things while - at the same time - does not tempt me to do more than this.

Why iOS doesn’t support VSCode natively

Apple‘s iOS is a heavily regulated operating system. This brings many benefits, but also has disadvantages. One of them is that you cannot install apps that rely on an underlying operating system. VSCode makes heavy usage of the shell provided by the OS. As iOS doesn’t provide any shell it is hard to port these apps. The app would need to contain a whole Linux distribution in order to provide the same feature set.

This limitation leads to the need to run VSCode on a full featured OS instead of directly on the iPad. But don’t be afraid, it will nevertheless feel like it would be running directly on your iPad.

Hardware setup

Since we want to build up a portable and lightweight setup, we are going to use components that can run off the grid and have a small form factor.

Bill of materials

1. Raspberry Pi 4 (8GB)[arch]: you may choose the 4GB, but you can never have enough memory!
2. USB C to USB C cable: Make sure it works for power delivery and data transfer.
3. Micro SD card 128GB or more. I personally use a SanDisk Ultra 400GB Class 10 card.
4. Case for the Raspberry Pi
5. iPad Pro with USB C port
6. (Bluetooth) Keyboard & Mouse for iPad

Setup RPi’s USB-C Port as network interface

We‘ll configure the raspberry’s USB-C port to act as a network card of your iPad. This will enable the iPad to talk to your raspberry, while staying in its wifi network to be able to use internet based services.

SSH into your Pi and execute the following steps. Alternatively you can mount your SD card on a computer and do the steps 1-3 by editing the files there.

1. Edit /boot/config.txt and add dtoverlay=dwc2 to it. This will enable USB OTG mode on your raspberry.

2. Add modules-load=dwc2 to the end of /boot/cmdline.txt. It will make sure that the kernel receives the command to load this module as a parameter

3. In case SSH is not enabled yet, enable it by adding an empty file called ssh to /boot/. Creating it will enable the SSH server during the next boot

4. Edit /etc/modules and add libcomposite in a new line at the end of the file. It will make sure the USB gadget drivers are loaded

5. Edit /etc/dhcpd.conf and add denyinterfaces usb0 to it. Since we don’t want our USB network interface to be configured by DHCP, we explicitly deny this

6. Install dnsmasq using sudo apt-get install dnsmasq. dnsmasq will be acting as a DHCP server for the USB-based network interface. It will make sure that our iPad ethernet interface receives an IP address.

7. Create a new file /etc/dnsmasq.d/usbnetworkand add the following content:

   /etc/dnsmasq.d/usbnetwork #L1-L4 Copy

   1interface=usb0
   2dhcp-range=10.55.0.2,10.55.0.6,255.255.255.248,1h
   3dhcp-option=3
   4leasefile-ro

8. Create /etc/network/interfaces.d/usb0 and add the following content:

   /etc/network/interfaces.d/usb0 #L1-L5 Copy

   1auto usb0
   2allow-hotplug usb0
   3iface usb0 inet static
   4  address 10.55.0.1
   5  netmask 255.255.255.248

9. Create /root/usb.sh and add Ben Hardill’s amazing code[arch] for configuring the hardware characteristics:

   /root/usb.sh #L1-L31 Copy

    1#!/bin/bash
    2cd /sys/kernel/config/usb_gadget/
    3mkdir -p pi4
    4cd pi4
    5echo 0x1d6b > idVendor # Linux Foundation
    6echo 0x0104 > idProduct # Multifunction Composite Gadget
    7echo 0x0100 > bcdDevice # v1.0.0
    8echo 0x0200 > bcdUSB # USB2
    9echo 0xEF > bDeviceClass
   10echo 0x02 > bDeviceSubClass
   11echo 0x01 > bDeviceProtocol
   12mkdir -p strings/0x409
   13echo "fedcba9876543211" > strings/0x409/serialnumber
   14echo "Ben Hardill" > strings/0x409/manufacturer
   15echo "PI4 USB Device" > strings/0x409/product
   16mkdir -p configs/c.1/strings/0x409
   17echo "Config 1: ECM network" > configs/c.1/strings/0x409/configuration
   18echo 250 > configs/c.1/MaxPower
   19# Add functions here
   20# see gadget configurations below
   21# End functions
   22mkdir -p functions/ecm.usb0
   23HOST="00:dc:c8:f7:75:14" # "HostPC"
   24SELF="00:dd:dc:eb:6d:a1" # "BadUSB"
   25echo $HOST > functions/ecm.usb0/host_addr
   26echo $SELF > functions/ecm.usb0/dev_addr
   27ln -s functions/ecm.usb0 configs/c.1/
   28udevadm settle -t 5 || :
   29ls /sys/class/udc > UDC
   30ifup usb0
   31service dnsmasq restart

10. Make the file executable by running chmod +x /root/usb.sh

11. Add /root/usb.sh to /etc/rc.local before the exit 0 line to automatically execute it on each system boot.

After you (re-)started your Pi, you should see a new network interface on your iPad:

Setting up VSCode

I’ll assume that you have raspbian[arch] installed on your pi. If not, do follow the instructions here[arch] to get there.

For executing VSCode on the Pi and make it accessible from the iPad, we will use code-server[arch]. Code-server wraps VSCode and it’s dependencies into a service that can be accessed trough your browser.

Installing code-server on your raspberry Pi

1. Install yarn by executing sudo apt-get install yarn

2. Install code-server globally by executing yarn global add code-server

3. You should now be able to run code-server by executing yarn run code-server

4. Setup the code server configuration to match your network configuration. Edit ~/.config/code-server/config.yaml and paste the following config:

   ~/.config/code-server/config.yaml #L1-L5 Copy

   1bind-addr: 10.55.0.1:8080
   2auth: password
   3password: changeme
   4cert: true
   5cert-host: raspberrypi.local

5. Your code-server instance should now be accessible from your iPad using Safari or any other browser via https://raspberrypi.local:8080. In case this doesn‘t work, try temporarily disabling the wifi on your iPad. You can enable it again after VSCode was loaded in Safari.

At this stage you should see the VSCode login prompt, asking for the password (changeme) which we configured in the yaml. To be able to use VSCode correctly, we need to do even more configuration on the iPad. Continue reading!

More detailed instructions on installing code-server are available here[arch].

Auto start code-server on system boot

To automatically launch code-server upon every system boot, we need to register it with systemd. Create a new file /lib/systemd/system/code-server.service and paste the following content:

 1[Unit]
 2Description=code-server
 3After=network.target
 4
 5[Service]
 6Type=simple
 7ExecStart=yarn exec code-server
 8Restart=always
 9User=pi
10Group=pi
11
12[Install]
13WantedBy=multi-user.target

Then execute systemctl daemon-reload to activate the new service.

You can check for the status of code-server now by running systemctl status code-server. It should tell you that it is active (running). In case it is not, you may try to restart it by executing systemctl restart code-server.

Add VSCode to your iPad home screen

Accessing VSCode via the iPad‘s Safari browser is not that easy, since VSCode uses Web-Sockets to communicate with the backend, running on your raspberry pi. To allow this communication, the connection needs to be encrypted (HTTPS or TLS). Fortunately code-server provisions a certificate for you. This certificate needs to be trusted on the iPad.

Import certificate on the iPad

1. On the raspberry, search for the file ~/.local/share/code-server/raspberrypi_local.crt and copy it to your iPad.
2. Open raspberrypi_local.crt in the Files App and follow the dialogues to trust the imported certificate.
3. Open the Settings App and navigate to General -> About -> Certificate Trust Settings (on the bottom of the list) and turn on the switch Enable full trust for root certificates for the certificate called raspberrypi.local.

   

Add VSCode progressive web app as app icon to your homescreen

1. Open https://raspberrypi.local:8080 in Safari
2. Click on the share icon
3. Select Add to Home Screen and assign a name

   

   You should now be able to open VSCode by clicking on the icon you just created.

Congratulations!

You’ve just created a fully portable software development setup, that can even be used when no internet connection is available. Let me know what you think in the comments!