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.