Frontend development guidelines
Structure
|-webapp
|-node_modules # dependencies
|-packages # packages folder (contains core-* and plugin-*)
|-(plugin|core)-name # plugin name (without @cloudbeaver/)
|-node_modules # dependencies
|-lib # after the build will contain the artifact
|-public # put static assets to this folder
|-src # keep source files here
|-locales # contains localization files
|-en.ts # contains array of token localizations
|-index.ts # contains re-exports
|-manifest.ts # contains list of services, plugin name and description
|-PluginBootstrap.ts # common plugin registration and initialization logic
|-LocaleBootstrap.ts # plugin localization
|-package.json
|-tsconfig.json
|-plugin-name-administration # administration plugin name (without @cloudbeaver/), structure are the same as for core/plugin packages
|-product-name # product name (without @cloudbeaver/)
|-node_modules
|-lib
|-public
|-src
|-config.json5 # product default configuration
|-index.html.ejs # html page template
|-index.ts # plugins import & application bootstrap
|-manifest.ts # contains list of services, product name and description
|-ProductBootstrap.ts # common product registration and initialization logic
|-package.json
|-tsconfig.json
Dependencies flow
core-* <- plugin-* <- plugin-*-administration
Core packages can depends only on another core packages.
Plugins can depends only on another plugins or core packages.
Administration plugins can depends on any package.
Please avoid circular dependencies.
Static content
Every package can have
public
Content of this folder will be copied to
lib
Make sure that plugin in the product dependencies list, otherwise static content won’t be copied.
Debugging
As our web application contains numerous packages, it’s crucial to debug the code effectively. One way to achieve this is by utilizing the dev tools panel options tab. For instance, if you intend to debug the executor’s handlers, you can navigate to the options tab, press
`
`
Internal packages validation
Each package comes with a package.json file that lists its internal dependencies. These dependencies are those utilized within the package. Therefore, whenever you import a package into the code, you should add it to the package.json file. You can accomplish this manually or by running the validation task
`
`
