REPOSITORY OVERVIEW

Live repository statistics

★ 402Stars

⑂ 49Forks

◯ 10Open issues

◉ 402Watchers

README preview

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

wp-react-starter