Plugin frontend


We currently support building plugin frontend as angular library (angular requires Node.js). We provided starting files for you. You can download it here.

Plugin dependencies

Inside of project FrontendPluginTemplate you can find various configuration files. One of them is package.json where you can find all npm package dependencies that are available for you to use. To install all dependencies run:

npm install

Please note that: we currently don't support adding additional npm package dependencies.

Having downloaded and installed the necessary dependencies you are now ready to build the functionality to support the front end.

Plugin template

File you downloaded contains project FrontendPluginTemplate which will serve as a template for developing your plugin. It is just skeleton Angular project. Inside of projects folder you will find server-bytes-plugin.

Please note that: You should not add anything else outside of server-bytes-plugin folder as it won't be included when you build your plugin.

Plugin development

You will be developing your plugin and adding your components inside src/lib folder. Your library root module is server-bytes-plugin.module. Here you will import all components, directives or pipes that you create and add it in declarations array. You can also import additional modules provided by already installed dependencies.

Important note: You are not supposed rename or delete this module.

ServerBytesSdk

We created server-bytes-sdk npm package which is among installed dependencies and it is already imported here in your plugin. It will offer you common functionalities and styles we used so your plugin will look identically when you upload it to ServerBytes.

View encapsulation modifiers

Important note: We strongly advice against using ::ng-deep, >>> and /deep/ as they disable view encapsulation for specific css rules. In other words, they give you access to DOM elements, which are not in your component's html. All "deep" manipulations are actually deprecated too, and allows your styles to leak into other components. You should not disable view encapsulation either.

Plugin build

When you are finished, you can build your plugin with:

ng build ServerBytesPlugin --prod

Once plugin is build, dist folder should be created. Inside of dist/server-bytes-plugin/bundles is server-bytes-plugin.umd.min.js which you will be uploading as js file.

results matching ""

    No results matching ""