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