create-wp-refine-plugin
v4.0.0
Published
## ⚡Features⚡
Downloads
21
Readme
WP Refine Plugin
⚡Features⚡
Easy to Use Git clone this repository in
wp-content/plugins/
andnpm run bootstrap
,npm run dev
, that's all the stepsIntegrate with WordPress RestFul API By default, the
API_URL
would be{site_url}/wp-json}
which is set ininc/admin.php
CRUD utility function Default with
getPost
Example, check more utilities in RefineIntegrate 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 changedMulti-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-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 worksCheck 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 🎉🎉🎉
Any Suggestion ?
Welcome to open issue and start a discussion 🎉🎉🎉
If this project is useful for you, please give me a github star ⭐
Reference
- Inspired by Vite for WP
- Refine
- WordPress REST API Handbook