maniruzzamanakash/wp-react-kit

A simple starter kit to work in WordPress with WordPress Rest API, WP-script, React, React Router, Tailwind CSS, PostCSS, Eslint, WP-Data, WP-Data Store, Typescript, React Components, i18n, CRUD, PHP OOP plugin architecture easily in a minute.

WP-React-Kit

A simple starter kit to work in WordPress plugin development using WordPress Rest API, WP-script, React, React Router, Tailwind CSS, PostCSS, Eslint, WP-Data, WP-Data Store, React Components, React CRUD, i18n, PHPUnit Test, JestUnit Test, WordPress Playwright e2e Test, Gutenberg blocks and PHP OOP plugin architecture easily in a minute.

---

What's included?

1. WordPress Rest API
2. WP-script Setup
3. React
4. React Router
5. TypeScript
6. Tailwind CSS [Nested + ]
7. Scss
8. PostCSS
9. Eslint
10. WP-Data
11. WP-Data Redux Store [Redux Saga, Generator function, Thunk, Saga Middleware]
12. React Components
13. React CRUD Operations - Create, Reade, Update, Delete, Status changes and so many...
14. Internationalization - WP i18n
15. PHPUnit Test [Test + Fix]
16. JestUnit Test
17. WordPress Playwright e2e Test
18. PHP OOP plugin architecture [Traits + Interfaces + Abstract Classes]
19. Gutenberg blocks, Dynamic blocks

Quick Start

# Clone the Git repository
git clone https://github.com/ManiruzzamanAkash/wp-react-kit.git

# Install PHP-composer dependencies [It's empty]
composer install

# Install node module packages
npm i

# Start development mode
npm start

# Start development with hot reload (Frontend components will be updated automatically if any changes are made)
npm run start:hot

# To run in production
npm run build

After running start, or build command, there will be a folder called /build will be generated at the root directory.

Activate the plugin

You need activate the plugin from plugin list page. http://localhost/wpex/wp-admin/plugins.php

Zip making process [Build, Localization, Version replace & Zip]

# One by one.
npm run build
npm run makepot
npm run version
npm run zip

# Single release command - which actually will run the above all in single command.
npm run release

After running release command, there will be a folder called /dist will be generated at the root directory with wp-react-kit.zip project files.

Run PHP Unit Test

composer run test

Run all tests by single command - PHPCS, PHPUnit

composer run test:all

Run Jest Unit Test

npm run test:unit

Run Playwright e2e Test

Playwright doc link: https://playwright.dev/docs/running-tests

Requirements:

• Must have docker installed and running by ensuring these commands -

npm run env:stop
npm run env:start

Normal e2e test

npm run test:e2e

Interactive e2e test

npm run test:e2e:watch

For more about e2e Tests running please check - https://playwright.dev/docs/running-tests

PHP Coding Standards - PHPCS

Get all errors of the project:

composer run phpcs

Fix all errors of the project:

composer run phpcbf

Full Composer test run:

composer run test:all

Browse Plugin

http://localhost/wpex/wp-admin/admin.php?page=jobplace#/

Where, /wpex is the project root folder inside /htdocs.

Or, it could be your custom processed URL.

REST API's

Postman API Link - https://www.getpostman.com/collections/f94073131fc1411506e8

REST API Documentation

1. Job Types
   • Method: GET
   • URL: http://localhost/wpex/wp-json/job-place/v1/job-types
2. Companies dropdown
   • Method: GET
   • URL: http://localhost/wpex/wp-json/job-place/v1/companies/dropdown
3. Job Lists
   • Method: GET
   • URL: http://localhost/wpex/wp-json/job-place/v1/jobs
4. Job Details
   • Method: GET
   • URL By ID: http://localhost/wpex/wp-json/job-place/v1/jobs/1
   • URL By Slug: http://localhost/wpex/wp-json/job-place/v1/jobs/first-job
5. Create Job
   • Method: POST
   • URL: http://localhost/wpex/wp-json/job-place/v1/Jobs
   • Body:

   {
       "title": "Simple Job Post",
       "slug": "simple-job-post",
       "description": "Simple job post description",
       "company_id": 1,
       "job_type_id": 2,
       "is_active": 1
   }

6. Update Job
   • Method: PUT
   • URL: http://localhost/wpex/wp-json/job-place/v1/jobs/1
   • Body:

   {
       "title": "Simple Job Post Updated",
       "slug": "simple-job-post-updated",
       "description": "Simple job post description",
       "company_id": 1,
       "job_type_id": 2,
       "is_active": 1
   }

7. Delete Jobs
   • Method: DELETE
   • URL: http://localhost/wpex/wp-json/job-place/v1/jobs
   • Body:

   {
       "ids": [1, 2]
   }

Detailed Documentation - View Detailed documentations with parameters and responses of the REST API

Version & Changelogs

v0.8.0 - 24/05/2023

1. New feature: WordPress Playwright test-e2e-utils added.
2. New feature: Some Gutenberg blocks has support for Playwright test.

v0.7.0 - 01/01/2023

1. Fix: Dynamic block renderer issue.
2. Fix: Asset registering multiple times issue.

v0.5.0 - 15/11/2022

1. New Feature : Job Create.
2. New Feature : Job Update.
3. New Feature : Job Delete.
4. New Feature : Job Status change.
5. New API: Company dropdown list.
6. New: Updated logo icon and plugin name.
7. New Components: Input Text-Editor, Improved design.
8. Refactor: Refactored codebase and updated docs.
9. New: Job type seeder.
10. Chore: Zip file generator.
11. Chore: i18n localization generator.

Version & Changelogs

v0.4.1 - 18/08/2022

1. Added Jest Unit Test Setup.
2. Added some dummy Jest Unit Test.
3. Fix #11 - Version naming while installing.

v0.4.0 - 12/08/2022

1. Added many re-usable general components.
2. Header Component refactored and re-designed.
3. WP-Data setup and made Job Store.
4. Job List Page frontend added.

v0.3.1 - 11/08/2022

1. PHPUnit Test cases setup.
2. PHPUnit Test cases added for Job Manager and Job REST API's.

v0.3.0 - 02/08/2022

1. Necessary traits to handle - sanitization, query.
2. Advanced setup for migration, seeder, REST API.
3. Jobs, Job Types REST API developed.

Options for specific files:

Get specific file errors of the project:

vendor/bin/phpcs job-place.php

Fix specific file errors of the project:

vendor/bin/phpcbf job-place.php

Versions

Simple Version with raw PHP

https://github.com/ManiruzzamanAkash/wp-react-kit/releases/tag/vSimple

Version with EsLint and i18n Setup

https://github.com/ManiruzzamanAkash/wp-react-kit/releases/tag/vSimpleEslint

Version with EsLint, i18n and React Router Setup

https://github.com/ManiruzzamanAkash/wp-react-kit/releases/tag/vReactRouter

Version with PostCSS and Tailwind CSS Setup

https://github.com/ManiruzzamanAkash/wp-react-kit/releases/tag/vTailwindCss

Version with PHPCS setup

https://github.com/ManiruzzamanAkash/wp-react-kit/releases/tag/vPHPCS

Version with PHP OOP Architecture

https://github.com/ManiruzzamanAkash/wp-react-kit/releases/tag/vPhpOOP

File structure:

Simple Version Code-Structure:

Demo with Simple Version

Demo in WordPress plugin:

Demo With React Router & Menu

Final Demos

Job List Page

Job List Page with Pagination in different primary color

Job List Page with search

Job Create Page

Job Edit Page

Job Delete

Responsive views

Gutenberg blocks

Inside src/blocks you'll find gutenberg block for ready block setup. We've made blocks like dynamic block so that future changes would not create any issue.

Demo preview -

Contribution

Contribution is open and kindly accepted. Before contributing, please check the issues tab if anything in enhancement or bug. If you want to contribute new, please create an issue first with your enhancement or feature idea. Then, fork this repository and make your Pull-Request. I'll approve, if everything goes well.

Contact

It's me, Maniruzzaman Akash. Find me at [email protected]

wp-react-kit's Issues

Uncaught Error: Undefined constant "Akash\JobPlace\Setup\CART_PULSE_VERSION"

Hello, I decided to look at your project. but ran into this error: Uncaught Error: Undefined constant "Akash\JobPlace\Setup\CART_PULSE_VERSION" includs/installer.php:65. Perhaps I made a mistake somewhere in the installation.

I just added it in the installer class and it worked. but I don't know what it should be

Enzyme is dead.

Enzyme is dead, as per the blog here. So if any one want to make use of the new shiny React-18, there is no way.
https://dev.to/wojtekmaj/enzyme-is-dead-now-what-ekl
There are other problems as well. Ref: WordPress/gutenberg#17249

It would be nice to get rid of Enzyme for once and for all.

Feature Request - Add Playwright e2e Test Environment replacing Puppeteer

What's the issue

In our plugin, the e2e tests written in puppeteer. We should update the test-cases with playwrights.

We should use @wordpress/e2e-test-utils-playwright.

Related docs - https://github.com/WordPress/gutenberg/blob/trunk/packages/e2e-test-utils-playwright/README.md

how to use this starter kit for server-side rendering

I want to use this starter kit to develop server-side rendering plugin, what should I do? Please guide me thanks

Trouble with zip.js

Hello Maniruzzaman, my compliments for the project you created.
I am running it and see how it was build.
Quick question, the zip.js file is not working correctly.
If I run it like you mentioned it in the read.me, I end up with an empty dist folder.
When I stop the code execution on the line
asyncExec(
'composer install --optimize-autoloader --no-dev',
{
it will copy the folders and files, except the vendor folder for some reason.

Anyway, wanted to let you know, as this is still a work in progress, I guess you will fix this in the near future.
I have it fixed manually for now, so I can test the plugin.

Great project, love it.
Kind regards,
Jean Paul