Skip to content

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

License

Notifications You must be signed in to change notification settings

j7-dev/wp-refine-plugin

Repository files navigation

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