Today I was travelling to meet my team in Mexico City (one of the many perks of working at Automattic), and I decided to see if I could set up a functional development environment on my new Google Pixelbook.
It’s quite a capable machine (Core i5, 8GB RAM) – not quite Macbook-Pro-level, but powerful enough. Plus it has great battery life, touch and pen support, a beautiful keyboard, Android app support and other really nice things. You can even run Android studio on it.
So, without further ado – let’s see if we can develop Jetpack and Calypso on ChromeOS! As a bonus, we will add ngrok so that our WordPress instance can be viewed by anyone on the internet.
These instructions assume you have some familiarity with Linux and the vi editor. Feel free to adapt them to develop your own WordPress plugin or node app.
Basic Setup
Enable “Linux Mode” on ChromeOS
ChromeOS supports running Linux in a container – but only on Pixelbooks right now, and only on the “developer channel”. Just follow these instructions.
Once you’ve installed Linux, you simply get a Terminal icon in your App drawer. Clicking it boots Linux and opens a Bash shell. Woohoo!
This Linux is a lightly customized version of Debian 9 (Stretch). Most of the customizations are to support the Wayland display server for the Linux container.
As always with Linux, it’s worth doing an sudo apt-get update && sudo apt-get upgrade to make sure everything is up-to-date.
Also you should know that the network address for the Linux container is “penguin.linux.test”. Cute 🙂
Install an Editor
Installing Visual Studio Code
This is my preferred editor. You can follow the Debian (Stretch) instructions on the VS Code web page.
Once you have install VS Code, you can edit the files in any directory using the command code /path/to/directory.
Developing Calypso
For the unfamiliar, Calypso is the user interface of WordPress.com. It’s a beautiful, fast and responsive replacement for wp-admin, which talks to your site via the WordPress.com APIs. It’s built using node, with a user interface powered by React.
Clone wp-calypso
I personally put my repositories in a folder called `workspace` under my home directory.
mkdir workspace
cd workspace
git clone git@github.com:Automattic/wp-calypso.git
Install NVM
We need this in order to build Calypso.
sudo apt-get install build-essential libssl-dev
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash
Follow any prompts from the install script, including installing Node 10.
Let’s run Calypso!
cd wp-calypso
npm run start
Now open http://calypso.localhost:3000/ and behold your beautiful WordPress interface 🙂
Install WordPress and connect Jetpack
Installing WordPress
The Debian Wiki has official instructions, which I have summarized here with light customizations.
As you may know, WordPress has just three dependencies: PHP, Curl and MySQL (aka MariaDB).
sudo apt-get install wordpress curl apache2 mariadb-server
sudo mysql_secure_installation
Follow the prompts to set a MySQL root password and disable remote access.
Now let’s create an Apache configuration:
sudo vi /etc/apache2/sites-available/wp.conf
I have taken the following config from the Debian instructions, but set the ServerName to “penguin.linux.test” (the default address for the VM) and add a ServerAlias directive with something like “myspecialsite.ngrok.io”. This will allow us to connect Jetpack later, when we install ngrok.
Here’s my config:
<VirtualHost *:80>
ServerName penguin.linux.test
ServerAlias goldsoundschrome.ngrok.io
ServerAdmin webmaster@example.com
DocumentRoot /usr/share/wordpress
Alias /wp-content /var/lib/wordpress/wp-content
<Directory /usr/share/wordpress>
Options FollowSymLinks
AllowOverride Limit Options FileInfo
DirectoryIndex index.php
Require all granted
</Directory>
<Directory /var/lib/wordpress/wp-content>
Options FollowSymLinks
Require all granted
</Directory>
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>
Now let’s disable the default site and enable our wp site in Apache:
sudo /usr/sbin/a2dissite 000-default
sudo /usr/sbin/a2ensite wp
sudo systemctl reload apache2
Since we’ll only be running one site (for now) let’s create/edit the default WordPress config file, where the WordPress debian package expects to find it.Also note that contrary to the Debian WP instructions, the a2dissite and a2ensite commands need to be prefixed with /usr/sbin:
sudo vi /etc/wordpress/config-default.php
<?php
define('DB_NAME', 'wordpress');
define('DB_USER', 'wordpress');
define('DB_PASSWORD', 'password');
define('DB_HOST', 'localhost');
define('WP_CONTENT_DIR', '/var/lib/wordpress/wp-content');
define('FS_METHOD', 'direct');
?>
Be sure to change the password to something more secure 🙂
Also note that we added define('FS_METHOD', 'direct'); so that we can update plugins using the regular WordPress update mechanism – otherwise WordPress will prompt you for an FTP password whenever you update.
You will also need to change the ownership of the wp-content directories so that Apache can write to them:
sudo chown -R www-data:www-data /usr/share/wordpress/wp-content
Now create a one-time SQL script for creating the DB (remember to match the password here to the one in the config file above).
CREATE DATABASE wordpress;
GRANT SELECT,INSERT,UPDATE,DELETE,CREATE,DROP,ALTER
ON wordpress.*
TO wordpress@localhost
IDENTIFIED BY 'password';
FLUSH PRIVILEGES;
Now load the file to create our database:
sudo cat ~/wp.sql | sudo mysql --defaults-extra-file=/etc/mysql/debian.cnf
The command should complete without errors.
To confirm that the DB was created, load up the MySQL command line:
sudo mysql --defaults-extra-file=/etc/mysql/debian.cnf
MariaDB [(none)]> show databases;
+--------------------+
| Database |
+--------------------+
| information_schema |
| mysql |
| performance_schema |
| wordpress |
+--------------------+
4 rows in set (0.00 sec)
MariaDB [(none)]>
Hooray! Ok – now you should be able to go to http://penguin.linux.test in your browser and see the famous 5 minute install! Follow the prompts and you have WordPress running. Yay!
Install wp-cli
Follow the instructions at https://wp-cli.org/#installing to install wp-cli
Now make sure we create a www-data-owned directory for wp-cli to do caching, otherwise you’ll get warnings about that:
sudo mkdir /var/www/.wp-cli
sudo chown www-data:www-data /var/www/.wp-cli
Once you’re done, you should be able to cd to /usr/share/wordpress and run commands like this:
sudo -u www-data wp plugin install --activate jetpack
Reinstall default plugin and theme
At this point, we can remove the old akisment and twentyseventeen symlinks and use wp-cli to install them again (so they can be auto-updated).
sudo rm /var/lib/wordpress/wp-content/plugins/akismet
sudo rm /var/lib/wordpress/wp-content/themes/twentyseventeencd /usr/share/wordpress
sudo -u www-data wp theme install --activate twentyseventeen
sudo -u www-data wp plugin install --activate akismet
In order to connect Jetpack, our WordPress install needs to be accessible on the internet. To do this, I use ngrok.
Installing ngrok
Head to https://ngrok.com/download and copy the link to the latest Linux amd64 build, then unzip it.
In my case, the commands were:
wget https://bin.equinox.io/c/4VmDzA7iaHb/ngrok-stable-linux-amd64.zip
unzip ngrok-stable-linux-amd64.zip
sudo mv ngrok /usr/local/bin/
Now we need to activate ngrok. If you head to ngrok.io and log in, then you should be able to copy the “Connect your account” command (careful of that leading ./) and activate your ngrok install.
ngrok authtoken blahblahblahblahtokentokentoken
Assuming you successfully authenticated, you should now be able to launch ngrok using the subdomain you specified in your ServerAlias command in the Apache config:
ngrok http -subdomain=goldsoundschrome 80
Now go to http://goldsoundschrome.ngrok.io and see your site!
There’s one wrinkle here – if you attempt to authenticate or connect to your site externally, it will redirect to penguin.linux.test.
Luckily the wp command we installed earlier gives us an easy way to change all the domain-related settings:
cd /usr/share/wordpress
wp search-replace penguin.linux.test goldsoundschrome.ngrok.io
Now head to http://goldsoundschrome.ngrok.io/wp-admin (or whatever your address is) and log in, then follow the prompts to set up Jetpack.
Woohoo!
Observations / Thoughts
This actually works pretty well. Developing on my Pixelbook feels really fast and snappy (and it’s not the highest-end model, either). I honestly didn’t notice an enormous difference between the Pixelbook and my Macbook Pro in terms of performance.
Display scaling issues for Linux apps need to be tuned – some are teeny-tiny (xterm), some are middling (Visual Studio Code) and some are normal-sized (GTK apps like the Package Manager).
Overall, it’s a perfectly functional system for developing WordPress plugins, themes, and node apps. It has tons of battery life, great security, and thanks to the Linux mode it has access to all the useful software you can think of.
Enjoy!
***
Daniel Walmsley is a Team Lead at Automattic, mainly working on partnerships. He loves working from home in beautiful Nevada City.
Like this:
Like Loading...
