Skip to main content

Development Server

The CAFH Platform uses a combined frontend and backend development server powered by Vite and Express.

Start the Server

npm run dev
This command runs tsx server.ts, which:
  1. Starts the Express backend on port 3000
  2. Initializes the Vite development server
  3. Enables Hot Module Replacement (HMR) for React components
  4. Starts the email queue worker
The server runs on http://localhost:3000 by default.

Available Scripts

From package.json:
npm run dev

Script Details

dev
command
tsx server.tsStarts the development server with hot reload. TypeScript files are executed directly without compilation.
build
command
vite buildBuilds the frontend for production. Output goes to dist/ directory.
preview
command
vite previewPreviews the production build locally before deployment.
lint
command
tsc —noEmitType-checks TypeScript files without emitting output. Catches type errors before runtime.

Development Workflow

1

Start the server

npm run dev
Wait for:
Server running on http://localhost:3000
2

Access the application

3

Login with demo credentials

4

Make changes

Edit any .tsx or .ts file. The browser will automatically reload thanks to HMR.Example: Edit App.tsx to add a new route:
App.tsx
<Route path="/test" element={
  <PublicLayoutWrapper>
    <div>Test Page</div>
  </PublicLayoutWrapper>
} />
Save the file and the browser updates instantly.
5

Check for type errors

npm run lint
Fix any TypeScript errors before committing.

Hot Module Replacement (HMR)

Vite provides instant feedback when you edit files:
  • React components: Updated without full page reload
  • CSS/Tailwind: Styles update instantly
  • TypeScript files: Recompiled and injected
  • Server files: Require manual restart
Changes to server.ts require restarting the dev server manually.

Data Persistence

The platform uses localStorage for data storage. Your data persists between page reloads but is isolated per browser.

Storage Keys

Data is stored under versioned keys like:
  • cafh_blog_v1
  • cafh_contacts_v1
  • cafh_events_v1

Reset Data

To reset the database to defaults:
1

Open browser console

Press F12 or right-click > Inspect
2

Clear localStorage

localStorage.clear();
location.reload();
The next page load will reinitialize with mock data from constants.ts.

Backend API Endpoints

The Express server provides these API endpoints:
curl http://localhost:3000/api/health

Email Queue Worker

The queue processes emails every 30 seconds:
server.ts
setInterval(processQueue, 30000);
Check the console for:
[Queue Worker] Processing 5 emails...

Testing Different User Roles

Default admin account has full access:
  • All admin modules
  • User management
  • Site settings
  • CRM and campaigns

Debugging

Browser DevTools

1

Open DevTools

Press F12 or Cmd+Option+I (Mac)
2

Check Console

Look for:
  • React errors
  • Storage operations
  • API calls
3

Inspect Network

Monitor API requests to /api/* endpoints
4

View Application Storage

Application tab > Local Storage > http://localhost:3000

Server Logs

The console shows:
  • Server startup
  • Email queue processing
  • SMTP operations
  • Vite build updates
Server running on http://localhost:3000
[Queue Worker] Processing 3 emails...
[Simulated Send] To: [email protected], Subject: Welcome

Common Issues

Change the port in vite.config.ts:
server: {
  port: 3001,
  host: '0.0.0.0',
},
Run linter to identify issues:
npm run lint
Common fixes:
  • Add missing type imports
  • Fix type mismatches
  • Update types.ts interfaces
  • Check browser localStorage limits (5-10MB)
  • Verify db.init() is called in App.tsx
  • Clear and reinitialize if corrupted
  • Restart the dev server
  • Clear browser cache
  • Check for syntax errors

Next Steps

Tech Stack

Learn about the technologies used

Folder Structure

Understand the project organization

Build Process

Build for production

Storage System

Dive into the data layer

Build docs developers (and LLMs) love