{ 🐼 A Backdrop CMS Dev Workflow 💜 }

DevOps and Website development can be a daunting and sometimes fragile business. That is where best practices come into play. So when it came time to #redesign serundeputy.io I decided to take advantage of some of the best practices that Backdrop and Web Development at large have to offer.

  • Lando ~ Lando is a free, open source and cross-platform local development environment tool built on Docker container technology. It is the successor project to Kalabox.
  • Backdrop CMS Configuration Management ~ Manage site configuration in code.
  • SASS ~ For quite sometime I've been slumming it with straight css here on serundeputy.io.
    So this was a welcome improvement.
  • Gulp ~ Solid task management to compile and watch my SASS files!
  • Composer ~ You heard right; composer with Backdrop! Pull in, manage, and use PHP code from the wild with composer!

Let's take a look at how to implement these tools and have a rock solid, development environment, and process that can extend from a team of one to any number of developers.

Lando

With a single .lando.yml file I get a dockerized development stack isolated from my local computer. Configurable to the service and tooling so I can choose the PHP version, web server, and tools I need for production parity! Get tools like drush; including the backdrop-drush-extension installed and configured for free! #wooooot; Go Lando!

Here is the .lando.yml config file for this site:


# Backdrop recipe
name: serundeputy

# Start with the default Backdrop recipe
recipe: backdrop

# Configure the Backdrop recipe
config:

  # See: https://backdropcms.org/requirements

  # Optionally specify the php version to use.
  #
  # If ommitted this will default to the latest php version supported by Backdrop.
  # Consult the `php` service to see what versions are available. Note that all
  # such versions may not be supported in Backdrop 6 so YMMV.
  #
  # See: https://backdropcms.org/requirements
  #
  # NOTE: that this needs to be wrapped in quotes so that it is a string
  #
  php: '7.0'

  # Optionally specify whether you want to serve Backdrop via nginx or apache
  #
  # If ommitted this will default to the latest apache
  #
  # See: https://backdropcms.org/requirements
  #
  # via: nginx

  # Optionally specify the location of the webroot relative to your approot.
  #
  # If ommitted this will be your approot itself.
  #
  webroot: www

  # Optionally specify the version of Backdrush you want for your site
  #
  # This can be either
  #   - `stable`
  #   - `dev`
  #   - `any valid git ref for which there will be a github download` eg 0.0.3
  #
  # If ommitted this will use the stable Backdrush.
  #
  backdrush: stable

  # Optionally specify the database type, this can be one of:
  #
  #   - `mysql`
  #   - `mariadb`
  #
  # If ommitted this will default to the latest mysql. You can additionally provide
  # a version with `type:version` but you will need to consult the documentation
  # for the correct DB service to see what versions are available
  #
  # See: https://backdropcms.org/requirements
  #
  database: mariadb

  # Optionally activate xdebug
  xdebug: true

  # Optionally mix in your own config files
  #
  # If ommitted this will use the default Backdrop config files for the respective
  # services.
  #
  # Definitely consult the relevant documentaion for each service to make sure
  # you are specifying the correct value for the config.
  #
  # conf:
    # server: config/backdrop.conf
    # database: config/mysql
    # php: config/php.ini

services:
  node-cli:
    type: node:6.10
    globals:
      gulp-cli: "latest"

# See: https://docs.lndo.io/config/tooling.html
tooling:
  npm:
    service: node-cli
  node:
    service: node-cli
  gulp:
    service: node-cli

Drop this file into your project root and lando start and boom! You are up and running.

Configuration Management Workflow

This one is near and dear to my 💜. Configure views, menu items, layouts, export to code and deploy to production! Here is how:

  • Configure a nested web root. The project root looks like this:
  
- serundeputy/
    - config/
        - active/
        - staging/
    - www/

Here the www/ directory is your BACKDROP_ROOT and serundeputy/ is the project and git root.

  • Now configure your settings.php to point at your config directories:

$config_directories['active'] = '../config/active';
$config_directories['staging'] = '../config/staging';

I am using the versioned staging directory approach to configuration management and so I have the staging/ under version control and the active/ directory is .gitignore'd. Like so:


# Ignore active config
config/active

Where the .gitignore file is directly in the project root. Now when you make a configuration change like adding a block to a layout or any configuration change in the Backdrop UI and save it you can export it to code, add it to version control, deploy it, and import it on the production server (or another team members local when they pull new code).

Make a configuration change, for example, change the site name and then export it to code:


lando drush bcex

Add the newly exported code to git and push up the changes:


git add -A
git commit -m "Updating site name."
git push origin {branch_name}

Now on the production server pull the code in and import the configuration:


git pull origin {branch_name}
drush bcim -y

The command drush bcex is 'Backdrop Configuration Export' command and the drush bcim is the 'Backdrop Configuration Import' command.

Gulp and SASS

With lando it is very easy to include tooling and services on a per project basis and that is exactly what I've done here. At the bottom of the .lando.yml there is a tooling and services section:


services:
  node-cli:
    type: node:6.10
    globals:
      gulp-cli: "latest"

# See: https://docs.lndo.io/config/tooling.html
tooling:
  npm:
    service: node-cli
  node:
    service: node-cli
  gulp:
    service: node-cli

This adds a npm, node, and gulp to the app. This coupled with the gulpfile.js allows me to use SASS! Here is how to watch the SASS files:


lando gulp

Composer

The previous iteration of this site had a twitter feed with a vertical display of tweets tagged with #backdropintheevening; the new design called for a horizontal display of those tweets. I'm sure there were/are plenty of ways I could have CSSd or javascripted the tweets into the horizontal form, but I've been looking for an excuse to play around with the twitter API and this was it.

Googling around led me to the conclusion that most PHP developers are using the abraham/twitteroauth library. So I decided to use this as well. Pull in the library:


composer require abraham/twitteroauth

Now I wrote a simple custom module to pull in the library and interact with the twitter API to pull in my tweets and get the markup I needed to make the horizontal display. At the top of the serundeputy_tweets.module file is where we pull in the abraham/twitteroauth it looks like this:


require_once BACKDROP_ROOT . "/../vendor/autoload.php";

use Abraham\TwitterOAuth\TwitterOAuth;

This technique will allow me to pull in any composer library and load up the autoloader.php and then import the library with a use statement. Now the module has access the abraham/twitteroauth and all the functions it provides to interact with the twitter API!

Conclusion

Leveraging the power of modern dev tools I now have a sane, dare I say even fun way, to develop new features and iterations of the serundeputy.io site! You can see the full source code of the site on GitHub: serundeputy/serundrop.

External links and resources: