Frappe React Frontend

A modern React frontend application built with TypeScript, Vite, and TailwindCSS that connects to our existing Frappe backend.

Features

• 🔐 Authentication: Seamless integration with Frappe's authentication system
• 🎨 Modern UI: Beautiful, responsive interface built with TailwindCSS
• 🚀 Fast Development: Hot module replacement with Vite
• 📱 Mobile Ready: Responsive design that works on all devices
• 🔌 API Integration: Comprehensive API client for Frappe backend
• 🛡️ Type Safety: Full TypeScript support
• 🧭 Routing: Client-side routing with React Router

Tech Stack

• Frontend: React 19 + TypeScript + Vite
• Styling: TailwindCSS 4
• Routing: React Router DOM
• HTTP Client: Axios
• Backend: Frappe Framework (Python)

Quick Start

Prerequisites

• Node.js 18+
• npm or yarn
• Running Frappe backend

Installation

1. Clone or download this project

2. Install dependencies:

   npm install
   

3. Configure environment variables:

   cp .env.example .env
   # Edit .env with your Frappe backend details
   

4. Start development server:

   npm run dev
   

5. Open http://localhost:3000 in your browser

Project Structure

src/
├── api/
│   └── frappeClient.ts      # API client for Frappe backend
├── pages/
│   ├── Login.tsx           # Login page
│   ├── Dashboard.tsx       # Dashboard page
│   └── UsersList.tsx       # Users list page
├── components/             # Reusable React components
├── hooks/                  # Custom React hooks
├── types/                  # TypeScript type definitions
├── utils/                  # Utility functions
├── App.tsx                 # Main app component
└── main.tsx               # App entry point

Configuration

Environment Variables

Create a .env file in the root directory:

# Frappe Backend Configuration
VITE_FRAPPE_BASE_URL=http://localhost:8000
VITE_FRAPPE_SITE_NAME=your_site_name

# Development Configuration
VITE_DEV_MODE=true
VITE_API_TIMEOUT=10000

Frappe Backend Setup

1. Add the custom API endpoints to your Frappe app (see python_api_examples.py)
2. Restart your Frappe backend
3. Ensure CORS is configured for your frontend domain

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

API Integration

The app includes a comprehensive API client (frappeClient.ts) that handles:

• Authentication (login/logout)
• DocType operations (CRUD)
• File uploads
• Error handling
• Session management

Example Usage

import frappeAPI from './api/frappeClient';

// Login
const user = await frappeAPI.login({ usr: 'username', pwd: 'password' });

// Get records
const users = await frappeAPI.getDocTypeRecords('User');

// Create record
const newUser = await frappeAPI.createDocTypeRecord('User', {
  email: 'user@example.com',
  first_name: 'John',
  last_name: 'Doe'
});

Deployment

See DEPLOYMENT_GUIDE.md for detailed deployment instructions.

Quick Deployment

1. Build the app:

   npm run build
   

2. Copy dist/ contents to your Frappe app's public/ folder

3. Restart Frappe:

   bench restart
   

Customization

Adding New Pages

1. Create a new component in src/pages/
2. Add route in src/App.tsx
3. Update navigation as needed

Styling

The app uses TailwindCSS. You can:

• Modify tailwind.config.js for custom themes
• Add custom CSS in src/index.css
• Use Tailwind utility classes in components

API Endpoints

Add new API methods in src/api/frappeClient.ts and corresponding Python endpoints in your Frappe app.

Troubleshooting

Common Issues

1. CORS Errors: Check Frappe CORS configuration
2. Authentication Issues: Verify session cookies
3. API Not Found: Ensure API files are deployed and Frappe is restarted
4. Build Errors: Check Node.js version compatibility

Debug Mode

Enable debug logging by setting VITE_DEV_MODE=true in your .env file.

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

License

This project is licensed under the MIT License.

Support

For issues and questions:

1. Check the Deployment Guide
2. Review the Frappe Documentation
3. Open an issue in this repository