Passport Web Frontend

This is the web frontend for the Passport authentication system, built with Vue.js and Vite.

Prerequisites

Before running the web frontend, ensure you have the following installed:

• Node.js (v23 or higher)
• npm or yarn
• Python environment with Django backend

Setup Instructions

1. Backend Setup

First, ensure the Django backend is properly set up:

# Install Django and dependencies
pip install -r requirements.txt

# Set environment variables
export DRYCC_DATABASE_URL=postgres://postgres:@127.0.0.1:5432/passport
export VUE_APP_BASE_URL=http://localhost:8000/
export CSRF_TRUSTED_ORIGINS=http://localhost:5173

# Start the Django development server
python manage.py runserver

2. Frontend Setup

Navigate to the web directory and install dependencies:

cd web
npm install

3. Development Server

Start the development server:

npm run dev -- --port 5173

The application will be available at http://localhost:5173.

Available Scripts

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

Environment Variables

The following environment variables are required:

• VUE_APP_BASE_URL - The base URL of the Django backend API
• CSRF_TRUSTED_ORIGINS - Trusted origins for CSRF protection

Project Structure

web/
├── public/          # Static assets
├── src/
│   ├── assets/      # Images and other assets
│   ├── components/  # Vue components
│   ├── views/       # Page components
│   ├── services/    # API service modules
│   ├── router/      # Vue Router configuration
│   ├── utils/       # Utility functions
│   └── lang/        # Internationalization
├── package.json     # Project dependencies
└── vite.config.js   # Vite configuration

Contributing

Please refer to the main project documentation for contribution guidelines.