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

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

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 called Celestial (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.

  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:

    cd INSTALLNAME

  9. Navigate to /wp-content/themes/ and install the Celestial demo theme:

    git clone https://github.com/m-muhsin/celestial.git

  10. Go into that directory and grab React DOM (theme dependancy):

    npm install --save react react-dom

  11. Also grab Webpack (another theme dependancy):

    npm install -g webpack-cli

  12. Go into the theme directory (wp-content/themes/celestial/ in this case) and compile the theme:

    npm run build

  13. OPTIONAL | Run it locally and take a peek:

    npm start

  14. 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.

  15. Finish the configuration:

    wpe config push_environment prod

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

    wpe push