DEV Community

George Bougakov
George Bougakov

Posted on

Coding on the iPad, iPadOS 13.4 edition

Not that long ago Apple introduced trackpad and mouse support in iPadOS 13.4, so I decided to connect my Magic Mouse to my iPad Pro 11" (2018) and even though some apps didn't include real trackpad support yet, it worked like a charm! Even the hover and drag events worked in Safari!.

I decided to try running VS Code on the iPad, and with a mouse it worked almost flawlessly!

Quite a few people asked me how I did that and the answer is code-server.

GitHub logo cdr / code-server

VS Code in the browser

code-server

"GitHub Discussions" "Join us on Slack" Twitter Follow codecov See v3.11.0 docs

Run VS Code on any machine anywhere and access it in the browser.

Screenshot

Highlights

  • Code on any device with a consistent development environment
  • Use cloud servers to speed up tests, compilations, downloads, and more
  • Preserve battery life when you're on the go; all intensive tasks run on your server

Requirements

See requirements for minimum specs, as well as instructions on how to set up a Google VM on which you can install code-server.

TL;DR: Linux machine with WebSockets enabled, 1 GB RAM, and 2 CPUs

Getting started

There are three ways to get started:

  1. Using the install script, which automates most of the process. The script uses the system package manager if possible.
  2. Manually installing code-server
  3. Using our one-click buttons and guides to deploy code-server to a cloud provider

If you use the install script, you can preview what occurs during the install process:

curl -fsSL https://code-server.dev/install.sh 
Enter fullscreen mode Exit fullscreen mode

It works by running the language server (debugger and IntelliSense), extensions and the file system part in the cloud on a VPS, and rendering the UI in your browser. It is able to do that because VS Code is actually written using web technologies and packaged with Electron.

Let's set it up

Step one. Get a server

It can be a Mac Mini in your attic, a rented server from AWS or anything that runs Linux or macOS, some people have even tried using a Raspberry Pi with an iPad and it works like a charm.

Step two. Install code-server

Download the latest prebuilt binary from the GitHub Releases to your server. Untar/unzip it somewhere.

Step three. Run code-server

cd into the code-server directory. There will be an executable file called code-server

Variant A. If you don't want to set up SSH forwarding (faster, more convenient, requires a registered domain, less secure)

First of all, get an SSL certificate
You can get one for free from Let's Encrypt using acme.sh. Their README is pretty easy to follow, so I won't get into much detail.

GitHub logo acmesh-official / acme.sh

A pure Unix shell script implementing ACME client protocol

Then, you can run code-server with

PASSWORD="correct-horse-battery-staple" ./code-server 
    --host 0.0.0.0 --port [PORT] 
    --cert ~/.acme.sh/[DOMAIN]/[DOMAIN].cer 
    --cert-key ~/.acme.sh/[DOMAIN]/[DOMAIN].key
Enter fullscreen mode Exit fullscreen mode

Et voila! You can now open your browser, enter the password you set in the environment variable and code

Variant B. Set up SSH forwarding (requires an SSH client, but is easier and more secure)

In your SSH client, run

ssh -L [PORT]:localhost:[PORT] root@[YOUR SERVER]
Enter fullscreen mode Exit fullscreen mode

An SSH session will open, where you can start code-server with

./code-server 
    --host 127.0.0.1 --port [PORT]
    --auth none
Enter fullscreen mode Exit fullscreen mode

Now, open http://localhost:[PORT] in your browser and code!

But how well does it work on the iPad?

If you have a keyboard and a mouse, the experience is flawless... almost. Here are a few quirks:

  1. Custom fonts installed via iFont don’t work in Safari (fixed by loading them via CSS)
  2. Scrolling wheel doesn’t work in editor (arrow keys and scrollbar to the rescue)
  3. Lack of escape key (ctrl+[ works, or you can remap ESC and Caps Lock in iPadOS Settings)

Do you actually use it?

Yeah! I am a backend developer by day, and it's great coding on an iPad. Frontenders will disagree because iPad Safari lacks devtools, but let's hope that will change in iPadOS 14 :)

This is my first article on dev.to and I'd love it if you share your feedback in the comments! Also, feel free to ask any questions :)

Discussion (4)

Collapse
pbnj profile image
Peter Benjamin • Edited on

Great post. Thank you for posting it.

Another backend developer on an iPad here 👋 !

Since I am very comfortable in the terminal, I remotely connect to my development environments over SSH and I am good to go.

I have been a user of Blink.sh app (~$20 USD) and it has been an indispensable tool for me. It's one of the best SSH clients on iPhone and iPad that I have used. They also recently introduced announced Blink Build, customizable & ephemeral cloud-based development environments (like GitHub Codespaces).

Blink Build + this code-server setup = your own personal Codespaces 🤩 😎

Collapse
joshpuetz profile image
Josh Puetz

This is awesome, thanks for sharing! I can't wait to try this out :)

Collapse
fyodorio profile image
Fyodor

That's great 👍 I guess things like codesandbox should work this way as well

Collapse
rokkovach profile image
Rok Kovač 🈴

While not free Inspect is a solid app to get dev-tools on iOS: apps.apple.com/app/apple-store/id1...

Feels like this brings it one step closer to make iOS only environment viable ...