I recently went to college and had to use my iPad Pro for class before buying a MacBook Air (the M1 chip is amazing). But being a computer science student meant I had to find a way to use it for programming. So I set out on a quest to find the best way to program using my iPad.
The first option I found was great, but bad because I couldn’t run the code or program I wanted because I didn’t have command line or root access. The following platforms are available: coder, gitpot, GitHub codespace or replica, but they were not what I was looking for.
Then I found the perfect program. It’s free, open source, and self-hosted. It is also the basis of Coder, a platform I found while searching. is called code server It’s basically a hosted VS Code with full filesystem access to the server.
Initially, my use case was for Java programming (the language I was learning in class), but soon I realized that I could use it for other programming tasks as well, namely WordPress theme development!
Requirements
To get started, you need two things.
- A Linux server with root access. I personally use VPS. OVH. Raspberry Pi works but Steps are more complicated And that is beyond the scope of this article.
- iPad or other device Generally not usable for programming (eg Chromebooks).
Let’s say you’re working on the same server as your WordPress website. Also note that this guide was written using Ubuntu 20.04.2 LTS.
installation
First you need to SSH into the server. Recommended if you are using an iPad. Thermius, because it works really well for our needs. When you log in to the server it will install code-server which requires root/sudo access.
Installation is really simple. In fact, this is just one terminal command. Same command when upgrading.
curl -fsSL https://code-server.dev/install.sh | shConfiguration
Once the code server is installed, it can be configured in several ways. Us could do just run code-server It works, but lacks HTTPS and only provides basic authentication. I always want to enable HTTPS, and besides, I need my domain anyway.
Again, there are several ways to enable HTTPS. first of Documentation on the code server Use Let’s Encrypt with a reverse proxy like NGINX or Caddy. This works great, but it requires a lot more manual configuration and I didn’t want to bother with it. However, code-server provides other options as well. --link, works great despite being in beta. This flag hardens TLS certificates, GitHub authentication, and dedicated cdr.co URLs! All without configuration on our side! That’s cool‽ To set it up run the following command (root/sudo access is not required, normal user will work):
code-server --linkThis will generate a URL to log into your GitHub account so you know which account to authenticate with. When you’re done, you’ll receive a dedicated URL and let’s get started! Each user has their own configuration and GitHub account, so I think it might be technically possible for multiple people to run multiple instances at the same time. But I haven’t tested it.
Once your GitHub account is configured Ctrl key+Seed Stop the process.
running code-server --link Provide the login URL.
Just tap the URL in Termius to open it in Safari.
GitHub will authorize your account after logging in.
Once the app is approved, you will be taken straight to the friendly interface!
Go back to your SSH session and you will see that the persistent URL is now available! Keep in mind that it only works when the code server is running.
Setting up WordPress Theme Dependencies
There are many ways to develop WordPress themes, but Automattic’s underscore (_NS), so we use it as a starting point.
To start using _NS, let’s install composer. PHP is already installed, as it assumes you are on the same server as your WordPress website. I can list the steps here but It’s already on Composer’s website. Better laid out than I could.
Once Composer is installed, you will need to install: node.js Run the following command in the terminal:
cd ~
curl -sL https://deb.nodesource.com/setup_16.x -o nodesource_setup.sh
sudo bash nodesource_setup.sh
sudo apt install nodejs
node -vThis command will add the updated Node PPA (since the PPA included with Ubuntu is really outdated (Node 10!)), then install Node and get that version.
The last command should return something like v16.6.1. This means everything is ready!
theme settings
To set the _stheme, run: npx degit automattic/_s my-cool-theme. This will download _scode to a folder named . my-cool-theme. If you want to use the theme directly in your WordPress theme directory, you can navigate to that folder, create a symbolic link to that folder, or provide the full path to the folder in the previous command instead. I personally prefer to zip files by running: npm run bundle Then manually unzip it from within. themes folder.
When everything is done, let’s run it. code-server --link, open your browser and go to the URL!
In your VS Code instance, open the folder containing your theme and quick start steps for _NS, name the theme correctly. Then in the integrated terminal run: composer install and npm install. Install all packages required by the theme. I won’t explain how WordPress themes work, as people with more experience have already done so.
And that’s it! Now our servers have everything you need to develop some sick WordPress themes using an iPad or other device with a browser and keyboard. We can also use Xbox. new browser release.
what progress is being seen
Isn’t everything we talked about great in theory? But you might be wondering what it’s really like to develop on an iPad with this configuration. I recorded the following video to show you how it feels. It’s a few minutes long, but it seems to reflect the kind of thing that happens in WordPress development.
A few notes about this setup
A few things are missing because the code server uses the open source VS Code and not the Microsoft version. it is also Not using Microsoft’s Marketplace Not all extensions are available. You can’t log in to your Microsoft or GitHub account to sync your settings, but you can also use: Settings Sync Extension, but I’ve personally had problems syncing my extensions. Each Linux user has their own settings and extensions that are stored in the following folder: ~/.local/share/code-server. It has a folder structure similar to a normal VS Code installation.
There is also a way to run the code server as a service instead of running it directly in an SSH session so that it is always running, but I prefer to have it open when needed.
A few iPad-related tips
If you’re planning to use an iPad like me, here are some tips to make your experience even more enjoyable!
- Activation location tracking function Termius allows the SSH connection to remain active even when the app is running in the background.
- Open a website using Safari, then open the share sheet to add it to your home screen! PWAs to win
- Safari caches items very aggressively and clearing them is really annoying. The only way I’ve found is to clear the browser’s history by default, which is not ideal. There is no “force refresh” like other desktop browsers. But Chrome can handle it better.
- Bluetooth keyboard or case (bridge That’s a good thing.) Because it feels more like a laptop than a tablet. A real keyboard is 1000x more enjoyable than an on-screen keyboard!
- The iPad can sometimes “lost focus” of the editor, especially when switching between apps, making typing impossible. I usually fix it by tapping the sidebar and then in the editor.