headless-wp-starter

by postlight

πŸ”ͺ WordPress + React Starter Kit: Spin up a WordPress-powered React app in one step

3.9K Stars 583 Forks Last release: over 1 year ago (v2.0) GNU General Public License v2.0 251 Commits 1 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

WordPress + React Starter Kit

Build status

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

  1. A WordPress backend that serves its data via the WP REST API and GraphQL.
  2. A sample React frontend powered by the WP GraphQL API, which supports posts, pages, categories, menus, search, and user sign-in.
  3. Another sample server-side rendered React frontend using Next.js powered by the WP REST API.

You can read all about it in this handy introduction.

What's inside:

  • An automated installer 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 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).
  • JWT authentication plugins: JWT WP REST and JWT WP GraphQL.
  • 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 sample, starter frontend React app powered by GraphQL.
  • Another sample, starter frontend React app, server-side rendered via Next.js, powered by the WP REST API.
  • Docker containers and scripts to manage them, for easily running the frontend React apps and backend locally or deploying it to any hosting provider with Docker support.

Let's get started.

Install

Prerequisite: Before you begin, you need Docker installed. On Linux, you might need to install docker-compose separately.

Docker Compose builds and starts four containers by default:

db-headless
,
wp-headless
,
frontend
&
frontend-graphql
:
docker-compose up -d

Wait a few minutes for Docker to build the services for the first time. After the initial build, startup should only take a few seconds.

You can follow the Docker output to see build progress and logs:

docker-compose logs -f

Alternatively, you can use some useful Docker tools like Kitematic and/or VSCode Docker plugin to follow logs, start / stop / remove containers and images.

Optional: you can run the frontend locally while WordPress still runs on Docker:

docker-compose up -d wp-headless
cd frontend && yarn && yarn start

Once the containers are running, you can visit the React frontends and backend WordPress admin in your browser.

Frontend

This starter kit provides two frontend containers:

  • frontend
    container powered by the WP REST API is server-side rendered using Next.js, and exposed on port
    3000
    : http://localhost:3000
  • frontend-graphql
    container powered by GraphQL, exposed on port
    3001
    : http://localhost:3001

Here's what the frontend looks like:

Frontend Screencast

You can follow the

yarn start
output by running docker-compose
logs
command followed by the container name. For example:
docker-compose logs -f frontend

If you need to restart that process, restart the container:

docker-compose restart frontend

PS: Browsing the Next.js frontend in development mode is relatively slow due to the fact that pages are being built on demand. In a production environment, there would be a significant improvement in page load.

Backend

The

wp-headless
container exposes Apache on host port
8080
:

This container includes some development tools:

docker exec wp-headless composer --help
docker exec wp-headless phpcbf --help
docker exec wp-headless phpcs --help
docker exec wp-headless phpunit --help
docker exec wp-headless wp --info

Apache/PHP logs are available via

docker-compose logs -f wp-headless
.

Database

The

db-headless
container exposes MySQL on host port
3307
:
mysql -uwp_headless -pwp_headless -h127.0.0.1 -P3307 wp_headless

You can also run a mysql shell on the container:

docker exec db-headless mysql -hdb-headless -uwp_headless -pwp_headless wp_headless

Reinstall/Import

To reinstall WordPress from scratch, run:

docker exec wp-headless wp db reset --yes && docker exec wp-headless install_wordpress

To import data from a mysqldump with

mysql
, run:
docker exec db-headless mysql -hdb-headless -uwp_headless -pwp_headless wp_headless < example.sql
docker exec wp-headless wp search-replace https://example.com http://localhost:8080

Import Data from Another WordPress Installation

You can use a plugin called WP Migrate DB Pro to connect to another WordPress installation and import data from it. (A Pro license will be required.)

To do so, first set

MIGRATEDB_LICENSE
&
MIGRATEDB_FROM
in
.env
and recreate containers to enact the changes.
docker-compose up -d

Then run the import script:

docker exec wp-headless migratedb_import

If you need more advanced functionality check out the available WP-CLI commands:

docker exec wp-headless wp help migratedb

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.

The primary theme code is located in

wordpress/wp-content/themes/postlight-headless-wp
.

You can also modify and extend the GraphQL API, An example of creating a Custom Type and registering a Resolver is located in:

wordpress/wp-content/themes/postlight-headless-wp/inc/graphql
.

REST & GraphQL JWT Authentication

To give WordPress users the ability to sign in via the frontend app, use something like the WordPress Salt generator to generate a secret for JWT, then define it in

wp-config.php

For the REST API:

define('JWT_AUTH_SECRET_KEY', 'your-secret-here');

For the GraphQL API:

define( 'GRAPHQL_JWT_AUTH_SECRET_KEY', 'your-secret-here');

Make sure to read the JWT REST and JWT GraphQL documentation for more info.

Linting

Remember to lint your code as you go.

To lint WordPress theme modifications, you can use PHP_CodeSniffer like this:

docker exec -w /var/www/html/wp-content/themes/postlight-headless-wp wp-headless phpcs -v .

You may also attempt to autofix PHPCS errors:

docker exec -w /var/www/html/wp-content/themes/postlight-headless-wp wp-headless phpcbf -v .

To lint and format the JavaScript apps, both Prettier and ESLint configuration files are included.

Hosting

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.

Troubleshooting Common Errors

Breaking Change Alert - Docker

If you had the project already setup and then updated to a commit newer than

99b4d7b
, you will need to go through the installation process again because the project was migrated to Docker. You will need to also migrate MySQL data to the new MySQL db container.

Docker Caching

In some cases, you need to delete the

wp-headless
image (not only the container) and rebuild it.

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!


πŸ”¬ A Labs project from your friends at Postlight. Happy coding!

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.