Development Server

This guide explains how to use the Vite Development Server with Hot Module Replacement (HMR) for fast, real-time development.

Starting the Development Server

Run:

npm run dev

Expected output:

Keep this terminal running while you develop.

What is HMR?

Hot Module Replacement (HMR) updates your application in the browser without reloading the page.

Benefits

• Instant UI updates
• Application state is preserved
• Faster development cycle

How HMR Works

1. You edit a React or CSS file
2. You save the file
3. Vite detects the change
4. The update is sent to the browser via WebSocket
5. React replaces the updated module without refreshing the page

Typical Development Workflow

1. Start the Server

cd /path/to/kivicare-clinic-management-system
npm run dev

2. Open Your Site

Visit your WordPress dashboard page where KiviCare loads:

http://your-site.local/kivicare-dashboard

3. Open Browser DevTools

Press F12 or Ctrl + Shift + I.

Verify:

• Console shows Vite connection logs
• Network tab shows files loading from localhost:8080

4. Edit a File

Example

export const Dashboard = () => {
  return <h1>My Custom Dashboard</h1>;
};

Save → the browser updates instantly.

Dev Server Configuration

Located in vite.config.js:

export default {
  server: {
    host: 'localhost',
    port: 8080,
    cors: true,
    hmr: {
      protocol: 'ws',
      host: 'localhost',
    }
  }
}

Change the Port

server: { port: 3000 }

Enable Network Access

server: {
  host: '0.0.0.0',
  port: 8080,
}

Access from other devices:

http://YOUR-IP:8080

What Happens in Dev Mode

Advantages

• Instant updates
• Easier debugging
• Clear error output

Limitations

• Slower load times
• Larger files
• Not for production use

Stopping the Server

Press:

Troubleshooting

Port Already in Use

Fix:

or change the port in vite.config.js.

HMR Not Updating

• Restart the dev server
• Hard refresh the browser
• Check WebSocket connection (DevTools → Network → WS)

Changes Not Appearing

• Confirm the dev server is running
• Verify the correct file path
• Check the terminal and console for syntax errors

White Screen

• Run npm install
• Fix build errors
• Ensure plugin is active
• Confirm window.kc_frontend exists

Best Practices

Do

• Keep the dev server running
• Monitor terminal output
• Use DevTools for debugging
• Save often

Don’t

• Use dev mode in production
• Run multiple dev servers on the same port
• Ignore errors

Dev vs Production

Terminal Shortcuts

Press h while the server runs:

Advanced: Proxy Example

export default {
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
      }
    }
  }
}

Quick Reference

Start:

npm run dev

Stop:

Kill port:

npx kill-port 8080

Next → Building for Production