Installation Guide

Follow this step-by-step guide to install and configure the KiviCare Extended Version for development.

Before You Begin

✅ Ensure you have completed the Prerequisites.

Your system must have:

• Node.js installed
• PHP installed
• Composer installed
• A working WordPress setup

Installation Steps

Step 1: Extract the Plugin

Extract the KiviCare Extended Version plugin into your WordPress plugins directory.

# Navigate to WordPress plugins directory
cd /path/to/wordpress/wp-content/plugins/

# Extract the ZIP file
unzip kivicare-clinic-management-system.zip

# Navigate into the plugin directory
cd kivicare-clinic-management-system

Expected directory structure:

Step 2: Install PHP Dependencies

Install backend dependencies using Composer:

composer install

This installs:

• PHP autoloader
• Required PHP packages
• Development dependencies

Expected output:

Step 3: Install Node Dependencies

Install frontend dependencies using npm or bun.

Using npm

npm install

Using bun (faster)

bun install

This installs:

• React and related libraries
• Vite build tool
• TanStack Query
• Bootstrap and UI components
• Development tools

⏱ Estimated time: 2–5 minutes (depending on internet speed)

Expected output:

Step 4: Activate the Plugin

1. Log in to your WordPress Admin Panel
2. Go to Plugins → Installed Plugins
3. Find KiviCare – Clinic & Patient Management System
4. Click Activate

Alternative (WP-CLI)

wp plugin activate kivicare-clinic-management-system

Step 5: Verify Installation

Ensure all dependencies are correctly installed:

# Check node_modules
ls -la node_modules | head -5

# Check vendor directory
ls -la vendor | head -5

# Verify available scripts
npm run

Expected script’s output:

Step 6: Start the Development Server

Run the Vite development server:

npm run dev

Expected output:

🎉 The development server is now running.

Step 7: Access the Dashboard

1. Open your WordPress site in a browser
2. Go to KiviCare Dashboard (from the WordPress admin menu)
3. Confirm the React dashboard loads correctly
4. Check the browser console — no errors should appear

Hot Module Replacement (HMR) is now active. Any changes to React files will automatically reload in the browser.

Install KiviCare Pro (Optional)

If you also have KiviCare Pro:

cd /path/to/wordpress/wp-content/plugins/
unzip kivicare-pro.zip
cd kivicare-pro
composer install

Note: The Pro plugin uses the same React build as the Lite version.

Troubleshooting Installation

Issue: composer install fails

Solution: Check the PHP version

php --version
# Must be 8.0 or higher

Issue: npm install fails

Solutions:

1. Clear npm cache

npm cache clean --force
rm -rf node_modules package-lock.json
npm install

2. Use a different registry

npm install --registry=https://registry.npmjs.org/

3. Use bun instead

bun install

Issue: Port 8080 is already in use

Change the port in vite.config.js:

server: {
  port: 3000,
}

Issue: Dev server runs, but pages don’t load

Try the following:

• Verify the WordPress site URL
• Check if window.kc_frontend is defined (browser console)
• Clear WordPress cache
• Deactivate and reactivate the plugin

Issue: Permission denied errors

Fix file permissions:

cd /path/to/wordpress/wp-content/plugins/kivicare-clinic-management-system
chmod -R 755 .
chown -R www-data:www-data .   # Linux
chown -R _www:_www .           # macOS

Installation Checklist

Make sure all steps are completed:

• Plugin activated in WordPress
• composer install completed successfully
• npm install completed successfully
• npm run dev starts without errors
• Dashboard loads in browser
• No browser console errors
• HMR works (file changes reload instantly)