Published in


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:

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:

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:

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:

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:

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:

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):

4. Secure your site with SSL:

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.

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!



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store