How to Set Yourself Up to Develop Using JavaScript on iPad

Only losers use words like “impossible.” Not only is it possible to program on the iPad with JavaScript, I’m going to show you how to do it.

As far as long reads go, this will be a really long one. I recommend scanning over the article to get a good idea of what you can expect through this whole process, and then go back over it, diving off to the linked articles when appropriate to get setup. This is the trail map with details scribbled in. This is the map you use to make sure you get to the peak. Once you get there, plant your flag, scream, do pushups, I don’t give a fuck. I’m just here to get you there.

I’m using an 11" iPad Pro, but was able to run all of this on the iPad Air 2. So, no promises on compatibility with other iPad models, but you can for sure do this on iPad Air 2 or later, and sure as shit you can do it on the iPad Pro.

Okay, right off the bat, this is not a “free” solution. Some of the tools I’ll list here will cost money. Thankfully, they don’t cost much, and some of it is optional. Just be prepared to spend a couple bucks a month if you’re committed to making this work. Also, there’s lots of moving parts. I’ve done what I can to streamline my workflow, but until they come out with an app that does it all, AND looks pretty — I refuse to use and support shitty-looking software — there are a few different tools to make this work:

1. A cloud server to run your code. This is where your production and development environments will live and where you’ll run all your tests. I use DigitalOcean — they offer droplets starting at $5/month. If you choose to get set up with them, please use my referral code: https://m.do.co/c/691ebbc96f22. You’ll get $100 credit good for 60 days, and I get $25 if you stick with them afterward. I use a droplet with an attached volume and have backups enabled. My cost here: $11/mo.
2. A domain. This will cost you anywhere from, like, eight bucks to 80 bucks a year and up depending on wtf you wanna use and who you register it with. I registered my domain through Namecheap.
3. A terminal app. You’re going to need some way to connect to your droplet remotely, vis-a-vis your iPad. This is your command line interface (CLI). I personally use the Termius app. Termius (app store) is functional, feature-rich, and pretty. You can use any terminal app you like; I just happen to use and enjoy this one, and I highly recommend it. It’s free to use, but the premium access makes a massive difference in functionality. The snippets feature alone will save you buckets of seconds. Seconds turn into minutes; that shit adds up. For me, it’s worth it to pay for premium. My cost here: $9.99/mo.
4. A code editor. There are plenty out there, but we’re talking JavaScript here. Forget the big names, go with the player who shows up with the console. And that’s play.js. Play.js (app store) is about as close to an integrated development environment (IDE) as you’re gonna get. There are some projects for which you’ll need to do your testing and debugging on the server, but for everything else, you can do most of what you need here. This is where you’re going write all of your code. As an added bonus, it fully supports git. I’ll cover git further down. My cost: $4.99, one time.
5. Optional, but useful: SFTP, a file manager that connects your server to your Files app. The premium version of Termius allows this, but it’s read-only, so it’s pretty much useless. I use Secure Shellfish by Anders Borum. Secure Shellfish (app store) serves as a connector and that’s it. Set up a connection, and the rest of your work is done in the Files app. Super convenient. It’s free to download and use. You can extend the free trial, but if you’re using it regularly, pay for the unlock. My cost: $8.99.

So, all told, my one-time cost was $13.98 for Play.js and Secure Shellfish, and my monthly costs are $20.99 between DigitalOcean and Termius. You can save six bucks on the monthly by only using the droplet on Digital Ocean and foregoing the storage volume and backups.

Now, figure out what you’re going to use and commit to your tools of choice. The following instructions are based on the specific apps and services I mentioned above. If you choose to use anything different, you’re on your own figuring that shit out. You’re an adult; I’m sure you can modify the instructions to suit your particular set up.

Okay! Here’s a quick and dirty idea of what I’ll be going over, in the order that it should be done, followed by the detail:

1. Set up SSH keys in Termius.
2. Add the keys to your DigitalOcean account.
3. Create your droplet.
4. Add your domain to your droplet.
5. Set up Termius to connect to your droplet.
6. Configure your server.
7. Set up your first Node app.
8. Set up a git repository in your app’s project folder.
9. Clone your repository into Play.js.

Ready? Let’s do this.

Set up SSH keys in Termius.

You need only one SSH key pair, and you’re going to use your terminal app to set it up, because this will be your workhorse wherever interacting with your server is concerned. Download Termius, open it up, and set up an account.

Note: Do NOT forget your password! If, for any reason, you have to reset your password, Termius wipes all of your data (including your keys) for security purposes.

Once you’re in and ready to go, tap on “keychain” on the left:

Then tap the “+” in the upper right:

Then tap on “Generate Key”:

Then alter these settings:

Give it a useful name! Something short and sweet that you can be consistent with. Change the type to “RSA.” And set up a passphrase. Your passphrase is another layer of protection. Once you’ve filled all that out, tap save in the upper right of the dialog box. Boom, you’ve got yourself an SSH key pair. Now you gotta retrieve the public key portion. Long hold on the key you just created and tap “Edit”:

Then swipe to find the public portion of your key. It’s at the bottom of the dialog box, immediately after the private portion:

Now, as it says in the image, select the entire public key text and copy.

Add the Keys to your DigitalOcean account.

Once you’ve saved your public key to a file on your device, login to your DigitalOcean account and tap on your profile icon in the upper right:

From here, follow the instructions on this page to add your SSH key to your account:

How to Upload SSH Public Keys to a DigitalOcean Account | DigitalOcean Product Documentation

I recommend using the same name you used for your key pair in Termius to identify this key in DigitalOcean. This will help you identify what key goes to what system if you find yourself using multiple keys in the future.

Now that you’ve got your SSH key set up in your DigitalOcean account, it’s time to …

Create your droplet.

Follow the instructions here to get your droplet setup with the SSH key you added:

How to Create a Droplet from the DigitalOcean Control Panel | DigitalOcean Product Documentation

A few things of note: you only need the bare minimum to get started. Feeling froggy? Add on at your leisure. There’s lots of options. Location, however, matters! If you plan on adding a storage volume later on, you’ll need to order it through the same data center in order to attach it to the droplet you create here.

Got your droplet set up and ready to go?

Add your domain to your droplet.

While you’re here, configure your droplet to use the domain you ordered for yourself:

How to Add Domains | DigitalOcean Product Documentation

Once you set this up, you’ll need to go to your domain registrar and point your domain to DigitalOcean servers. Different registrars have different ways of doing this, so consult with your registrar’s docs to set this up. Once your domain is pointing to DigitalOcean’s servers, you’ll manage all DNS settings through DigitalOcean.

IMPORTANT NOTE: if you have an existing domain with an active site and you choose to point the root domain to DigitalOcean’s servers, you’ll lose access to your email. I did not know this up front. I lost access to my mailbox for a day while I reconfigured that shit through Namecheap’s mailbox service. That’s a whole other article on it’s own.

Okay, so SSH key added, droplet created, and domain added? Good. On to the next one.

Set up Termius to connect to your droplet.

You gotta get Termius talking to your droplet, so it’s back to Termius we go! But first, go to your newly created droplet and copy the IP address. You’re gonna need that.

When you open Termius, it starts you in the Hosts tab, which should be empty at this point. You’ll tap the “+” in the upper right to set up a connection:

You’ve got some info to fill out:

Alias: name your host.

Hostname: paste in your IP that you copied for your droplet.

Username: root, all lowercase.

Key: select the key you set up at the beginning.

Optional: pick a color scheme for your terminal window at the bottom.

Then tap save in the upper right corner. If all goes well, when you tap on this host, you’ll be prompted to confirm a fingerprint (just confirm it) and you should connect, at which point you’ll be looking at a command line prompt with root as the user.

Configure your server.

You’re in! Hooray! At this point, pat yourself on the back and go refill your coffee because you’ll need a full mug for what follows. Configuring your server isn’t particularly difficult, but it is time consuming. What follows is a series of DigitalOcean tutorials to help get you set up and running. These are the same tuts I used, and are the ones I return to when I need to set up a new server or I’m blowing up an existing one to start over.

The steps here are concise:

1. Set up your server with a user other than root, enable the firewall, and set your new user up to connect via SSH:

Initial Server Setup with Ubuntu 20.04 | DigitalOcean

2. Return to Termius and create a new host using the steps provided above. This time, however, you’ll use your new username instead of root. Then connect to your droplet using this new host.

3. Setup Nginx to serve your site(s):

How To Install Nginx on Ubuntu 20.04 | DigitalOcean

4. Secure your site with SSL:

How To Secure Nginx with Let's Encrypt on Ubuntu 20.04 | DigitalOcean

Boom. You did it. Fuckin’ tedious, but you fuckin’ did it! Now, go refill your coffee mug. Maybe put some ice cream in it. You’re almost set up.

Set up your first Node app.

This next tutorial is inclusive of several steps: setting up a node app, setting up PM2 to run your app, and setting up Nginx as a reverse proxy to secure your app. Take your time through this.

Note: the tutorial is for Ubuntu 18.04, as it was the latest when it was written. I followed this to set up my reverse proxy on Ubuntu 20.04 and all works fine.

How To Set Up a Node.js App for Production on Ubuntu 18.04 | DigitalOcean

Got your Node app up and running? Let’s move development to your iPad.

Set up a git repository in your app’s project folder.

If you’re not already there, navigate to the root of your project. Once there, on the command line, type:

$ git init

This will initialize an empty git repository in your project folder. Next, type:

$ git add .

This adds all the files inside your project folder into your newly created git repository. Next, type:

$ git commit -m 'initial commit'

This bypasses the commit message prompt and commits your project files to the master branch of your repository with “initial commit” as the commit message.

Now, take note of the path to your project folder. You’ll need it for the final step.

Clone your repository into Play.js.

Open Play.js. You’ll be met with a prompt to open an existing project or create a new one. Tap the “+” in the upper right:

Then fill out the name and select the “Clone From git Repository” option:

When you tap on create, you’ll be asked to set up the connection to retrieve and clone your git repository:

It took me forever to figure this out because the DigitalOcean docs were fucking USELESS on this point, but here it is, the format for your url in order to access and clone your repository:

ssh://{username}@{IP}:/{path to project folder}/{project.git}

Once you’ve entered that information, ignore the username and password fields and tap on “SSH Keys.”

At this point, I recommend opening Termius side-by-side with Play.js. In Termius, tap on “Keychain” to the left, then long-press on your key. In the context menu, tap “Edit” to bring up your key’s details. Then simply copy your Public Key into the Public Key field in Play.js, do the same for your private key, type in the passphrase you set up for you key (you can show it in Termius if you forgot), and then tap save. This will take you back to the git setting page.

Tap “Clone.”

If all goes well, Play.js will connect to your droplet, pull the repository, clone it, and now you have a working copy on your iPad! Create a new branch, write to your heart’s content, and push it to your server. You’re set up and ready to go!