How to use bitbucket pipelines to deploy to WPEngine

We developers love to use and create automated processes! If something is repetitive, we have an urge to write a bash script, a gulp/grunt task, etc. It is in our nature!

Thankfully, we are living in an era where creating those scripts are getting easier and easier!

One Continuous Integration tool, in particular, I am very fond of is Bitbucket Pipelines. The C/I is a very powerful yet, simple tool and the best part, free. It is part of the Bitbucket repo and you can enable it at any time.

THE PROBLEM

Everything was working great, my Gulp tasks, Webpack bundler, but how to deploy all my assets from bitbucket to WP Engine? The way our team was doing before wasn’t great. The developer had to run the build command manually, then commit the dist folder and push the WP Engine. Seems a bit messed up, right?

But how to run the build command automatically and deploy to WP Engine, if I don’t want to commit the dist folder?

The requirements are:

• The bitbucket repository should contain only the source code and the gulp files.
• The WP Engine repo should contain only the compiled files, which means, no .scss, webpack.config.js or gulpfile.js.

MY SOLUTION

The first step is to enable Bitbucket Pipelines:

Copy the public key and go to the WP Engine dashboard. Select your project and go to the “Git push” tab. Add a name and paste the key you created in Bitbucket.

Your bitbucket is now authorized to communicate with WP Engine. The next step is create the bitbucket-pipelines.yml file. YAML files are like JSON files but use indentation instead of brackets.

First, let’s use the image “node:10.24.1”.

In our first step, I install all the dependencies and gulp-cli.

dep: &dep
  step:
    name: Installing dependencies
    caches:
    - node
    script:
    - npm cache clean -f
    - npm install -g n
    - npm install -g gulp-cli
    - yarn

Now, it’s time to run the build command. Also compress the the wp-content folder and export as an artifact, since we are going to use it in our next step.

build: &build
  step:
    name: Build assets
    caches:
    - node
    script:
    - apt-get update -y
    - apt-get install -y ssh
    - apt-get install -y zip
    - npm rebuild node-sass
    - npm run build
    - zip -r temp.zip wp-content
    artifacts:
    - temp.zip

The next step is deployment, which was the tricky part for me. The first part is delete the “.git” folder, so we don’t have any repo conflict. Then, I clone the wp-engine repo inside a new folder, in this case, I named it deploy. The following step is to move the compiled file “temp.zip” to the deploy folder and unzip it. It will overwrite all the old files. Now we just have to commit those modifications and push to origin, both production and staging and voilá! You now have integrated bitbucket pipelines with WP Engine. Everytime you merge your code into master, it will create a build and deploy to WP Engine automatically!

deploy: &deploy
  step:
    name: Deploy to PROD
    script:
    - export REPO="your_repo.git"
    - export USER_EMAIL="$USER_EMAIL"
    - export USER_NAME="$USER_NAME"
    - echo deploying to $REPO
    - rm -rf .git
    - git config --global user.email "$USER_EMAIL"
    - git config --global user.name "$USER_NAME"
    - git clone git@git.wpengine.com:production/$REPO deploy
    - mv temp.zip deploy/ && cd deploy
    - ls | grep -v temp.zip | xargs rm -rf
    - unzip temp.zip
    - git status
    - git add . && git commit -m "$BITBUCKET_COMMIT"
    - git push origin master
    - git push -f git@git.wpengine.com:staging/$REPO master

I like to split the steps into variables like that, so it looks cleaner and you can reuse the steps if you want.

pipelines:
  branches:
    'master':
    - <<: *dep
    - <<: *build
    - <<: *deploy

TL;DR;

If you want a short explanation, I have split it into small steps.

1. Enable pipelines in your bitbucket repository;
2. Generate an SSH key and add git.wpengine.com to known hosts;
3. Go to your WP Engine dashboard. Under the Git Push tab paste your public key;
4. Create a bitbucket-pipelines.yml with the following content

image:
  name: node:10.24.1

dep: &dep
  step:
    name: Installing dependencies
    caches:
    - node
    script:
    - npm cache clean -f
    - npm install -g n
    - npm install -g gulp-cli
    - yarn

build: &build
  step:
    name: Build assets
    caches:
    - node
    script:
    - apt-get update -y
    - apt-get install -y ssh
    - apt-get install -y zip
    - npm rebuild node-sass
    - npm run build
    - zip -r temp.zip wp-content
    artifacts:
    - temp.zip

deploy: &deploy
  step:
    name: Deploy to WP Engine
    script:
    - export REPO="your_repo.git"
    - export USER_EMAIL="$USER_EMAIL"
    - export USER_NAME="$USER_NAME"
    - echo deploying to $REPO
    - rm -rf .git
    - git config --global user.email "$USER_EMAIL"
    - git config --global user.name "$USER_NAME"
    - git clone git@git.wpengine.com:production/$REPO deploy
    - mv temp.zip deploy/ && cd deploy
    - ls | grep -v temp.zip | xargs rm -rf
    - unzip temp.zip
    - git status
    - git add . && git commit -m "$BITBUCKET_COMMIT"
    - git push origin master
    - git push -f git@git.wpengine.com:staging/$REPO master

pipelines:
  branches:

    'master':
    - <<: *dep
    - <<: *build
    - <<: *deploy

*Bear in mind I’m using gulp. If you are using another bundler tool, just remove the gulp-cli step.

Hope you find this tip useful. If you have any questions, just drop me a message!

Thanks!