Web Development on iPad Pro: Beginner’s Guide

And the result? It failed miserably. The hardware was excellent, but iOS was just not enough. Fortunately, even Apple realized they needed a separate operating system for iPad and released iPadOS.

And here is how my journey to replace my Mac with an iPad Pro for web development work has been going:

Web development on iPad Pro

Before we dive into how to do web development on iPad Pro, let’s first look at the work we are hoping to be able to get done using this device.

We are looking for a solution that allows us to handle WordPress development primarily. This includes:

• Working with PHP, JavaScript & React.
• Handling existing client sites, mostly PHP changes.
• Building themes and plugins that include Git and managing build process.

As this suggests, solutions like CodeSandbox would not be enough for what we want to accomplish. If you only want to create JavaScript projects, then CodeSandbox can be a wonderful solution. But in this article, we are looking for a solution that can handle more than just isolated JavaScript.

Now that we know what we want to accomplish, let’s talk about how we can do it.

Getting a web server setup

It would be great to have the option to run a Linux server on iPad, but we know this is not how Apple does things.

While we can use Git, iCloud and other services to store files to edit, having a server is the best option to run more advanced tools, like linting, build process, and such.

You can always use some editor and keep your files locally, but it will be just coding without running the code.

If you already have web hosting, then you can skip to the next step. If you do not have web hosting yet, then we got you covered.

And if you are someone like me who likes to be able to spin up a server for some work quickly, then you can use something like DigitalOcean or one of its cheaper alternatives.

Accessing the server

Now that we have a server, we need a way to access it. SSH will let us do exactly that. Not just running commands to manage the server, later we will also look at solutions for editing code requiring SSH access.

Here are some of the applications that work smoothly for this purpose:

Termius

Termius is the easiest and most famous SSH application out there in the App Store. It is easy to use and has a very friendly UI. You can store multiple SSH credentials there and access them from their dashboard with just a single click.

It also supports MOSH, which is an SSH alternative made specifically for mobile devices.

They also have a premium version that gives you access to more tools, such as sFTP.

a-Shell Mini & iSH Shell

If you do not want a fancy UI and love the terminal, a-Shell mini is what you are looking for. It is an interactive shell that you can use to SSH into your server.

And if you want something even more light (just 5 MB), you can use iSH Shell. It is Alpine Linux running on your iPad Pro. By default, it does not come with SSH, but it can be installed by running:

apk add openssh

Once you have that, you can connect to your server and do your work.

Choosing a code editor

Now that we have a server and can connect to it, we come to the more important part of the puzzle. We need an editor to code. We must have a good editor that gives us all the essential features of a good IDE.

This is the part I’ve spent months researching – to find an editor that doesn’t feel like a compromise but is as real as coding on a desktop computer.

Here are three code editors that do the work:

Koder

Koder allows you to access your files from FTP, Dropbox, and Files app. It also comes with an SSH terminal that you can use to access your server.

While it is not as advanced as, let’s say, Visual Studio Code (more on it later), it still allows you to code fast without much distraction. And it is free!

After trying few app-based code editors on iPad, the Koder app is still my favorite to use when I have to fix something quickly on a website.

So, if all you want to do is sometimes make minor changes on your website, Koder is the perfect solution.

Visual Studio Code

This is where things get exciting. Visual Studio Code, aka VSCode, is the code editor that all the cool kids are using these days.

If you are a developer, there is a high chance that you’re currently using VSCode or have used it in the past.

One good solution that I found earlier was Code App on the App Store. It is an excellent port of VSCode for iPad, but it lacks FTP, SSH, and other options that we need to edit files on the server.

So yeah, we need something that actually brings all the functionality of VSCode to iPad Pro.

Let me introduce you to Code Server, VSCode running in the browser.

Code Server does the brilliant task of running VSCode on any server. And it is also free to run. And if you are running a cloud hosting platform, they have a guide on how to install Code Server easily.

Once installed on the server, the editor can be opened by simply visiting a URL from the Safari browser on your iPad Pro.

Unlike the previously discussed Code App, Code Server brings the full VSCode experience to your server. You can do everything VSCode’s desktop app does.

You can also install VSCode extensions and themes to make it look just like your desktop VSCode instance.

The only downside is that if you work with various servers, it can be a time-consuming task to set up Code Server every single time.

There you have it, and we have VSCode running on an iPad Pro. It can’t get better than this. Can it?

If you want a good IDE with a friendly UI, Code Server will be the best choice. But if you are comfortable with the terminal, there is something even better.

Vim

Vim – first released in 1991 – that comes out of the box in most Linux distros can be the easiest way to use your iPad Pro for web development.

It can be very intimidating if you are not familiar with it. But once you get used to Vim, it can be as powerful as any full-fledged IDE.

Take it from me, after using VSCode for seven years, I switched to using Vim full time for all my development work.

By default, Vim looks pretty simple. It’s just a white screen with some text over it:

But that is the best part about Vim. You can customize it in so many ways that it will look nothing like the default configuration.

For starters, you can use this library to bring some powerful tools to your Vim installation, like a file explorer, faster search tools, and code auto-completion.

On top of that, more Vim plugins are available to customize every inch of the editor. The more you use it, the more you start to customize it to fit your needs. Look at my .vimrc file, for example.

It will take some time to get comfortable with Vim, but it is by far the best solution for web development on iPad Pro.

If you are familiar with Vim, you might soon realize the iPad Pro’s lack of an Escape key.

An almost-full-fledged web inspector

The lack of a proper browser, like Safari or Chrome, with developer tools has been the biggest roadblock in using iPad Pro for web development.

Safari got a big update with the introduction of iPadOS, but it still lacks the developer tools that we require for making websites.

But one thing that they did great with iPadOS 15 is they allowed browser extensions on Safari. This paved the way for one developer to make the Web Inspector extension for Safari.

This browser extension almost solved the lack of desktop-like dev tools. As expected, it allows us to view/edit the page’s HTML code, but it cannot edit the CSS.

It also has a browser console where one can run their code, but few things also do not work there, like var/const variables.

But all in all, it is a step-up from previous versions where no web developer tools were available on Safari, and one had to download something like Inspector Browser to the basic options.

And who knows, maybe in the future, this extension will improve to offer more options, or some other extension will come up with more advanced dev tools.

As an Apple user, one can only hope that Apple realizes the potential of the iPad Pro and will bring in more advanced tools that turn the device into a laptop alternative.

Have you tried doing any serious web development on iPad Pro? Let us know in the comments below.

Layout and presentation by Chris Fitzgerald and Karol K.