Web Development on an iPad

The idea of working entirely from an iPad has always appealed to me. The portability, the battery life, and of course the touch screen makes it an excellent device.

The downside is that everything is sandboxed. You can only run programs from the App Store which makes doing crazy things like installing a development server on the machine unattainable, but there are other ways to work around the limitation with existing apps and a little ingenuity.

Last month I had an unfortunate biking accident and broke the bones in the back my left hand. After surgery, they had my middle, ring, and pinkie fingers fused so everything could heal properly, but this meant I couldn’t use that hand for typing. I had to embrace typing one-handed, and I found using an iPad to be the easiest because of the autocomplete and the autocorrect. I was much faster with it than on a MacBook, and that pushed me to want to use it more.

With my job, I was able to do all my work except development with the iPad, and I would switch back and forth. Using a traditional computer with my code editor, then the iPad for everything else. This flow quickly became annoying, and I started exploring ways of doing everything on the iPad.

#Screen Sharing

My first idea was to just screen share back to my Mac. Using a screen share would allow me to use all the tools I’m comfortable with and still use the iPad. That idea worked better in theory rather than practice. I couldn’t get the screen resolutions to match up, so everything was tiny on the screen, and had 2 inches of letterboxing.

With this not being suitable I went back to looking for other ways of solving this and found that some people reported good results using a development server and then a text editor like Vim.

#Laravel Forge

Once I decided to go with a dev server I had to figure out how I wanted to set it up. Not being a server admin and honestly not being extremely comfortable on servers I decided to follow the path of least resistance as a Laravel Forge customer that meant logging into my account and spinning up a new box. Then I needed to add all the sites. I used a generic domain name and then set up each site as a subdomain.

Setting up each dev site through Forge works, but if you work on many projects, it’s probably not ideal. You would be better off using something fancy like Nginx wildcard routing.

With the server up and running it was time to figure out how to get into from the iPad.

#SSH’ing

The App Store had a few different SSH apps, and all looked like they would be sufficient, but I didn’t have time to test them all. Based on the reviews and the app screenshots I decided to try Termius first and so far it has met my needs.

From within Termius, you can create an SSH key to add to the server for passwordless login; it supports SFTP for moving files up to the server and a lot more features that I’ve yet to need.

Honestly, using Forge and Termius has been great. It’s simple to set up and easy to get started with, especially if you’ve been running Digital Ocean or Linode servers in the past.

Since the server runs on the web, I set up two aliases to make it easy to take it online or off.

alias do_allow80="sudo ufw allow 80"
alias do_block80="sudo ufw deny 80"

These two commands to turn port 80 on or off, of course, you might want to get fancier and block all traffic except your IP and include port 443 for SSL.

Once the server is set up, and you can SSH in it’s time for the fun part, learning VIM.

#VIM

I didn’t want to use Vim, but every iOS editor app was severely lacking in features that I use. I could either adapt my workflow to them or use a tool that I can customize to my needs and match my existing setup.

I’ve never been a big Vim user. I knew the basics on how to use the hjkl keys to move around, how to save, how to exit, but that’s about it. So I’ve spent the majority of time learning the ropes, and I’m still not very fast using it. Vim is a learning process.

What is excellent about the editor and something I’ve never appreciated until now is how many useful plugins the ecosystem has. I was able to duplicate most of the things I use in Sublime or Code with only a few plugins. I can use ctrl+p to fuzzy find files, ctrl+e to open recent files, ctrl+l to open a sidebar of the directory structure, and even goto definition with the help of AG.

To set up the editor I first watched the Laracasts Vim series and then found a plugin named FZF that has been an enormous help for navigation. With it installed I can do things like:

• control+p to fuzzy open files :GFiles
• control+t to find methods within a file :BTags
• control+e to open recent files :History

Plus many other things

Check out this post by Jesse Leite for more FZF tips.

I have my full .vimrc available on Github if you’d like to see my exact setup.

Once I get more comfortable with the basic tasks I have a feeling Vim could be something I could learn to love.

#Database

For database access, I first found a tool called MyCLI for the terminal, and it’s fantastic with autocomplete, and syntax highlighting. It works great but I still prefer a GUI, and the only app I could get to work was Navicat on iOS. The other apps I tried didn’t support connecting over SSH with a key.

I find both of these options lacking compared to Sequel Pro, but they are usable enough.

#Frontend Coding

At this time, this is the most significant limitation. I’ve not found a workaround, but I’ve also not had to do much JavaScript or CSS work. I’ve had some people recommend services like Browsershots to get a full browser, or you could use screen sharing to any Mac. I feel like this will be a breaking point for many people since so much of web development is now on the frontend.

#Keyboard

You can work using nothing but the on-screen keyboard or with Apple’s official Smart Keyboard but neither come with an escape key. For Vim I remapped around this, but I found not having it annoying, and I found a tiny $40 mechanical keyboard that I’ve been using that works great. It includes the escape key and is about the same width as the 11″ iPad. I wrote up a full review on the keyboard on my site.

#Conclusion

I know everybody works on different things and has different preferences so this setup isn’t for everyone. Before this iPad, I was working on a 12″ MacBook so I’m used to small screens and I enjoy running apps at full screen. So making the switch was pretty easy for me. The only thing I’m missing is a console and web inspector.

If you are looking for a super portable device with great battery life give this setup a try. I know I’m looking forward to warm weather and working outside.