PWA fixed
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 rebase
This commit is contained in:
71
docs/development.md
Normal file
71
docs/development.md
Normal file
@@ -0,0 +1,71 @@
|
||||
# Table of Contents
|
||||
1. [Developer Setup Guide](#developer-setup-guide)
|
||||
2. [Modify the app](#modify-the-app)
|
||||
3. [Test the PWA locally](#test-the-pwa-locally)
|
||||
4. [Commit & Push](#commit--push)
|
||||
|
||||
## 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
|
||||
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
## Development Server
|
||||
|
||||
```bash
|
||||
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
|
||||
|
||||
1. **State Management**: Use Vuex 4 for state management. All state should be handled through the store in `src/store/`.
|
||||
2. **Components**: Create reusable components in `src/components/`. Use Vue 3 Composition API for component logic.
|
||||
3. **Routing**: Define routes in `src/router/index.js` using Vue Router 4.
|
||||
4. **Styling**: Use Tailwind CSS for styling. Additional styles can be added in `src/assets/styles/`.
|
||||
5. **Services**: Place business logic and external API calls in `src/services/`.
|
||||
6. **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/](http://localhost:8080/)
|
||||
|
||||
### Commit & Push
|
||||
Stage changes, commit and push
|
||||
```bash
|
||||
git add .
|
||||
git commit -m 'My cool feature'
|
||||
git push
|
||||
```
|
||||
Reference in New Issue
Block a user