-
Easy to Use
Git clone this repository inwp-content/plugins/
andnpm run bootstrap
,npm run dev
, that's all the steps -
Integrate with WordPress RestFul API
By default, theAPI_URL
would be{site_url}/wp-json}
which is set ininc/admin.php
-
CRUD utility function
Default withgetPost
Example, check more utilities in Refine -
Integrate with JWT
We useusefulteam/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 usingvite-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 injs/src/main.tsx
Tech stacks (knowledge you need to have)
- 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
- usefulteam/jwt-auth - get JWT if a wordpress user is logged in
-
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
-
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 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'
-
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 Refine App
and a new menuMy Refine App
-
Click Add New, you will see a React App in the metabox
-
🎉🎉🎉 Enjoy the dev 🎉🎉🎉
Welcome to open issue and start a discussion 🎉🎉🎉
If this project is useful for you, please give me a github star ⭐
- Inspired by Vite for WP
- Refine
- WordPress REST API Handbook