Developer Environment Setup
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The Nextcloud CAD Viewer developer environment is designed to support a hybrid architecture comprising a PHP backend for Nextcloud integration and a Vue.js frontend for browser-based CAD rendering. The environment setup ensures compatibility with Nextcloud 33 and focuses on integrating the @mlightcad/cad-viewer library to handle DWG and DXF files.
The setup process involves configuring both server-side dependencies via Composer and client-side tooling via NPM. Developers must ensure their local machine or development server meets specific version requirements for PHP and Node.js to maintain consistency with the project's CI/CD workflows and production targets.
Sources: README.md:1-15, AGENTS.md:4-15, wiki/Requirements.md:10-25
System Requirements
Developers must configure their environment according to the following specifications to ensure the application functions correctly during development and testing.
| Component | Minimum Version | Recommended Version | Purpose |
|---|---|---|---|
| Nextcloud | 33 | 33 | Target Platform |
| PHP | 8.2 | 8.5+ | Backend Logic |
| Node.js | 20 (Target 24) | 24+ | Frontend Tooling |
| NPM | 10 | 11+ | Package Management |
| pnpm | - | 10+ | Compatibility |
Sources: package.json:7-11, composer.json:11-15, wiki/Installation-Guide.md:18-30, AGENTS.md:11-15
Frontend Development Setup
The frontend is built using Vue 3 and Element Plus. It leverages WebGL for high-performance rendering of CAD drawings.
Dependency Management
When installing frontend dependencies, developers must use the --legacy-peer-deps flag to resolve conflicts within the @mlightcad package ecosystem.
npm install --legacy-peer-deps
Sources: AGENTS.md:19-25, package.json:18-30
Build and Development Workflow
The project uses Webpack for bundling assets. The following diagram illustrates the frontend build and execution flow:
The build process transpiles Vue SFCs (Single File Components) and TypeScript into optimized JavaScript files located in the project's js/ directory.
Sources: package.json:12-17, README.md:110-125, wiki/Installation-Guide.md:105-115
Backend Development Setup
The backend follows the standard Nextcloud App Framework structure, requiring PHP 8.2+ and specific extensions for file handling.
PHP Configuration
For processing large CAD files during development, the following php.ini adjustments are recommended:
memory_limit: 1024Mupload_max_filesize: 500Mmax_execution_time: 300
Sources: wiki/Installation-Guide.md:162-175, wiki/Requirements.md:30-40
Composer Integration
Backend dependencies and dev-tools (like Psalm and PHPUnit) are managed via Composer. If the local PHP version differs from the target version (8.2), the --ignore-platform-reqs flag should be used.
composer install --ignore-platform-reqs
Sources: composer.json:45-55, AGENTS.md:19-23
Testing and Static Analysis
The project enforces code quality through several automated tools. Developers are expected to run these before submitting pull requests.
Sources: AGENTS.md:27-40, package.json:12-17, composer.json:45-55
Quality Control Commands
- Backend Unit Tests:
composer test:unit - PHP Static Analysis:
composer psalm - Frontend Unit Tests:
npm test - Linting:
npm run lintandnpm run stylelint
Sources: package.json:12-17, composer.json:52-54, AGENTS.md:27-40
Project Structure for Developers
The repository is organized to separate concerns between Nextcloud's expectations and the modern frontend stack:
| Path | Description |
|---|---|
src/ | Vue.js frontend source code (components, utils, App.vue) |
lib/ | PHP backend source (Controllers, Listeners, AppInfo) |
appinfo/ | Nextcloud app metadata and routing definitions |
css/ | Global stylesheets and compiled CSS |
js/ | Compiled frontend assets (do not edit directly) |
tests/ | Unit and integration test suites |
Sources: README.md:126-145, composer.json:33-43
Summary
The Developer Environment Setup for Nextcloud CAD Viewer requires a synchronized configuration of PHP 8.2 and Node.js 24. Key development activities include using specific NPM installation flags to manage peer dependencies and executing a suite of static analysis tools (Psalm, ESLint) and tests (PHPUnit, Jest) to ensure compatibility with Nextcloud 33. Proper configuration of server resource limits is essential for handling complex CAD data.
Sources: AGENTS.md:1-15, wiki/Requirements.md:140-150, README.md:190-205