WP Refine Plugin

⚡Features⚡

Easy to Use
Git clone this repository in wp-content/plugins/ and npm run bootstrap, npm run dev, that's all the steps
Integrate with WordPress RestFul API
By default, the API_URL would be {site_url}/wp-json} which is set in inc/admin.php
CRUD utility function
Default with getPost Example, check more utilities in Refine
Integrate with JWT
We use usefulteam/jwt-auth in composer, every time a WordPress user logged in, he will get JWT (for call API, if the user has enough capability) automatically.
HMR (Hot Module Reload) for PHP
By using vite-plugin-live-reload, the page will auto reload while PHP files changed
Multi-React-App in one plugin
By default, we render 2 React App, 1 is for front-end page, and 1 is for admin page. You can add more React App in js/src/main.tsx

Before getting start

Tech stacks (knowledge you need to have)

Front-end

Vite - build tool
Refine - React Admin Framework with lots of useful utilities
React v18
TypeScript - compile project with type safe
Tailwind v3 - you can install any UI library, like Ant Design, MUI, Chakra...etc
SCSS
React Query v4 - managing API status
React Router v6 - front-end router, we use #️⃣hash router by default which is compatible with WordPress's router

Back-end

usefulteam/jwt-auth - get JWT if a wordpress user is logged in

Install

Clone this repository into /wp-content/plugins.

cd  {your-project}/wp-content/plugins
git clone https://github.com/j7-dev/wp-react-plugin.git
cd wp-react-plugin

Install dependencies:

⭐ You must have Composer installed

npm run bootstrap # This will run `npm install` & `composer install`
npm run dev

Change the API url to your project in .env.development

APP_NAME='My App'
# ↑ Your App's Name

VITE_RENDER_ID_1='my-app'
# by default, the footer will render a <div id="my-app"></div> container at front-end page footer
# You can custom the render id

  VITE_RENDER_ID_2='my-app-metabox'
# by default, in admin page, when you want to add/edit a new post with post_type=my-app, another React App will render in metabox
  # Remove it if you don't need a metabox React App

VITE_API_TIMEOUT='30000'

Activate the plugin from WordPress admin /wp-admin.
Visit your site's homepage and see the rendered application on the footer 🚀🚀🚀
Click Count, Get Post Example button to ensure the State and the WordPress API works
Check the admin page, you will see a new post type My App and a new menu My App
Click Add New, you will see a React App in the metabox
🎉🎉🎉 Enjoy the dev 🎉🎉🎉

Any Suggestion ?

Welcome to open issue and start a discussion 🎉🎉🎉

If this project is useful for you, please give me a github star ⭐

j7-dev/wp-refine-plugin