A super straight forward workflow for using Devkit to push a wordpress headless demo to a live WP Engine install. We’re going to be using an existing project from Jack Reichert called “A wp react redux theme” (source) that uses WordPress’s theme convention to load the react.js code.

Full WP Engine Devkit quick-start Guide here.

Time needed: 45 minutes.

Here’s a super straight forward workflow for using Devkit to push a wordpress headless demo to a live WP Engine install.

  1. Install X-Code:

    xcode-select --install

  2. Install Homebrew:

    ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

  3. Download and install Docker:

    https://download.docker.com/mac/stable/Docker.dmg (Mac)

  4. Install WPE-Cli (Devkit):

    brew install wpengine/wpe-cli/wpe-cli

  5. Initialise WPE-Cli:

    wpe setup

  6. Load Devkit bash:

    wpe bash
    Node.js is bundled into Devkit. Loading it’s bash will give you access to it so you can run things like npm.

  7. Create a new local install:

    wpe projects new INSTALLNAME
    Replace INSTALLNAME with your name of choice.

  8. Go to INSTALLNAME directory and start WPE-Cli (Devkit):

    cd INSTALLNAME && wpe start

  9. Navigate to /wp-content/themes/ and install the A WP React Redux Theme:

    cd wp-content/themes/ && git clone https://github.com/jackreichert/a-wp-react-redux-theme.git

  10. Set A WP React Redux Theme as your active theme

    wpe login
    This will log you in to the test site. Go to Appearance -> Themes and click Activate on the A WP React Redux Theme theme.

  11. Set the Permalinks to Post name

    While you’re in /wp-admin, go to Settings -> Permalinks and set them to Post name

  12. Navigate to the new theme directory (wp-content/themes/a-wp-react-redux-theme) and run Node:

    cd a-wp-react-redux-theme && npm install

  13. Still in the theme directory compile the theme:

    npm run build

  14. Run it locally and take a peek:

    npm start

  15. Pair up the local install with the WP Engine install (running these in local ROOT install directory):

    wpe config prod_install WPEINSTALLNAME
    …where WPEINSTALLNAME is the name of the install on the WP Engine side.

  16. Finish the configuration:

    wpe config push_environment prod

  17. Push the install from local to the install on the WP Engine server:

    wpe push

You may be also interested in checking out our guide on how to deploy a headless WordPress site for to the cloud with Frontity and Zeit Now.

Elementor Page Builder

Related Articles

Copyright © 2019 Nodeflame

How To: Deploy a Headless theme with Node.js/React to WP Engine with Devkit

by nodeflame time to read: 2 min