How I use the iPad for Web Development

Obviously the iPad is not the ideal device for development. There’s no support for a native console, no way to install NPM or spin up a local web server, and there’s no official native support for that sort of thing in sight (except kind of? We’ll get to that later!).

HOWEVER, I’ve always been fascinated with trying to do more with less. And I love the form factor and UI of the iPad. So naturally, I’ve always been on the hunt for productivity apps that can help me get as close to possible to iPad development, and I‘ve put together a pretty killer lineup of applications that you can use to build out an entire website straight from a base model iPad if you really want to torture yourself.

Step 1: Local Dev


Believe it or not, you can do some basic local web development with the iPad. There are numerous text editors that provide WebDAV URL setup, which will set up your files on a local server that you can then run right on the browser of your choice. When paired with the Inspect app, this a nearly full-featured editing experience! You can edit your files in your text editor, and access them locally with Inspect in order to debug. WebDAV is just a file server, so it won’t allow you to install any tools to say, host a WordPress site locally, or set up node, but it will allow you to mess with some quick JavaScript snippets or set up a basic website. And honestly, with the growing trend of moving away from frameworks for more basic functionality, you can set up a pretty solid website just using tools like tailwindcss and alpine.js!

Unfortunately, I ran into an issue with Inspect where it would not prompt for the password, and go straight to 401 unauthorized, which means it won’t work with some text editors like Textastic. However, Code Editor by Panic provides this functionality without any login credentials, which will allow you to develop locally and debug with Inspect!

Step 2: Terminus

For more serious development, Terminus is the base of operations for our iPad development setup. Like I mentioned, there’s no way to set up local servers or do any real LOCAL development on the iPad. But, thanks to dirt cheap remote server options like AWS or digitalocean, you can spin up an instance for around $5 a month to SSH into and serve as your development server. Terminus offers that SSH functionality and provides a great interface for saving connection details, a well thought out terminal environment, and even the ability to use SFTP to pull and push files so that you can use local text editors if you don’t want to mess with nano, vim, or any of those terminal based editors.

What’s great: You can run just about anything you could on a computer on this remote instance. That means if you’re writing a react app, you can run your dev server and check your output live through your iPad browser of choice! I’ve even managed to set up Lando and get an entire WordPress dev environment running off one of these base config DO Droplets!

What’s not so great: Apple restricts background App functionality to only about a minute or so, which means if you spin up your dev server and swap over to, say, split view with a text editor and a browser, terminus will time out rather quickly, which will kill any server you had running. I’ve had some success mitigating this via a mosh connection, but it’s still not perfect, and there are no real workarounds that I’m aware of other than keeping terminus in the foreground either in split-view, or as a slide-out app on top of your other one or two open applications.

Step 3: Text Editors

There are a few text editors native to the iPad that have some great features. I personally used coda (code editor by Panic) for a while, but found that it’s syntax highlighting was pretty limited. It is useful however for its no-login WebDAV config in order to use it with Inspect.

Textastic has support for just about any language you can think of, and allows you to pull and push files via SFTP. It also has SSh functionality of its own similar to terminus, but I’ve found terminus is a little bit cleaner and easier to navigate for that.

When I’m making multiple changes to a project from my iPad, Textastic is my method of choice for readability and quick download/upload capabilities.

Step 4: Inspect Browser by Parallax Dynamics, Inc.

For some reason, none of the major web browsers on iPad have any kind of dev tools built in. This is a major bummer, especially if you’re trying to use your iPad as a dedicated development device. However, you’re not out of luck. A company called Parallax Dynamics, Inc. has released Inspect Browser for the iPad which brings basic chrome devtools-like inspect functionality to the iPad browser!

This amazing app comes packed with a console, an inspect tool, as well as storage, network, resources and source tabs that mimic those that you would find in Chrome DevTools.

You can also emulate different screen sizes, so you can test your deign for mobile, tablet and desktop screens right from the iPad.

Summary

I’m not going to pretend the iPad has replaced my MacBook or my desktop as my main dev machine. The bottom line is even with an external keyboard and the newly added mouse support, it’s not the greatest experience. Limited screen real estate and software limitations makes iPad development a clunky experience at best, and down right frustrating at its worst. But if you’re someone who gets a kick out of doing things the hard way, or you’d just like to have a secondary/backup dev machine for quick on-the-go edits, these apps make the iPad a great candidate for that.

Need some personal help?
Drop us a line!