Skip to content

ynput/ayon-frontend

Repository files navigation

AYON Frontend

A modern React application for the AYON project management system. Built with Vite, TypeScript, and the AYON React Components library.

Prerequisites

  • Node.js 16+
  • Yarn or npm package manager
  • A running AYON server instance

Getting Started

1. Install Dependencies

yarn install

2. Environment Setup

Create a .env.local file in the root directory with the necessary configuration:

SERVER_URL=http://localhost:5000

Replace http://localhost:5000 with your actual AYON server URL.

3. Start Development Server

yarn dev

The application will be available at http://localhost:3000

Building

# Build for production
yarn build

# Preview the production build locally
yarn preview

Code Quality

# Run ESLint
yarn lint

# Fix ESLint issues
yarn lint:fix

# Format code with Prettier
yarn format

API Code Generation

# Generate REST API types from OpenAPI schema
yarn generate-rest

# Download OpenAPI schema and generate types
yarn generate-rest-all

# Generate GraphQL types from schema
yarn generate-gql

Testing

# Run Playwright tests
yarn test

# Run tests in UI mode
yarn test-ui

# Run authentication setup tests
yarn test-auth

# View test report
yarn test-report

Project Structure

  • src/ - Main application source code

    • components/ - Reusable React components
    • containers/ - Container/smart components
    • pages/ - Page components
    • hooks/ - Custom React hooks
    • context/ - React context providers
    • services/ - API and external services
    • types/ - TypeScript type definitions
    • theme/ - Theme and styling
    • helpers/ - Utility functions
  • gen/ - Code generation configuration and scripts

  • tests/ - Playwright end-to-end tests

  • shared/ - Shared package for components and utilities

Environment Variables

The following environment variables should be configured in .env.local:

Variable Description Example
SERVER_URL AYON server base URL http://localhost:8000

Development Tips

  • Use yarn lint:fix to automatically fix linting issues
  • Use yarn format to format code according to project standards
  • Run yarn test before submitting pull requests
  • The project uses TypeScript - ensure type safety in your code

License

See LICENSE file for details.

About

Codebase of AYON server web interface

Topics

Resources

License

Code of conduct

Contributing

Stars

Watchers

Forks

Packages

 
 
 

Contributors