A terrible, horrible, no good, very bad thing happened to me this month: the Surface Pro that was my exclusive personal and work computer died. Even though I found an inexpensive replacement to order, I couldn't imagine not coding for about a week. I was totally freaking out.
After a few unsatisfying days of merely reading about web development topics, I set to work on figuring out how I could get some real work done, armed only with my iPhone.
Trial and Error
Not wanting to hunt down a new solution if it was unnecessary, I first turned to tools I've used before:
Codepen
Codepen wasn't terrible in a pinch. However, the layout and on-screen keyboard really wasn't optimized for coding on a phone. Making minor changes took a lot of time, and it was easy to end up with really buggy code.
Cloud9 IDE
Cloud9 had the same problems but with an already more cluttered interface. It explicitly doesn't support mobile browsers and it has been made clear multiple times that making Cloud9 mobile-friendly or developing a native mobile app for it is not anywhere on the roadmap.
CodeAnywhere
When exploring the Cloud9 issue, I saw mention of an alternative cross-platform cloud IDE called CodeAnywhere. However, the iOS app appeared to have not been updated since 2014 and after four unsuccessful attempts to so much as create an account and login, I figured there had to be something better.
What Finally Worked
After some frustrating experiences, I came across tools and techniques that worked beyond my expectations, allowing me to code productively with just a phone and that can allow you to do it, too.
Editor: Buffer Editor
Buffer Editor was a hidden gem in the App Store. It didn't have a presence from advertising or word of mouth or even enough reviews to warrant a rating. It would be easy to underestimate Buffer.
When actually downloaded, though, it's clear that Buffer Editor is a real, powerful editor truly optimized for a mobile experience. Features that won me over included:
- An extended keyboard that makes typing quick (for one-handed) and intentional.
- A well-designed built in terminal.
- Full-screen editing, a necessity on such a small screen.
- Syntax highlighting and autocomplete for 40+ languages and technologies.
- The ability to connect via SSH, FTP, SFTP, GitHub, Dropbox and iCloud.
- Sending files by email.
It also included useful features that I didn't utilize such as Vim support and support for bluetooth keyboards.
While it isn't free, the 4.99 USD price I got it for was well worth it, especially compared to the popular Coda at almost 25 USD.
Server: Digital Ocean
Being confined to a phone gave me the push I needed to start building more websites and applications directly in a VPS solution like Digital Ocean rather than starting out solely on a local machine. Using a Virtual Private Server (Digital Ocean calls them droplets) allows setting up a development environment and managing files/servers without needing a local environment to work with, since it's on another computer in the cloud. Another benefit of VPS is that from the start, a project isn't tied down to one local machine, even if it hasn't been checked in to version control yet.
Digital Ocean has proven to be easy to use (and inexpensive), and there is a wealth of documentation and guides for folks new to running servers.
Accessing the droplet remotely was easy in Buffer Editor, simply involving adding a new SSH connection and filling out the relevant settings with information from the droplet.
Browser Access: Local Server Binding
The wonderful and problematic thing about web development is, of course, the primary thing you need is a browser. Using a VPS to develop, you have access to a terminal console, but not a Graphical User Interface or a traditional web browser.
When developing a web app, you often need to be able to start a local server and access localhost in the web browser, since that's where the development server displays the app. Unfortunately localhost means this computer, and so it's inaccessible outside of the VPS hosting the app files.
The workaround here involved learning more about servers and requests:
When starting a server, it sends what is called a bind request to indicate that it is ready to receive requests associated with an IP address. Local servers typically bind to 127.0.0.1 because that IP address is used to loop back to the requesting computer; each computer can only request 127.0.0.1 from itself, which is usually convenient for developing.
That's clearly not an option. You need to have the server bind request indicate its publicly accessible IP address instead so that it's accessible from a browser outside of that computer. This IP address is easily obtained from Digital Ocean, and the workaround involved adding a --binding flag like this, for starting a Rails server:
rails s --binding=XX.XX.XX.XX
Now, instead of typing localhost:3000 into the browser's address bar to view the app, you would type the publicly accessible IP address, like XX.XX.XX.XX:3000. As long as the local server is running with the binding flag, the app will be accessible remotely from the server's IP address.
Buffer Editor is especially convenient by keeping the server running after you back out of the terminal (so you can open it again and continue to develop). This can be confusing at first, but to stop the server, lock and unlock your phone.
Get Back to Coding Productivity
From here, you can utilize git like usual, get to work and debug your code wherever you are and regardless of WiFi/Ethernet availability. In fact, the day before my new computer arrived, I was able to make 6 commits and push them to GitHub, all from my iPhone.
While my day to day coding will be on a traditional desktop or laptop when it's available (since two hands are faster than one), I continue to utilize these tools to work on my projects when I can't bring my laptop somewhere or when mobile internet is all I'll have access to, such as riding in a car.
I'm actually thankful for the experience of losing access to the computer, because it forced me to find a solution that now allows me to code virtually anywhere.
Top comments (19)
Whenever I'm in a situation where I only have my iPhone, I use Termius to SSH to my servers, and Working Copy to work on repositories. These are easily my two favorite iPhone apps.
Awesome app recommendations, Nathan! I'll definitely be integrating Working Copy into future computer-less dev work.
This looks like fun to play with for a local environment on my phone - it even supports SSH which is nice! To make emergency hotfixes on servers on my Android phone, I've been using JuiceSSH, which is also really helpful.
Termux is indeed great! Combine it with Hacker's Keyboard and you already have a terrific setup. If you can also afford to root the device you're pretty much ready to rock, with a "lite" but usable Linux system.
If you want a code editor for Android, I've found QuickEdit a nice little one.
Chazona, I was just thinking about this to get myself setup with a mobile dev environment on my iPhone now that I've switched over to a Jekyll site. This is timely for me and very helpful!
@nathan , thanks for the tip on Working Copy; this is going straight into my workflow.
I'm sorry for your loss, but on the sunny side, it led to a great article! :) Was there anything in your experience that you felt was unnecessarily complicated? And did you stumble upon clever or ingenious solutions?
On my iPad (with keyboard), I use Working Copy and Textastic since they play nicely with each other. Or easy mode, use Screens to remote into my Mac at home.
On Android, I use ForkHub to at least track my repos, but I haven't ever tried actually writing code on a phone.
No cloud IDE or editor app beats ssh and vim configured to execute in :terminal on a mapping. You will need more features eventually so the only way to code uninterrupted is with a ssh client and terminal editor.
I'm so happy I'm not the only one who's done this. A while back I set up a server and simple site while my wife was shopping at the mall. christopherjmcclellan.wordpress.co...
Awesome article, thanks for sharing! Likewise, I'm glad to see that others have done this, too. I don't think I'd have been as productive if I had to use separate apps for the terminal client, file transfer, and the code editor, but I'm impressed that you got them set up and coordinated so quickly. It's so cool to be able to whip the phone out when waiting somewhere and get legit work done.
Also I love that you kept the idea of "the simplest website" when you went back and styled it. It looks clean and deliberate. (I'll have to remember that whitesmoke color for inverse color schemes - easier on the eyes than white on black. 👍🏼)
So far I found the absolute best SSH/Mosh client on iOS is Blink. I do so much coding in that thing (via my linux box at home with a port-forward through my NAT router). I'll have to check out Buffer's SSH implementation.
I bought a keyboard for my tablet and for minor code changes I just had checked out my projects on an AWS machine and coded on it with VIM. It's quite neat, but I also found that it's nice not to have to code anytime :)