VSCode on iPad Pro with code-server self-hosted

Last year I posted about using VSCode on iPad Pro you can check it out here: VSCode on iPad Pro

Today I want to show you a new way to self-host VSCode and use it anywhere which can open a browser.

Look at this VSCode on an iPhone:

How to use code-server on an iPad Pro

Code-server is a web-based version of Visual Studio Code that allows you to code from anywhere, using any device. It runs on a remote server and lets you access your code and files through a browser. In this article, we will show you how to use code-server on an iPad Pro, using coder.com as a reference.

What you need

To use code-server on an iPad Pro, you will need the following:

• An iPad Pro with iOS 14 or later
• A code-server account or a self-hosted server
• A domain name and a SSL certificate (optional but recommended)
• A keyboard and a mouse (optional but recommended)

Installing the code-server progressive web app (PWA)

The easiest way to use code-server on an iPad Pro is to install the code-server progressive web app (PWA). A PWA is a web app that behaves like a native app, with features such as offline access, full-screen mode, and keyboard shortcuts. To install the code-server PWA, follow these steps¹:

1. Open code-server in Safari.
2. Click the Share icon.
3. Click Add to Home Screen.
4. You can now open code-server from the Home screen, and when you do, you'll be using the PWA.

Accessing code-server using Servediter

If you don't have a domain name or a SSL certificate, or you are unable to get them working, you can use Servediter for code-server. Servediter is an app that allows you to access code-server from your iPad without any configuration. To use Servediter, follow these steps:

1. Download the app from the App Store.
2. When prompted, provide your server information.
3. If you are running a local server or a Raspberry Pi connected via USB-C, you will input your settings into Self Hosted Server.

Using code-server on an iPad Pro

Once you can access code-server on your iPad Pro, you can start coding as usual. You can use all the features of VS Code, such as extensions, themes, debugging, terminal, etc. You can also use multi-task mode to make code changes and see the browser at the same time. This prevents the iOS background from dropping an app's state if you are switching between code-server and browser (with both in full-screen).

You may also want to use a keyboard and a mouse for a better coding experience. You can connect them via Bluetooth or USB-C. You can also customize your keybindings in VS Code to suit your preferences.

Conclusion

Code-server is a great tool for coding on an iPad Pro. It gives you the power and flexibility of VS Code in a web browser. You can install the code-server PWA for a native-like experience, or use Servediter for a hassle-free access. You can also enhance your productivity with a keyboard and a mouse, and use multi-task mode to see your code and browser side by side with Stage Manager.

Installation

There are plenty of methods on how to install code-server on your self-hosted machine. I installed it on Kubernetes with the Helm chart explained here