/headless-wp-starter

🔪 WordPress + React Starter kit

Primary LanguagePHPGNU General Public License v2.0GPL-2.0

WordPress + React Starter Kit

Postlight's Headless WordPress + React Starter Kit is an automated toolset that will spin up two things:

  1. A WordPress backend that serves its data via the WP REST API and GraphQL (new!).
  2. A server-side rendered React frontend using Next.js.

You can read all about it in this handy introduction.

What's inside:

  • An automated installer script which bootstraps a core WordPress installation that provides an established, stable REST API.
  • A plugin which exposes a newer, in-progress GraphQL API for WordPress.
  • The WordPress plugins you need to set up custom post types and custom fields (Advanced Custom Fields Pro and Custom Post Type UI).
  • Plugins which expose those custom fields and WordPress menus in the WP REST API (ACF to WP API and WP-REST-API V2 Menus).
  • All the starter WordPress theme code and settings headless requires, including pretty permalinks, CORS Allow-Origin headers, and useful logging functions for easy debugging.
  • A mechanism for easily importing data from an existing WordPress installation anywhere on the web using WP Migrate DB Pro and its accompanying plugins (license required).
  • A starter frontend React app powered by Next.js.
  • A Docker container and scripts to manage it, for easily running the frontend React app and backend locally or deploying it to any hosting provider with Docker support.

Let's get started.

WordPress Backend

Before you install WordPress, make sure you have all the required software installed for your operating system.

Prerequisites

  • OS X: You'll need Homebrew and Yarn installed.
  • Windows: To install under Windows you need to be running the 64-bit version of Windows 10 Anniversary Update or later (build 1607+). The Linux Subsystem for Windows should be installed and enabled before proceeding. Then, you'll need the prerequisites for Ubuntu Linux, detailed below, set up.
  • Ubuntu Linux: You'll need the latest version of NodeJS, Yarn and debconf-utils installed first. Follow this simple guide to get the latest version of NodeJS installed. Install the rest of the packages using the apt-get package manager. Note: During the WordPress installation, you may be asked to enter the root password at the prompt due to the use of the sudo command
  • Docker: You'll need to install Docker for your platform.

Install

The following command will get WordPress running locally on your machine, along with the WordPress plugins you'll need to create and serve custom data via the WP REST API.

> yarn install && yarn start

Install with Docker

> yarn docker:build && yarn docker:start

When the installation process completes successfully:

Import Data (Optional)

To import data and media from a live WordPress installation, you can use the Migrate DB Pro plugin, which is already installed. To do so, in the robo.yml file, set the plugin license and source install. Run robo wordpress:setup, then run robo wordpress:import to pull in the data.

Extend the REST and GraphQL APIs

At this point you can start setting up custom fields in the WordPress admin, and if necessary, creating custom REST API endpoints in the Postlight Headless WordPress Starter theme. You can also modify and extend the GraphQL API.

The primary theme code is located in wordpress/wp-content/themes/postlight-headless-wp. Remember to lint your code as you go.

React Frontend

Prerequisite: Node 7 is required.

To spin up the frontend client app, run the following commands:

> cd frontend && yarn install && yarn start

The Next.js app will be running on http://localhost:3000.

Docker

Most WordPress hosts don't also host Node applications, so when it's time to go live, you will need to find a hosting service for the frontend.

That's why we've packaged the frontend app in a Docker container, which can be deployed to a hosting provider with Docker support like Amazon Web Services or Google Cloud Platform. For a fast, easier alternative, check out Now.

To run the Docker container locally:

  1. Install Docker on your computer.
  2. In frontend/config.js, replace localhost:8080 with your publicly-accessible WordPress installation's domain name or IP address.
  3. Start the container by running this command:
> yarn run deploy

Troubleshooting Common Errors

ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO)

If you receive this error, it likely means another version of MySQL, not the version that was installed by this script, is being referenced by the MySQL command.

  1. Open up your .bash_profile, and see if there is a reference to MySQL in your PATH or if MySQL is being exported as a function. Remove it.

  2. Repeat the installation process. If you still have errors, then look for - and remove - other versions of MySQL by following these "Remove MySQL" instructions.

CORS errors

If you have deployed your WordPress install and are having CORS issues be sure to update /wordpress/wp-content/themes/postlight-headless-wp/inc/frontend-origin.php with your frontend origin URL.

See anything else you'd like to add here? Please send a pull request!

Made with ❤️ by Postlight. Happy coding!