Development Server
The CAFH Platform uses a combined frontend and backend development server powered by Vite and Express.Start the Server
tsx server.ts, which:
- Starts the Express backend on port 3000
- Initializes the Vite development server
- Enables Hot Module Replacement (HMR) for React components
- Starts the email queue worker
The server runs on
http://localhost:3000 by default.Available Scripts
Frompackage.json:
Script Details
tsx server.tsStarts the development server with hot reload. TypeScript files are executed directly without compilation.
vite buildBuilds the frontend for production. Output goes to
dist/ directory.vite previewPreviews the production build locally before deployment.
tsc —noEmitType-checks TypeScript files without emitting output. Catches type errors before runtime.
Development Workflow
Access the application
Open your browser to:
- Home: http://localhost:3000
- Admin: http://localhost:3000/#/admin
- Member: http://localhost:3000/#/member/dashboard
Login with demo credentials
- Admin
- Member
- Email:
[email protected] - Password:
admin123 - Access: Full platform access
Make changes
Edit any Save the file and the browser updates instantly.
.tsx or .ts file. The browser will automatically reload thanks to HMR.Example: Edit App.tsx to add a new route:App.tsx
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
Data Persistence
The platform useslocalStorage 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_v1cafh_contacts_v1cafh_events_v1
Reset Data
To reset the database to defaults: The next page load will reinitialize with mock data fromconstants.ts.
Backend API Endpoints
The Express server provides these API endpoints:Email Queue Worker
The queue processes emails every 30 seconds:server.ts
Testing Different User Roles
- SUPER_ADMIN
- MEMBER
- GUEST
Default admin account has full access:
- All admin modules
- User management
- Site settings
- CRM and campaigns
Debugging
Browser DevTools
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
Common Issues
Port already in use
Port already in use
Change the port in
vite.config.ts:TypeScript errors
TypeScript errors
Run linter to identify issues:Common fixes:
- Add missing type imports
- Fix type mismatches
- Update
types.tsinterfaces
Data not persisting
Data not persisting
- Check browser localStorage limits (5-10MB)
- Verify
db.init()is called inApp.tsx - Clear and reinitialize if corrupted
HMR not working
HMR not working
- 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