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.

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
Laravel Idea for PhpStorm logo

Laravel Idea for PhpStorm

Ultimate PhpStorm plugin for Laravel developers, delivering lightning-fast code completion, intelligent navigation, and powerful generation tools to supercharge productivity.

Laravel Idea for PhpStorm
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
Lucky Media logo

Lucky Media

Get Lucky Now - the ideal choice for Laravel Development, with over a decade of experience!

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
LaraJobs logo

LaraJobs

The official Laravel job board

LaraJobs
SaaSykit: Laravel SaaS Starter Kit logo

SaaSykit: Laravel SaaS Starter Kit

SaaSykit is a Multi-tenant Laravel SaaS Starter Kit that comes with all features required to run a modern SaaS. Payments, Beautiful Checkout, Admin Panel, User dashboard, Auth, Ready Components, Stats, Blog, Docs and more.

SaaSykit: Laravel SaaS Starter Kit
Supercharge Your SaaS Development with FilamentFlow: The Ultimate Laravel Filament Boilerplate logo

Supercharge Your SaaS Development with FilamentFlow: The Ultimate Laravel Filament Boilerplate

Build your SaaS application in hours. Out-of-the-box multi-tenancy and seamless Stripe integration. Supports subscriptions and one-time purchases, allowing you to focus on building and creating without repetitive setup tasks.

Supercharge Your SaaS Development with FilamentFlow: The Ultimate Laravel Filament Boilerplate
JetShip - Laravel Starter Kit logo

JetShip - Laravel Starter Kit

A Laravel SaaS Boilerplate and a starter kit built on the TALL stack. It includes authentication, payments, admin panels, and more. Launch scalable apps fast with clean code, seamless deployment, and custom branding.

JetShip - Laravel Starter Kit
Rector logo

Rector

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

Rector
MongoDB logo

MongoDB

Enhance your PHP applications with the powerful integration of MongoDB and Laravel, empowering developers to build applications with ease and efficiency. Support transactional, search, analytics and mobile use cases while using the familiar Eloquent APIs. Discover how MongoDB's flexible, modern database can transform your Laravel applications.

MongoDB

The latest

View all →
Streamlining Route Parameters in Laravel Using URL Defaults image

Streamlining Route Parameters in Laravel Using URL Defaults

Read article
Flexible Docker Images with PHP INI Environment Variables image

Flexible Docker Images with PHP INI Environment Variables

Read article
Dynamic Form Validation in Laravel with prohibited_if image

Dynamic Form Validation in Laravel with prohibited_if

Read article
Add Approvals to Your Laravel Application image

Add Approvals to Your Laravel Application

Read article
Enhancing Data Processing with Laravel's transform() Method image

Enhancing Data Processing with Laravel's transform() Method

Read article
Get Xdebug Working With Docker and PHP 8.4 in One Minute image

Get Xdebug Working With Docker and PHP 8.4 in One Minute

Read article