Crusader of Friendship

WordPress Development on iPad

A few days ago, I found myself sitting in the immigration office, waiting hours for my number to be called. I’m currently living in Japan, and so often have to make trips like this for various visa-related things. In any case, I usually don’t bring my laptop in these situations, as it’s not guaranteed I can find a space to set up. Instead, I’ll bring my iPad or kindle and do some light reading. Well this time around, a thought occurred to me. What if I could use my iPad for development? That way if I do happen to find space, I’ll still be all set even without my laptop. And so I set out to see if I could do just that.

The goal was to see if I could get a WordPress development environment, with access to a full-featured editor, set up on my iPad. And the TLDR is I was able to do just that for 5USD/month (plus the cost of my domain), using the following:

  • Digital Ocean VM (Disclaimer: this is a referral link. If you do decide to go with Digital Ocean, it would help me out a ton if you use this link 🙇🏻‍♂️)
  • code-server (VSCode)
  • wp-cli
  • Namecheap domain (optional)

Getting Set Up

Most of the steps for getting set up are outlined in the docs of the various sites mentioned above, but for convenience, I’ll give a quick rundown of each step along with a link to more detailed instructions.

Cloud Server

You can’t actually get a local development environment set up with your iPad (that I’m aware of at least). Instead, you have to rely on a cloud-based solution. While researching, I stumbled upon the code-server project which is exactly what I needed. The project runs on pretty much any cloud service, but as mentioned above, I went with Digital Ocean. Code-server offers it’s own cloud-platform that will generate a unique URL for your environment, but if you want to use your own domain, you can follow their setup guide. Here is a quick rundown of the exact steps I took.

Create a new droplet at Digital Ocean.

The following settings should be fine when setting up the droplet:

  • Ubuntu
  • Basic shared CPU
  • 1GB / 1CPU,
  • any data center
  • any auth method

SSH into your new droplet

If you’re not sure how to do this, you can find detailed instructions for doing this in Digital Ocean docs.

Run the code-server install script

curl -fsSL https://code-server.dev/install.sh | sh

Create an A record pointing to your droplets IP Address

This is optional. You’ll want to do this step if you want to access your editor at your own sub/domain. You can find your droplets IP Address by going to your Digital Ocean dashboard, then selecting droplets, then your droplet name. You’ll want to find documentation on adding DNS records at your domain registrar’s site, or contact them directly if you aren’t able to find a solution this way.

Install Caddy

From your droplet shell, install Caddy with the following (taken directly from the code-server setup guide):

sudo apt install -y debian-keyring debian-archive-keyring apt-transport-https
curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/cfg/gpg/gpg.155B6D79CA56EA34.key' | sudo apt-key add -
curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/cfg/setup/config.deb.txt?distro=debian&version=any-version' | sudo tee -a /etc/apt/sources.list.d/caddy-stable.list
sudo apt update
sudo apt install caddy

Modify Caddyfile

You can use something like vim to modify your Caddyfile with vim /etc/caddy/Caddyfile.

You’ll want to replace this file’s contents with the following, making sure to replace the [yourdomain] bit with your actual sub/domain:

[yourdomain].com {
    reverse_proxy 127.0.0.1:8080
}

Reload caddy

sudo systemctl reload caddy

And with that, the first half of the equation is complete. You should now be able to access VSCode at your specified sub/domain. Note that the editor is password protected. You can find this password in your shell with the following:

cat ~/.config/code-server/config.yaml

Issues With Safari

After following the setup guide, I found that I had issues accessing the editor from Safari on both iPad and Mac. If you have the same issue, the workaround shared in this issue fixed the problem for me.

Setting Up WordPress

Now that we have our server, and publicly accessible editor all set, we can now get WordPress installed. Since we’ve already installed and set up Caddy, I’ll be using this for our WordPress site as well. Digital Ocean has a great tutorial on how to do just this. The steps are laid out pretty well, so I won’t go into as much detail, but here is the gist (taken from the tutorial for the most part):

Install PHP and Confirm Installation

sudo apt update
sudo apt install php7.4 php7.4-fpm php7.4-mysql
php -v

Create Database and User

Log in with root:

mysql -u root -p

And create the database and new user:

CREATE DATABASE wordpress DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
GRANT ALL ON wordpress.* TO 'wordpress'@'localhost' IDENTIFIED BY 'password';
FLUSH PRIVILEGES;
EXIT;

Install wp-cli and Confirm Installation

This part is not in the guide, but I find it useful to have wp-cli installed generally. 

curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar
chmod +x wp-cli.phar
sudo mv wp-cli.phar /usr/local/bin/wp
wp —-info

Install WordPress

mkdir /var/www/wordpress
cd /var/www/wordpress
wp core download
wp config create --dbname=wordpress --dbuser=wordpress --dbpass=[yourpassword]

Create a Subdomain and A Record for your WordPress Site

This is optional. But if you’d like to access your development site with a public URL, you can create a new sub/domain and A record with your domain registrar and again point this to your droplet’s IP address.

Update Caddyfile

Again, you can edit your Caddyfile with vim /etc/caddy/Caddyfile. Add the following to the end of the file, being sure to replace the [yourdomain] bit with either the subdomain you created in the previous step, or your droplets IP address:

...
[yourdomain] {
    root * /var/www/wordpress
    php_fastcgi unix//run/php/php7.4-rpm.sock
    file_server
    encode gzip
    
    @disallowed {
        path *.sql
        path wp-content/uploads/*.php
    }

    rewrite @disallowed ‘/index.php’
}

Afterward, be sure to reload Caddy with:

sudo systemctl reload caddy

Once you’ve done that, you should be all set! You can access your WordPress development site at the sub/domain you specified, or your droplet’s IP address, and finish the installation process via the WordPress UI.

The Final Setup

To summarize, after following the above steps you should have a URL for accessing your password-protected editor, and a URL for accessing your WordPress development site. From your iPad you can then open the URL for your editor, login, and add a PWA to your home screen by selecting the share icon in Safari, then selecting **Add to Home Screen**. You can now quickly access your editor as you please.

Another neat trick is to use the iPad’s slide over feature so you can easily track changes to your dev site. Here is what that looks like:

I haven’t spent too much time working with this new environment, so I’m sure there is still lot’s of additional set up to come, but hopefully this has been helpful for those of you who have had a similar urge to work from your iPad from time to time.

A Note on Accessories

Before closing things up, I wanted to share some thoughts on accessories for the iPad that compliment this setup. Of course, the Smart Keyboard is a great all-in-one solution. But I find that my neck hurts after a while of looking down at my iPad for too long. I recently came across this awesome adjustable iPad case from Moft that allows for varying heights. I’ve ordered it and am excited to try it out once it arrives. That in combination with the Magic Keyboard should cover my needs while not adding too much to carry when I’m out and about.

That’s it for this post. I hope this has been helpful. Feel free to reach out if you have feedback, issues, or questions. And thanks for sticking with me the whole way through 🙇🏻‍♂️

,
,
%d bloggers like this: