cpu
4cae455892
added systemd service howto traefik nginix set_real_ip_from improved readme visuals fixed on mobile labels removed updated readme fixed visuals overlay for the hotkey disable screen lock clean up git precommit hooks clean up clean up update check for update feature added build-time information fixed date clean up added hook script fix fix fix hooks fixed webhook setup players stay in run all timers mode mqtt mqtt allways connected mqtt messages work capturing mqtt in edit player mqtt in Setup updated readme state of the mqtt Global Pass turn offline mode docs: update documentation to reflect current codebase and MQTT features - Update README.md with global MQTT commands - Enhance architecture.md with comprehensive data model and MQTT state - Update development.md with project structure and workflow - Remove redundant script listings - Fix formatting and organization
1.9 KiB
1.9 KiB
Table of Contents
Developer Setup Guide
Project Structure
The project follows a Vue.js 3 architecture with the following key directories:
src/
├── assets/ # Static assets
├── components/ # Reusable Vue components
├── services/ # Business logic and API services
├── store/ # Vuex 4 state management
├── utils/ # Utility functions
├── views/ # Page-level components
├── router/ # Vue Router configuration
└── App.vue # Main application component
Prerequisites
- Node.js (LTS version recommended)
- npm (comes with Node.js)
Installation
npm install
Development Server
npm run dev
This will start the development server with hot module replacement. The application is built using Vite, which provides:
- Fast cold start
- Instant HMR
- Optimized build process
- Modern ES module support
Development Workflow
- State Management: Use Vuex 4 for state management. All state should be handled through the store in
src/store/. - Components: Create reusable components in
src/components/. Use Vue 3 Composition API for component logic. - Routing: Define routes in
src/router/index.jsusing Vue Router 4. - Styling: Use Tailwind CSS for styling. Additional styles can be added in
src/assets/styles/. - Services: Place business logic and external API calls in
src/services/. - Utils: Common utility functions should be placed in
src/utils/.
Modify the app
Make code changes...
Test the PWA locally
Open it in your browser: http://localhost:8080/
Commit & Push
Stage changes, commit and push
git add .
git commit -m 'My cool feature'
git push