Modern Wordpress Themes with VueJs & Docker

You may have heard of Calypso — Automaticc’s attempt at a new Wordpress.com admin interface, built in modern JavaScript and powered by the Wordpress REST API.
The REST API is a game changer because you no longer have to work with archaic PHP templates if you need Wordpress for client-work. Of course, there are managed services out there for headless CMSs eg. ButterCMS. But i suppose for clients, nothing quite beats the familiarity and ease of use of Wordpress.
Do note that not all existing plugins are compatible with the REST API although most popular community plugins such as ACF and Gravity Forms have released some kind of integration.
Taking a leaf out of their book, I thought it would be a cool to do something similar but for the user-facing frontend. I wanted to build something that was easy for developers to maintain (although I’m sure some in the crowd will prefer their PHP), without compromising on the core experience of Wordpress that clients / non-techies expect when it comes to managing content.
It turns out that several others have already did something similar in modern frameworks such as React and Vue. Basically there are two camps:
Headless CMS + Decoupled Single Page App
In this approach, your SPA doesn’t sit in the Wordpress Themes folder. You can host it on a separate server. Its a super clean approach especially if you have different teams working on the backend and frontend.
Another Wordpress Theme
For this approach, you you deploy as usual in the themes folder, with an index.php
, functions.php
etc. The PHP is minimal and exists mainly to enqueue the JavaScript bundle. It is much easier because you don’t have to find a separate server to host your frontend.
Presenting to you: Vuewp!
I magpied my way to a solution that I felt satisfied with after all that literature review. Shoutout to Belmin Bedak, Paulund, rtCamp and a few others I can’t recall. I basically took the best parts I saw in each of your repos and clobbered something together.
I won’t go into the nitty gritty; i’ll just summarize the main design considerations I had.
Ease of Setup
I’ve come across tutorials / projects where you had to install tools like Composer, an SQL Database, Apache, or even provision your own VPS just to get started on Wordpress. For Vuewp, I’m only going to make you install…wait for it… Docker! I’m pretty sure it’s the only solution out there that brings you to the famous Wordpress 5-minute installation screen with a single command: docker-compose up
.
Top-notch Developer Experience
- VueJs: Component architecture, well-written docs and great chrome extension, its hard not to like Vue.
- Browsersync: I don’t have hot reload setup yet, that’s next on my road map. But for now, you get to enjoy automatic browser refreshes whenever you modify a file. You can either use
index.php
as the entrypoint and Browsersync as the proxy to your Wordpress server, or serve thedist
folder withindex.html
as the entrypoint (like how you’ll serve a static site). - Webpack: This is where all the module bundling, codespliting and prerendering magic happens.
- Gulp: This is where the asset pipeline is defined. Webpack is but one task in the pipeline. I like it this way because I find it mind boggling to do all the imperative build logic in Webpack’s config.
- Docker: Whatever you do in your
wp-content
folder, it is bind-mounted to an internal directory in the container running your Wordpress server. Hence, it is trivial to deploy plugins, change configuration and any code changes will immediately be reflected in your app.
Prerendering & Client-side Hydration
You can read all about Sever-side rendering vs Prerendering here. For Vuewp, I wanted to leave it flexible and not commit to a Node server, so I had to go with prerendering. Turns out it’s actually pretty cool because you prerender the markup at build time, which saves server load, and then you get to hydrate (handover to JavaScript) once the page loads.
Deployment Flexiblity
You can deploy Vuewp as a theme or as a decoupled application. After you run the build steps, you can either copy the dist
folder out and host it as a static site, or copy the entire themes
folder and use it as a Wordpress theme. It’s totally up to you (:
Feel free to check out Vuep here and mess around, fork it, use it however you see fit. Next up, I plan to add client-side caching to reduce load on the server and only fetch updated or new records.