Getting started

Prerequisites

Please make sure that the following components are installed on your local computer:

• PHP: PHP runtime (version >= 7.2)

• Node.js: JavaScript runtime (version >= 10.17)

• Yarn: Dependency manager for JavaScript (version >= 1.19)

• Composer: Dependency manager for PHP (version >= 1.9)

• Docker: Container Platform CLI docker and docker-compose (Docker Desktop version >= 2.1)

• WP-CLI: CLI for for WordPress wp

• GitLab: Sign up for your Git repository and make predefined CI/CD functionality work

• (optional) Visual Studio Code: IDE with the best integration for tools used in wp-react-starter

The boilerplate is not yet fully supported on Windows systems. Feel free to contribute or use a Windows Subsystem 2 for Linux (WSL2).

Installation

create-wp-react-app allows you to create workspaces, plugins and packages with a single command. Let's install the CLI:

$ yarn global add create-wp-react-app

Run this command to install create-wp-react-app globally on your system. Afterwards you can then create your first workspace (in this context, the workspace means the folder where your multipackage repository is stored).

Create workspace

$ create-wp-react-app create-workspace

Use this command to create the workspace for your WordPress plugin development. This command also executes the create-wp-react-app create-plugin command to create your first plugin. You will be asked to fill in the necessary information about your workspace and the first plugin. Once you have completed the prompts, the command runs the setup and prepares the repository.

Awesome! You have created your first workspace and your first plugin. You can create as many plugins as you want in one workspace. If you are using the GitLab CI the first pipeline execution can take a while.

Do you get an error while bootstrap, docker initialization or something else? Do not worry, the main issue are missing dependencies. Just navigate to the created workspace with cd your-workspace and rerun yarn bootstrap and yarn docker:start - after you have installed the missing dependencies.

You can find out how to create additional plugins or packages in further articles:

Create packageCreate Add-On

Remote development

If you are developing on a remote system and using VSCode already, you need to use the Remote SSH extension. Simply connect to your server and install all required VSCode extensions. Navigate to your workspace folder and create a new .env file with the following content:

WP_LOCAL_INSTALL_URL=http://<your-ip>:<your-port>/

Instead of <your-ip> and your-port use your remote development IP and defined WordPress port. Afterwards you can yarn docker:start and use the boilerplate as usual.

Open WordPress

Open a new terminal in the newly created workspace. Run yarn docker:start and Docker will start the complete WordPress environment with your plugin activated on localhost:{your-port}. Open a web browser, navigate to localhost:{your-port}/wp-admin and enter the following credentials:

Username: wordpress Password: wordpress

Initial commit

If you do an initial commit to your Git repository make sure to use git commit [...] --no-verify to skip hooks. This is needed because the boilerplate has some non-verifiable files in common/create-wp-react-app.