Web Development on an iPad

Published on by

Web Development on an iPad image

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.

Eric L. Barnes photo

Eric is the creator of Laravel News and has been covering Laravel since 2012.

Filed in:
Cube

Laravel Newsletter

Join 40k+ other developers and never miss out on new tips, tutorials, and more.

image
Laravel Forge

Easily create and manage your servers and deploy your Laravel applications in seconds.

Visit Laravel Forge
Laravel Forge logo

Laravel Forge

Easily create and manage your servers and deploy your Laravel applications in seconds.

Laravel Forge
Tinkerwell logo

Tinkerwell

The must-have code runner for Laravel developers. Tinker with AI, autocompletion and instant feedback on local and production environments.

Tinkerwell
No Compromises logo

No Compromises

Joel and Aaron, the two seasoned devs from the No Compromises podcast, are now available to hire for your Laravel project. ⬧ Flat rate of $7500/mo. ⬧ No lengthy sales process. ⬧ No contracts. ⬧ 100% money back guarantee.

No Compromises
Kirschbaum logo

Kirschbaum

Providing innovation and stability to ensure your web application succeeds.

Kirschbaum
Shift logo

Shift

Running an old Laravel version? Instant, automated Laravel upgrades and code modernization to keep your applications fresh.

Shift
Bacancy logo

Bacancy

Supercharge your project with a seasoned Laravel developer with 4-6 years of experience for just $2500/month. Get 160 hours of dedicated expertise & a risk-free 15-day trial. Schedule a call now!

Bacancy
LoadForge logo

LoadForge

Easy, affordable load testing and stress tests for websites, APIs and databases.

LoadForge
Paragraph logo

Paragraph

Manage your Laravel app as if it was a CMS – edit any text on any page or in any email without touching Blade or language files.

Paragraph
Lucky Media logo

Lucky Media

Bespoke software solutions built for your business. We ♥ Laravel

Lucky Media
Lunar: Laravel E-Commerce logo

Lunar: Laravel E-Commerce

E-Commerce for Laravel. An open-source package that brings the power of modern headless e-commerce functionality to Laravel.

Lunar: Laravel E-Commerce
DocuWriter.ai logo

DocuWriter.ai

Save hours of manually writing Code Documentation, Comments & DocBlocks, Test suites and Refactoring.

DocuWriter.ai
Rector logo

Rector

Your partner for seamless Laravel upgrades, cutting costs, and accelerating innovation for successful companies

Rector

The latest

View all →
Launch your Startup Fast with LaraFast image

Launch your Startup Fast with LaraFast

Read article
Embed Livewire Components on Any Website image

Embed Livewire Components on Any Website

Read article
Statamic announces next Flat Camp retreat (EU edition) image

Statamic announces next Flat Camp retreat (EU edition)

Read article
Laravel Herd releases v1.5.0 with new services. No more Docker, DBNGIN, or even homebrew! image

Laravel Herd releases v1.5.0 with new services. No more Docker, DBNGIN, or even homebrew!

Read article
Resources for Getting Up To Speed with Laravel 11 image

Resources for Getting Up To Speed with Laravel 11

Read article
Laravel 11 streamlined configuration files image

Laravel 11 streamlined configuration files

Read article