The Settings mechanism for an app is really just a way of displaying a template in the first place. For actually making changes in variables somewhere one needs to implement a Service on the server side and a frontend on the client’s side.
Looking at other apps, the tool of choice here appears to be Vite which is configured such that there is one main entry point for the actual app (src/index.js) and another one for the settings (src/settings.js), a little as if there were two apps in one.
I borrowed the Settings complex from the Forms app, planning to hollow it out and repurpose for my own stuff. The thing is, this requires Vite and I cannot find any NC tutorial or usage information on that. As far as I could learn from the web, Vite is a packing tool that works as a dev server in dev mode and must require some setting-up and some running that server.
Question: what must I do to work with Vite? Does it replace webpack? Do I need to change the Makefile for development cycles? How would I put it into production mode?
Both vite and webpack are bundlers. That is, they take a set of incomplete js files (incomplete in the sense that they reference foreign libraries like e.g. vue) and create a all in one is file from that. This all in one file can be loaded directly in the browser without additional/external dependencies to be loaded.
Both mentioned bundled support to build multiple entry points. Each entry point results in an individual output file that you can use in the browser, e.g. one for the main page and one for the settings.
The point is that Vue was typically built with webpack in the version 2.x. Starting with Vue 3, the best practice was shifted to vite for different reasons. You can have a long at theofficial documentation to configure multiple entries. The details will highly depend on you current setup, so generic steps are hard to identify.
I hope this helps. Feel free to ask.
Christian
1 Like
Thanks for the answer, Christian, I think I can go from here.
As Vite has become best practice with NC28 on, is there a tutorial or howto that you can recommend and that is compatible with NC?
1 Like
There should not be a big change between vite and webpack in terms of your code. You need for sure to adopt the builder config.
You should have a look at GitHub - nextcloud-libraries/nextcloud-vite-config: Shared Vite configuration for Nextcloud apps and libraries https://npmjs.org/@nextcloud/vite-config. There is a webpack alternative, you might be using already. Have a look at the documentation. The vite documentation might give you the required hints to migrate.