WordPress Starter Plugin - React

A WordPress Plugin Starter featuring React, Webpack, Typescript and Docker for a full stack development.

Description

This is a starting point for someone who wants to develop a new Plugin for WordPress using React, Typescript and Webpack. It uses Docker for a quick and easy WordPress development stack.

What makes this so great? With a simple docker-compose up -d --build command, you have a full WordPress instance running, with a plugin already activated, AND, you can build a public, or admin (private) pages, using React with React Refresh enabled.

The Docker container image used is a custom image built for development. See php-nginx-mysql-server for more details and how to customize it even further.

src: Everything in this folder gets compiled into production code into a folder name that matches the package name. See notes below.

Why does this exist?

I wanted to develop a couple plugins for clients that are efficient, fast, and use the same base code functionality for easier maintainability. Using Webpack allows quicker and automatied CSS & JavaScript cleanup, minification, dynamic naming, all while keeping development code seperate from production code. Using Docker and this package, I can spin up a complete WordPress site and start coding a new plugin in a clean environment within about a minute. You can even import existing WordPress database/content by modifying the docker-compose file. See https://github.com/maddog986/php-nginx-mysql-server for more information.

Some Notes

PHP file names and variable references by default are "wordpress_plugin". This will be replaced dynamically by changing the package.json "name" field.

package.json Change "name" to the plugin name you desire, but keep it in lowercase, replace spaces with underscore, and no special characters. This is used for code output and folder name.

docker-compose.yml: has a few settings that can be customized for local development url. If you change ports or WEBSITE_HOSTNAME you will have to modify webpack.config.js to match. If you change the package name make sure you update the volume path to match the new package name.

site The folder "site" will be generated by npm run build. This folder is where the plugin is built and is used by the Docker container to serve up the WordPress site.

react The folder "react" is where you can store all your react code.

How to build

First step is to install all the dependencies to build the code.

npm install

Next is to build the code into wordpress_plugin:

npm run build

Now we can launch the Docker container to spin up a full WordPress install. This calls upon the docker-compose.yml file with some minimal configs.

docker-compose up -d --build

You should now be able to open your browser and go to http://localhost:8084

Development

Because of an issue with webpack and hotreload only supporting one "entry point" to work correctly, there are now two ways to do development with hotreload.

npm run servePublic

or

npm run servePrivate

All the commands above use the webpack dev server to proxy and you just have to open your browser to http://localhost:3000

To generate production ready code into the [package name] folder (default is wordpress_plugin):

npm run build