Self-hosted, Universal Development Environment

My experience setting up a self-hosted development environment I can use from anywhere, even offline

My personal MacBook Pro kicked the bucket early this year, and I decided to rethink my computing needs fundamentally. What I found was that you can assemble a very reasonable and flexible development environment using some great open source tools and services.

I can now login to a self-hosted development environment, complete with a terminal and Sublime Text-like editor, on any modern browser on any computer connected to the Internet. I can also pick up the solution and take it with me for offline use, if Internet access is ever a sticking point. Basically, a universal development environment. This small
post is about how I set it up in summer 2017.

The Problem

I don't want to maintain yet another computer for incidental development. I have a MacBook Pro through my work at eSpark and while I have factored out my dotfiles and other customizations a lot, I don't particularly enjoy syncing customizations to my dev tools across more than one computer.

Also, I want to remove all friction and distraction that may get in the way of hacking on side projects. Time and attention is always at a premium, why waste it on unnecessary tasks? I want to immediately return to what I was doing, every time.

Bonus points for lower monthly cost; renting decent compute isn't cheap.

My Solution

This is my development environment:

I basically use Cloud9 and this frees me to work on even a super affordable, high-battery-life Chromebook, or any computer with a browser. But the thing is that I self-host Cloud9 on my own, allowing me a lot more power, space, and affordability. I host it on this:

  • It's a Thinkpad x220t (i7 2620M dual-core, 8GB RAM, 128GB SSD) off of Ebay for around $300. The last laptop with a traditional IBM laptop keyboard. This model (or the non-touch x220) has decent technical specs and build quality, and can be bought for something like $150.

  • I also setup ngrok for securely exposing services running on the Thinkpad to the Internet. For $5/month, you can even reserve a subdomain.

    • ngrok allows me to expose any service running on any port, so it ends being useful as a full fledged live-preview tool too (add in an nginx reverse proxy for consistent authentication, and you're basically secure too).
  • Backups matter too! I don't trust my data to be safe on this system. I use Backblaze's B2 block storage along with restic and a simple cron job setup (using crontab-ui) to take care of regular backups -- this comes out to just a few cents per month for me (a great recommendation from fellow eSparker Ben Feng).

  • In addition, there's TeamViewer for incidental remote-desktop usage.

All in all, I spent $300 up front, 6–10 hours researching and tinkering, $5/month for a stable subdomain with ngrok, and an estimated few cents per month for backups. I guess a buck for power, and everyone needs Internet anyway so that’s a wash.

Some tertiary benefits

  • I can copy/paste my entire setup to another computer (like a new linux box) fairly easily by just syncing the workspace files. A decent usb3 stick is all I need, really. Xubuntu installation on most hardware with UNetbootin is very easy. And ngrok, c9sdk, and TeamViewer work on Windows, Mac, and Linux and TeamViewer is accessible from everything, including ChromeOS.

  • If I need to be offline, I can just pick up my Thinkpad and use the exact same development environment completely locally.

  • I have the ability to assume that there's something that can always be running in the background, regardless of where I physically am. Simple cron jobs and webhooks can allow me to automate my life, or to run long-running computations/experiments without hassle.

  • You can basically make it work with an iPad+keyboard setup too. Not being able to remap keys in iOS is a big pain, though! Chromebooks allow you to do that very easily, by the way.

Downsides compared to offsite VPS

Support, hardware upgrades, power and network stability. And often a ridiculous network speed advantage from the location inside a data center.

You're paying more with VPS, but you're getting a decent deal ignoring the cost. I'd suggest Digital Ocean for overall ease of use.

Downsides compared to local development

No hoops to jump through, less chances of security problems, faster and more varied editors/tools, hardware access for mobile app development and debugging (that's a big one for many).

Why?

I liked Cloud9's offering of a web-based IDE (a GUI editor and a full terminal), but they didn't really offer what I needed in their hosted plan. I wanted at least 40gb of SSD, and 2-3GB of RAM at a minimum, and I also wanted a single private workspace with a bunch of git repositories/folders (much less cognitive overhead for me, this is how I've always managed my dev files and I like to switch things up often).

Cloud9's disk space for a given workspace caps out at 10GB in their $20/month plan. They have a hosted SSH Workspace solution where I can point their hosted IDE at my own server -- but then I have to rent and setup a linux box. On Digital Ocean, for e.g., that's another $20/month. Not to mention having to set that up myself -- just more work, and yet another thing to maintain.

But Cloud9 has generously open sourced their technology to allow plugin-creation and deeper customization. It's basically a node.js app, you can check it out here. For my own personal hobbyist use, this is perfect.

Also, I tried doing purely remote desktop and couldn't get over the lag between typing and characters appearing on the screen.

Try it out

If this appeals to you, here's an easy way to try it out:

  • Grab either a disused computer or your existing computer
  • Install Cloud9 Core on it
  • Run your own Cloud9 instance, with the workspace directory set to a desired directory (could even point it at your home directory)
    • node server.js -p 8080 -a user:password -w $HOME
    • And then, go to http://localhost:8080 and login (note that the login details will be what you specify up above)

And if you want to go further and make it accessible from any browser:

  • Install ngrok -- just download the binary they provide for your operating system
  • Run ngrok.
    • ./ngrok http 8080
    • It will tell you an https public URL, open that one in a browser anywhere and login.
  • Optionally install and setup and use TeamViewer to toggle/tweak things if needed remotely.

At this point, you're already done. There's just some cleanup to do. You can setup ngrok to be initiated on startup, and also for Cloud9 to be initiated on startup -- in Xubuntu, in Session and Startup, you can specify any command you want run at startup. I'd also highly recommend regular backups!