WordPress project with Roots tools
Roots tools : an overview
This post is not made to be a complete guide of the Roots Suite for WordPress development.
You can find below a short description of the different modules. For more informations I suggest you follow the links.
That being said, I hope I provide useful informations about this WordPress technology.
Bedrock
- WordPress boilerplate with modern development tools, easier configuration, and an improved folder structure
- Better WordPress project structure
- Dependency management with Composer
- Easy WordPress configuration
- Enhanced Security
Trellis
- WordPress development and production servers done right
- Vagrant virtual machine for development
- Complete WordPress server
- Provision a remote server and deploy to it with a single command
- Zero-downtime WordPress deployments
Sage
- WordPress starter theme with a modern development workflow
- Modern front-end workflow with Webpack
- Bootstrap 4, Foundation, and more
- DRY templates with Blade from Laravel
A project I worked on ... and how I changed my mind about Sage
Dev Environment
How to say … Probably if you work in the IT field you are used (or at least it happens) that something you don’t expect to be an issue actually becomes an issue. It is kinda the Murphy’s law (I’ll let you find out what Murphy’s Law is if you do not know yet, you’ll see it’s instructive).
Why would I have anticipated than sharing the code for this project with Git on Gitlab would become such complicated ?
We tried first to work with Docker containers to build our development environments. It was alright for my mate … but he works on Linux and I worked that time on Windows 10 – Home edition which doesn’t allow you to use the normal Docker solution but only Docker Toolbox ; this one uses Oracle Virtual Box instead of Hyper-V.
After too many attempts to make the two environments coincide I started to use Trellis from Roots to mount my local dev machine. It was the good choice. I already knew about Trellis because I used it in the past for another project.
Now we had a common repository on Gitlab that would match our two different local configurations (Docker and Vagrant). And we could really start to develop the custom website for our client.
Stack chosen for the project
The stack chosen from the project was :
- Bedrock
- Sage
Which can be a very good choice in many occasions… but which was not in this case.
Though I knew it wasn’t going to be easy to start with Sage (which means Blade/Laravel) I thought more work would be enough to deal with the difficulty.
I could read a few articles about the topic when I was trying to find the best starter theme for my WordPress custom developments. Some guys would warn us about Sage, saying that it is not the best choice if :
- You are new with WordPress custom development and you are still learning about the WordPress standards
- You don’t know about Laravel and the Blade templating patterns
But I was very motivated and I can work hard.
Basically what happened then is I needed more support from my mate whom was the senior developer of our 2 persons team for this project. I am glad I could learn about this technology but on my opinion the learning curve was too steep and probably not worth it if you don’t stick to this framework later on.
So I learned and made decisions in consequence …
The stack I focus on then
First get back to Linux
Yes I know what people think :
What took you to work with Windows ?
I bought Windows 10 with my laptop last year and just thought I would give it a try – I was using Ubuntu and other Linux Distribution mainly before.
But the misadventure with this project made me realize my work environment was wobbly, even if I could use Virtual box or other virtualization solutions.
So I installed Ubuntu 18.04 alongside Windows 10 (dual boot) and feel much better now !! 😎
Second fire Sage and hire UnderStrap
I am not going to write a full guide for UnderStrap either (you can find links below) but I can explain why I finally chose this starter theme for my new projects.
UnderStrap is built upon the starter theme Underscores from Automattic (WordPress official dealer).
UnderStrap uses npm as manager for dependency packages like Bootstrap and Underscores. And it uses Gulp as taskrunner, for example to compile .scss code into .css, minify .js code etc.
This workflow is similar to what you get with Sage and Webpack on my opinion.
For me the most important is that Underscores and UnderStrap really stick more to the WordPress usual pages templating and all other patterns, structures…
That’s one reason why some developers don’t like it (compared to Sage by instance) but that’s the reason why I like it.
My first results
Trellis allows you to work on a development environment locally.
And you can also deploy very easily a staging environment and a production environment on you remote servers.
I work with AWS (Amazon Web Services).
I started with a full custom Ubuntu 16-04 LTS – Xenial image as advised by Roots when I began the project.
I have since switched to a Lightsail instance and it works very well too – it is even simpler.
Once you have properly done the configuration for all deployments with Trellis you can use simple commands to provision/deploy via SSH.
It sends all the code you pushed to your git repositories to your server. Then you have to restore a copy of your database on the remote server to end the process.
I had to find ways to handle all the uploaded files too (images…).
Explained very briefly this way it may be (at least for those whom know a bit about this IT jargon) simple ; honestly it took me some time to perform the process smoothly.
But I guess it was worth it.
You can see below for my production environment :
Please be indulgent with me the work is still in progress 😉