Skip to content

fix: align webpack config and App.vue with production patterns#16

Open
rubenvdlinde wants to merge 5 commits intomainfrom
fix/webpack-sidebar-alignment
Open

fix: align webpack config and App.vue with production patterns#16
rubenvdlinde wants to merge 5 commits intomainfrom
fix/webpack-sidebar-alignment

Conversation

@rubenvdlinde
Copy link
Copy Markdown
Contributor

Update template to match working OpenCatalogi patterns. All new apps scaffolded from this template will build correctly out of the box.

- Extend base webpack config instead of replacing resolve/module
- Add NodePolyfillPlugin for process polyfill compatibility
- Add CnObjectSidebar + objectSidebarState for proper sidebar positioning
- Update deps: @nextcloud/l10n ^3.1.0, @nextcloud/dialogs ^5.3.7
- Add sass/sass-loader for SCSS support
@github-actions
Copy link
Copy Markdown
Contributor

Quality Report — ConductionNL/nextcloud-app-template @ 42927dd

Check PHP Vue Security License Tests
lint
phpcs
phpmd
psalm
phpstan
phpmetrics
eslint
stylelint
composer ✅ 100/100
npm
PHPUnit ⏭️
Newman ⏭️
Playwright ⏭️

Quality workflow — 2026-04-15 07:37 UTC

Download the full PDF report from the workflow artifacts.

…plitChunks

Two issues found when testing builder-generated apps (decidesk):

1. main.js: loadTranslations() wraps Vue mount in a callback that never
   fires when l10n/en_US.json returns 404 (new apps don't have translations).
   Fix: mount Vue synchronously, import t/n directly.

2. webpack.config.js: Nextcloud serves chunk files from /apps/<id>/js/ but
   custom_apps files live at /custom_apps/<id>/js/. Any webpack code-split
   chunk (from lazy imports or vendor splitting) fails with ChunkLoadError.
   Fix: disable splitChunks entirely. Use static imports in router.
@github-actions
Copy link
Copy Markdown
Contributor

Quality Report — ConductionNL/nextcloud-app-template @ 6b782d3

Check PHP Vue Security License Tests
lint
phpcs
phpmd
psalm
phpstan
phpmetrics
eslint
stylelint
composer ✅ 100/100
npm
PHPUnit ⏭️
Newman ⏭️
Playwright ⏭️

Quality workflow — 2026-04-16 05:02 UTC

Download the full PDF report from the workflow artifacts.

Gives the Hydra builder a working reference for the full CRUD lifecycle:

- ItemList.vue: CnIndexPage + useListView composable (zero-boilerplate list)
- ItemDetail.vue: CnDetailPage with sidebar, save/delete, CnObjectDataWidget
- object.js: replaced hand-rolled store with createObjectStore from library
- store.js: registerObjectType pattern with settings-driven schema binding
- MainMenu.vue: added Items nav entry between Dashboard and Documentation
- router: static imports with props factory for :id params
- package.json: fix @nextcloud/dialogs ^3.2.0 (Vue 2), add apexcharts/codemirror

These patterns prevent the recurring builder mistakes: lazy imports (ChunkLoadError),
custom stores (should use createObjectStore), missing list/detail views, and wrong
dependency versions.
@github-actions
Copy link
Copy Markdown
Contributor

Quality Report — ConductionNL/nextcloud-app-template @ 4042a04

Check PHP Vue Security License Tests
lint
phpcs
phpmd
psalm
phpstan
phpmetrics
eslint
stylelint
composer ✅ 100/100
npm
PHPUnit ⏭️
Newman ⏭️
Playwright ⏭️

Quality workflow — 2026-04-16 07:18 UTC

Download the full PDF report from the workflow artifacts.

Settings link should be inside NcAppNavigationSettings (the gear icon
widget), not a bare NcAppNavigationItem — follows Nextcloud convention
for admin-only controls and matches the procest pattern.
@github-actions
Copy link
Copy Markdown
Contributor

Quality Report — ConductionNL/nextcloud-app-template @ 94746d5

Check PHP Vue Security License Tests
lint
phpcs
phpmd
psalm
phpstan
phpmetrics
eslint
stylelint
composer ✅ 100/100
npm
PHPUnit ⏭️
Newman ⏭️
Playwright ⏭️

Quality workflow — 2026-04-16 07:26 UTC

Download the full PDF report from the workflow artifacts.

The correct Nextcloud pattern:
- Admin settings: /settings/admin/{appid} (via AdminSettings.php + settings.js)
- In-app settings: NcAppSettingsDialog modal opened from gear menu
- NO /settings route in the Vue router

The gear foldout (NcAppNavigationSettings) can hold additional admin
nav items. The Settings item emits @open-settings which App.vue
handles by opening the UserSettings modal.

Matches the OpenCatalogi pattern.
@github-actions
Copy link
Copy Markdown
Contributor

Quality Report — ConductionNL/nextcloud-app-template @ 733432e

Check PHP Vue Security License Tests
lint
phpcs
phpmd
psalm
phpstan
phpmetrics
eslint
stylelint
composer ✅ 100/100
npm
PHPUnit ⏭️
Newman ⏭️
Playwright ⏭️

Quality workflow — 2026-04-16 07:38 UTC

Download the full PDF report from the workflow artifacts.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant