feat: implement integrated development mode with automatic CSS rebuilding

## Major Development Environment Improvements

### Integrated Development Mode
- Modified systemd service to use 'npm run dev' for complete development stack
- Concurrently runs both development server and Tailwind CSS watcher
- Automatic CSS rebuilding when Tailwind classes change
- Seamless hot reload for frontend, backend, and CSS changes

### Hot Reload Enhancements
- Always attempt to load chokidar for development convenience
- Enhanced file watcher initialization with better error messaging
- Added debug logging for NODE_ENV detection and chokidar availability
- Improved development experience with real-time change detection

### Development vs Production Distinction
- Development: systemd runs 'npm run dev' with NODE_ENV=development
- Production: installer creates service running 'node server/index.js' with NODE_ENV=production
- Clear separation between development and production environments
- Updated CLAUDE.md with integrated development mode documentation

### UI and Configuration Updates
- Removed DEV branding from title and header (development-specific cleanup)
- Added CLAUDE.md to .gitignore (development reference file)
- Restored proper RC branding for release candidate version

### Development Workflow Optimization
- No more manual 'npm run build:css' commands needed
- Complete hot reload: frontend JS → browser reload, CSS changes → auto-rebuild → browser reload
- Production-ready systemd service management with PolicyKit
- Optimal development experience with automatic toolchain management

This creates a seamless development environment where any change to Tailwind classes
automatically rebuilds CSS and triggers browser reload, while maintaining proper
production deployment through the existing install script.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
rcourtman
2025-06-08 12:33:30 +01:00
parent 32a3430c61
commit 431d3d346c
3 changed files with 9 additions and 9 deletions
+1
View File
@@ -86,6 +86,7 @@ jspm_packages/
RELEASE_CHECKLIST.md
AI_WORKFLOW.md
AI_WORKFLOW_SETUP.md
CLAUDE.md
# Lockfiles
# package-lock.json # Usually committed, but ignore if specified elsewhere
+6 -7
View File
@@ -63,14 +63,12 @@ const { URL } = require('url'); // <--- ADD: Import URL constructor
const axios = require('axios');
const axiosRetry = require('axios-retry').default; // Import axios-retry
// Development specific dependencies
// Hot reload dependencies (always try to load for development convenience)
let chokidar;
if (process.env.NODE_ENV === 'development') {
try {
chokidar = require('chokidar');
} catch (e) {
console.warn('chokidar is not installed. Hot reload requires chokidar: npm install --save-dev chokidar');
}
try {
chokidar = require('chokidar');
} catch (e) {
console.warn('chokidar is not installed. Hot reload requires chokidar: npm install chokidar');
}
// --- API Client Initialization ---
@@ -1639,6 +1637,7 @@ async function startServer() {
setupEnvFileWatcher();
// Setup hot reload in development mode
console.log(`[Debug] NODE_ENV: ${process.env.NODE_ENV}, chokidar available: ${!!chokidar}`);
if (process.env.NODE_ENV === 'development' && chokidar) {
const watchPaths = [
path.join(__dirname, '../src/public'), // Frontend files
+2 -2
View File
@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pulse RC - DEV</title>
<title>Pulse RC</title>
<link rel="icon" href="/logo.svg" type="image/svg+xml">
<link rel="stylesheet" href="/output.css">
<style>
@@ -491,7 +491,7 @@
<circle class="pulse-logo-inner pulse-logo-circle" cx="50" cy="50" r="25"/>
</svg>
<span class="text-lg font-medium text-gray-800 dark:text-gray-200">Pulse</span>
<span class="text-xs font-bold text-green-600 dark:text-green-400 bg-green-100 dark:bg-green-900 px-1 py-0.5 rounded ml-1">DEV</span>
<span class="text-xs font-bold text-orange-600 dark:text-orange-400 bg-orange-100 dark:bg-orange-900 px-1 py-0.5 rounded ml-1">RC</span>
</div>
<div class="header-controls flex justify-end items-center gap-4 md:flex-1">
<button id="settings-button" type="button" class="p-1 h-11 w-11 sm:h-auto sm:w-auto rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none" title="Settings" aria-label="Open settings">