Introducing Postlight’s WordPress + React Starter Kit

The Business Case: Why Headless WordPress?

  • Your editorial team knows and loves WordPress, but your product and tech teams want to use modern web development tools and paradigms to build the web site and/or mobile app.
  • You want to separate your site’s frontend from the backend to decouple your platform’s main pieces, and make it more resilient and flexible.
  • You want your WordPress site’s frontend to be fast and infinitely scalable. (So much depends on your particular configuration, but anecdotally, we saw a significant response time decrease on a client site after transitioning the frontend to React.)
  • Your product and engineering teams want to focus on frontend innovations and solving new problems specific to your business, and leverage all the content management solutions WordPress already offers. (Ain’t no shame in it.)
  • Your content doesn’t all live in WordPress. Your site or app needs to talk to several APIs, your WordPress content being just one of them, and it’s way easier to do that with a JavaScript frontend.
  • You’re ready to migrate your site from WordPress to a new decoupled CMS, but want to do so piecemeal — first the frontend, and then later, the backend.
  • You’re building a brand new JavaScript-based site on a tight schedule, and you don’t have the time to build the CMS that powers it from scratch.

The Technical Details: How To Do Headless WordPress?

  • An installer script which bootstraps a core WordPress installation. Note: This script installs MySQL and WordPress locally; we find virtual machines wonderful in concept but slow and cumbersome to work with in practice.
  • The WordPress plugins you need to set up custom post types and custom fields (Advanced Custom Fields Pro and Custom Post Type UI).
  • WordPress 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, plus 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. For many WordPress-powered sites, SEO (search engine optimization) is paramount, and some web crawlers (like Google News) can’t parse sites that aren’t plain old HTML. Next.js makes server-side rendering for React easy, so that you’re getting the SEO benefits of a rendered, HTML page as well as the possibilities of client-side React. Note: for smaller-scale sites, static site generators or purely client-side React might meet all your product requirements.
  • A frontend app Docker container and scripts to manage it, for easily deploying it to any hosting provider with Docker support (AWS Elastic Beanstalk, Google Cloud, or Now are all great options).

A Work-in-Progress: Pull Requests Welcome

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store