j7-dev / wp-refine-plugin

Wordpress Plugin with Refine.dev + Vite + Antd + Tailwind + React Router

WP Refine Plugin

⚡Features⚡

1. Easy to Use
   Git clone this repository in wp-content/plugins/ and npm run bootstrap, npm run dev, that's all the steps

2. Integrate with WordPress RestFul API
   By default, the API_URL would be {site_url}/wp-json} which is set in inc/admin.php

3. CRUD utility function
   Default with getPost Example, check more utilities in Refine

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

5. HMR (Hot Module Reload) for PHP
   By using vite-plugin-live-reload, the page will auto reload while PHP files changed

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

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

Back-end

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

Install

1. Clone this repository into /wp-content/plugins.

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

2. Install dependencies:

   ⭐ You must have Composer installed

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

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

   APP_NAME='My Refine App'
   # ↑ Your App's Name
   
   APP1_SELECTOR='my-refine-app'
   # by default, the footer will render a <div id="my-refine-app"></div> container at front-end page footer
   # You can custom the render id
   
     APP2_SELECTOR='my-refine-app-metabox'
   # by default, in admin page, when you want to add/edit a new post with post_type=my-refine-app, another React App will render in metabox
     # Remove it if you don't need a metabox React App
   
   VITE_API_TIMEOUT='30000'

4. Activate the plugin from WordPress admin /wp-admin.

   

5. Visit your site's homepage and see the rendered application on the footer 🚀🚀🚀

   

6. Click Count, Get Post Example button to ensure the State and the WordPress API works

   

7. Check the admin page, you will see a new post type My Refine App and a new menu My Refine App

   

8. Click Add New, you will see a React App in the metabox

   

9. 🎉🎉🎉 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 ⭐

---

Reference

1. Inspired by Vite for WP
2. Refine
3. WordPress REST API Handbook

wp-refine-plugin's Issues

Need examples to work with plugin

Hi,
First, thank you for this plugin!

Can you please provide some examples of how to work with this plugin?

1. i want to create some page in admin or in front that users with specific role can access this page.
   If user not login. Page will show login form. if user login and don't have the right role he will see message "access denied"

2. same for Capabilities. How to work with: user "can edit", "can delete" etc...

3. example of how to work with custom post types

4. example of how to work direct with wp db

Thanks