WP React Starter: WordPress React Boilerplate

DEPRECATED: WP React Starter was a “research project” of devowl.io for the development of our WordPress plugins. Unfortunately, we don’t have enough resources to regularly contribute the developments of our private monorepo to WP React Starter. You are welcome to continue using or forking this project, but it will no longer be updated or extended with new features, structures, etc.

Create (multiple) WordPress plugins that use React, TypeScript, and object-oriented PHP in a fully customizable Docker development environment, commited in a monorepo.

Wow, I didn’t know the WordPress plugin development could look like this!

🚀 Instant no-config plugin creation with create-wp-react-app 🔥

🤗 Why WordPress plugin development is fun with WP React Starter

Everyone tells us: WordPress plugins are a mess. Our answer is always: Let’s take this opportunity to make the system that powers every third website on the Internet better.

With WP React Starter we have created a modern WordPress development boilerplate which contains everything you are used to from modern web development projects:

• React Frontend for reactive user interfaces (with PHP fallback for server-side rendering) - React is a part of WordPress since the Gutenberg release
• TypeScript for typesafe frontend development
• PHP in an object-oriented style with namespaces for better backend code
• Docker development environment to develop all you plugins without manual setup steps
• CI/CD integration for automated code quality checks and release management (publish on wordpress.org or wherever you want)

Does that sound like crappy WordPress plugin development or what you really have been looking for for your plugins for a long time? Let’s start today with your first WordPress plugin! Create it within 5 minutes, thanks to our CLI create-wp-react-app

Client-Side Features

Familiar React API & patterns (ES6) with TypeScript

• React with Babel env preset + Hooks
• MobX for state management
• webpack build for assets
• core-js puts automatically needed polyfills to your distribution files
• Sourcemap generation for debugging purposes (CSS and TypeScript files)
• SASS stylesheets compiler (.scss files) for next-gen CSS
• PostCSS for transforming SCSS (including autoprefixing) to CSS
• Minified sources automatically generated for production (JS, CSS)
• Grunt for automation tasks (build the installable plugin)
• ESLint predefined configuration for proper linting
• TypeDoc for JavaScript Documentation
• WP HookDoc for Filters & Actions Documentation
• Translation (i18n) with automatic generation of .pot files
• Add-On Development (multiple WordPress plugins), based on a predefined utils package that allows you to share TypeScript types across plugins.
• Admin backend components, in this case an own page with a button (admin.ts)
• Frontend components, in this case a simple widget (widget.ts)

Server-Side Features

OOP-style for building a high-quality PHP development

• PHP >= 5.6 required: An admin notice is showed when not available
• WordPress >= 5.2 required: An admin notice is showed when not available with a link to the updater
• PHP CodeSniffer predefined configuration for proper linting
• Namespace support
• Autloading classes in connection with namespaces
• WP REST API v2 for API programming, no longer use admin-ajax.php for CRUD operations
• SCRIPT_DEBUG enables not-minified sources for debug sources (use in connection with yarn build:js:development)
• Cachebuster for public resources
• Automatic generation of .pot files for translating (i18n) the backend plugin
• phpDocumentor for PHP Documentation
• apiDoc for API Documentation

Automation Features

Avoid repetitive work and develop more feature

• Workspace creation with end-to-end setup: create-wp-react-app create-workspace
• Plugin creation with monorepo integration: create-wp-react-app create-plugin
• Package creation with monorepo integration: create-wp-react-app create-package
• Predefined GitLab CI example for Continous Integration (read more)
• Scoping your PHP coding and dependencies so they are isolated (avoid dependency version conflicts)
• Packaging and publishing of you plugin wordpress.org (read more)
• license-checker for automated 3th-party-code license scanning and compliance check

Developer Experience Features

Providing the right development environment for high quality plugins

• Built on top of Visual Studio Code (extensions are automatically installed)
• All your plugins within yarn workspaces
• Prettier for automatic JavaScript / TypeScript code formatting on save (VSCode required)
• PHP CodeSniffer’s cbf for automatic PHP code formatting on save (VSCode required)
• Husky integration for code formatting before Git commit - never have ugly code in your repository
• Husky is also used for commitlint to become a common commit message style in your repository
• lerna for semantic versioning and changelog generation
• webpackbar so you can get a real progress bar while development
• Docker for a local development environment
• Predefined WordPress Stubs so you get autocompletion for WordPress classes and functions, e. g. add_action
• Within the Docker environment you have WP-CLI available
• Predefined Review Apps example for branch deployment, read more here
• Predefined VSCode PHP debugging environment

Testing Features

Cover your source code with test code to to guarantee the last piece quality

• PHPUnit for PHP unit testing
• Jest for TypeScript unit- and snapshot testing
• Collect code coverage reports with a single command in each package
• Automatically push coverage reports to codecov.io
• Cypress for End-To-End (E2E) tests
• Gherkin syntax to write E2E features (combined with Cypress)
• Automatically failure a GitLab CI pipeline if a coverage percent is not reached (threshold)
• 🚀 The complete test suite is integrated in GitLab CI

Documentation

You want to dive deep into the documentation of WP React Starter? Check, we convinced another developer to write high quality WordPress plugins. 🚀

Usage

• Getting started
• Folder structure
  • Root
  • Plugin
• Available commands
  • Root
  • Plugin
  • Package

PHP development

• Predefined constants
• Predefined classes
• Example implementations
• Add new classes, hooks and libraries
• Localization
• Debugging

TypeScript development

• Utils package
• Example implementations
• Add external library
• Consume PHP variable
• Using entrypoints
• Localization

Advanced

• Build production plugin
• How cachebuster works
• Tests
• Extend Compose and Webpack
• Create package
• Create Add-On
• Persistent database snapshot
• Showcase
• License checker

GitLab integration

• Predefined pipeline
• Extend GitLab CI pipeline
• Use own runner
• Review applications
• Deploy wordpress.org

Licensing

Thank you for your interest in WP React Starter. This boilerplate was developed organically over years and we at devowl.io bring all our experience from best-selling WordPress plugins like WordPress Real Media Library as well as customer web development orders to this project. With WP React Starter you get dozens of hundred working hours compressed into one easy-to-use solution.

We would like to share our knowledge and solution with you to make the development of WordPress plugins more professional. But we are even happier if you also share your knowledge to make this project even better.

WP React Starter is licensed partly under GNU General Public License v3.0 (GPL v3.0 or later) and partly under our ISC License (ISC). Feel free to develop high-quality WordPress plugins at light speed with WP React Starter in real projects. Don’t worry, it’s free to use for all non-commercial and commercial WordPress plugins!