Development Process

Guide to the development process.

Prerequisites

Web Аpp 3 plugins must be built before being deployed, as they reference Pexip’s plugin-api package. This can sound intimidating if you are not a full time web developer, but it's actually very easy. You just need to install a few tools.

To set up for building, you will need to install Node.js on a development machine.

Plugin Framework

Next, you need to download or clone the Pexip Web App 3 Plugin Template. This contains the boilerplate for building your plugins. You should probably rename the directory to something relevant to your plugin.

You need to set the plugin-api version in use to the one relevant for the Web App 3 version you are building for. The relevant line is in package.json:

"dependencies": {
    "@pexip/plugin-api": "17.4.0"
},

Set this version to match the Plugin API Version under About Pexip in Web App 3.

Once set, you need to install dependencies. On the command line, move to the root of the plugin-template directory, and run the command: yarn

Once done, you are ready to develop!

Live Development

If you do not wish to go straight to building the code for deployment as a branding package, it is possible to develop live and have your plugin loaded from a local webserver by your Pexip webapp.

To do this, you must have a non-production Infinity installation to develop against, and on this you must temporarily enable the loading of local plugins. To do this, navigate to Platform > Global Settings > Security > HTTP Content-Security-Policy, and ensure there is a frame-src property for http://localhost:5173”.

You will need to have installed some branding on your webapp, but the only requirement is to point to the local server to access the plugin under development. So, your manifest.json would, at minimum, look like this:

{
  "images": {},
  "translations": {},
  "plugins": [{ "src": "http://localhost:5173"}]
}

Then, run yarn start from your plugin folder and navigate to your branded Web App 3. It will load your local plugin, allowing you to test development iteratively. Simply refresh Web App 3 and the latest plugin code will be loaded.

Building for Branding Packages

Once you are happy with your plugin, or if you do not wish to use the live development model, you can build the plugin for packaging by running yarn build. This will generate a directory dist which contains everything you need to upload to your branding package.

Take this dist directory and call it something else, e.g. plugins/plugin-template, in your branding package. Your branding tree will now look like this:

|-- webapp3
  |-- branding
    |-- plugins
      |-- plugin-template
        |-- assets
          index.js
        index.html
    manifest.json

You will then need to reference this plugin in the manifest.json:

{
  "images": {},
  "translations": {},
  "plugins": [{ "src": "./plugins/plugin-template/index.html", "id: "plugin-template"}]
}

It is important that the id of the plugin in the manifest is the same as the id in registerPlugin as shown in the Template. This ensures the plugins are loaded in the order specified in the manifest here.