# How to use Visual Studio Code on your iPad > Using an iPad as a replacement for a computer is easy for non-development tasks — but what about coding? Here's a fully portable VSCode setup that works even offline. - URL: https://blog.goroot.de/post/How-to-use-Visual-Studio-Code-on-your-iPad/ - First published: 2021-07-29 - Lastmod: 2021-07-29 - 1344 words, 7 min - Tags: vscode, development, raspberry-pi - Autor: Michael Kolb — goroot (https://blog.goroot.de/) --- 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](https://code.visualstudio.com) 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)](https://www.raspberrypi.org/products/raspberry-pi-4-model-b/): 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/usbnetwork`and add the following content: ```ini {file="/etc/dnsmasq.d/usbnetwork"} interface=usb0 dhcp-range=10.55.0.2,10.55.0.6,255.255.255.248,1h dhcp-option=3 leasefile-ro ``` 8. Create `/etc/network/interfaces.d/usb0` and add the following content: ```ini {file="/etc/network/interfaces.d/usb0"} auto usb0 allow-hotplug usb0 iface usb0 inet static address 10.55.0.1 netmask 255.255.255.248 ``` 9. Create `/root/usb.sh` and add [Ben Hardill’s amazing code](https://www.hardill.me.uk/wordpress/2019/11/02/pi4-usb-c-gadget/) for configuring the hardware characteristics: ```bash {file="/root/usb.sh"} #!/bin/bash cd /sys/kernel/config/usb_gadget/ mkdir -p pi4 cd pi4 echo 0x1d6b > idVendor # Linux Foundation echo 0x0104 > idProduct # Multifunction Composite Gadget echo 0x0100 > bcdDevice # v1.0.0 echo 0x0200 > bcdUSB # USB2 echo 0xEF > bDeviceClass echo 0x02 > bDeviceSubClass echo 0x01 > bDeviceProtocol mkdir -p strings/0x409 echo "fedcba9876543211" > strings/0x409/serialnumber echo "Ben Hardill" > strings/0x409/manufacturer echo "PI4 USB Device" > strings/0x409/product mkdir -p configs/c.1/strings/0x409 echo "Config 1: ECM network" > configs/c.1/strings/0x409/configuration echo 250 > configs/c.1/MaxPower # Add functions here # see gadget configurations below # End functions mkdir -p functions/ecm.usb0 HOST="00:dc:c8:f7:75:14" # "HostPC" SELF="00:dd:dc:eb:6d:a1" # "BadUSB" echo $HOST > functions/ecm.usb0/host_addr echo $SELF > functions/ecm.usb0/dev_addr ln -s functions/ecm.usb0 configs/c.1/ udevadm settle -t 5 || : ls /sys/class/udc > UDC ifup usb0 service 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: ![iPad settings network interface](settings-network-interface.png) ## Setting up VSCode I’ll assume that you have [raspbian](https://www.raspbian.org) installed on your pi. If not, [do follow the instructions here](https://www.raspberrypi.org/software/) to get there. For executing VSCode on the Pi and make it accessible from the iPad, we will use [code-server](https://github.com/cdr/code-server). 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: ```yaml {file="~/.config/code-server/config.yaml"} bind-addr: 10.55.0.1:8080 auth: password password: changeme cert: true cert-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](https://coder.com/docs/code-server/v3.11.0/install#yarn-npm)._ ## 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: ```ini {file="/lib/systemd/system/code-server.service"} [Unit] Description=code-server After=network.target [Service] Type=simple ExecStart=yarn exec code-server Restart=always User=pi Group=pi [Install] WantedBy=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`. ![certificate trust settings](./certificate-trust-settings.jpg) **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 ![add to homescreen](./add-to-homescreen.png) 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!