ref: Update template to use the new plugin manifest structure (#10)

* [manifest-structure] - added manifest structure to template

* Update README.md

Co-authored-by: Anton Georgiev <antobinary@users.noreply.github.com>

---------

Co-authored-by: Anton Georgiev <antobinary@users.noreply.github.com>

.gitignore

@@ -1,5 +1,6 @@
 node_modules
 dist
+dist-tsc
 debian/.debhelper/
 debian/debhelper-build-stamp
 debian/files

README.md

@@ -2,16 +2,31 @@
 
 ## Description
 
-A brief description of the plugin including a screenshot or a short video.
+A brief description of the plugin including a screenshot and/or a short video.
-
-## Running the Plugin From Source Code
 
 ## Building the Plugin
 
+To build the plugin for production use, follow these steps:
 
-## Background
+```bash
+cd $HOME/src/plugin-template
+npm ci
+npm run build-bundle
+```
 
-BigBlueButton added supports for plugins in 2024 with BBB 3.0.
+The above command will generate the `dist` folder, containing the bundled JavaScript file named `<plugin-name>.js`. This file can be hosted on any HTTPS server along with its `manifest.json`.
-Check the official [documentation website](https://docs.bigbluebutton.org) for more information.
 
-This plugin repository was created using the plugin [template repository for BigBlueButton](https://github.com/bigbluebutton/plugin-template) hosted on GitHub.
+If you install the Plugin separated to the manifest, remember to change the `javascriptEntrypointUrl` in the `manifest.json` to the correct endpoint.
+
+To use the plugin in BigBlueButton, send this parameter along in create call:
+
+```
+pluginManifests=[{"url":"<your-domain>/path/to/manifest.json"}]
+```
+
+Or additionally, you can add this same configuration in the `.properties` file from `bbb-web` in `/usr/share/bbb-web/WEB-INF/classes/bigbluebutton.properties`
+
+
+## Development mode
+
+As for development mode (running this plugin from source), please, refer back to https://github.com/bigbluebutton/bigbluebutton-html-plugin-sdk section `Running the Plugin from Source`

manifest.json

@@ -0,0 +1,29 @@
+{
+  "requiredSdkVersion": "~0.0.59",
+  "name": "<plugin-name>",
+  "javascriptEntrypointUrl": "<plugin-name>.js",
+  "localesBaseUrl": "https://cdn.dominio.com/pluginabc/",
+  "eventPersistence": {
+      "isEnabled": true,
+      "maximumPayloadSizeInBytes": 1024,
+      "rateLimiting": {
+          "messagesAllowedPerSecond": 10,
+          "messagesAllowedPerMinute": 20
+      }
+  },
+  "dataChannels": [
+      {
+          "name": "<data-channel-name>",
+          "pushPermission": ["moderator"],
+          "replaceOrDeletePermission": ["creator", "moderator"]
+      }
+  ],
+  "remoteDataSources": [
+      {
+          "name": "<remote-data-source-name>",
+          "url": "${meta_remote-data-uri}",
+          "fetchMode": "onMeetingCreate",
+          "permissions": ["moderator"]
+      }
+  ]
+}

package.json

@@ -10,13 +10,13 @@
     "@types/react": "^18.2.13",
     "@types/react-dom": "^18.2.6",
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
-    "bigbluebutton-html-plugin-sdk": "0.0.52",
+    "bigbluebutton-html-plugin-sdk": "0.0.66",
-    "styled-components": "^5.3.3",
     "path": "^0.12.7",
-    "react-chat-elements": "^12.0.14",
     "react": "^18.2.0",
+    "react-chat-elements": "^12.0.14",
     "react-dom": "^18.2.0",
-    "react-modal": "^3.16.1"
+    "react-modal": "^3.16.1",
+    "styled-components": "^5.3.3"
   },
   "scripts": {
     "build-bundle": "webpack --mode production",
@@ -42,20 +42,16 @@
     "@babel/core": "^7.21.8",
     "@babel/preset-env": "^7.21.5",
     "@babel/preset-react": "^7.18.6",
-    "@types/react-modal": "^3.16.0",
-    "babel-loader": "^9.1.2",
-    "css-loader": "^6.7.4",
-    "style-loader": "^3.3.3",
-    "ts-loader": "^9.4.3",
-    "webpack": "^5.83.1",
-    "webpack-cli": "^5.1.1",
-    "webpack-dev-server": "^4.15.1",
     "@types/node": "^20.4.4",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
+    "@types/react-modal": "^3.16.0",
     "@types/styled-components": "^5.1.26",
     "@typescript-eslint/eslint-plugin": "^6.2.0",
     "@typescript-eslint/parser": "^6.2.0",
+    "babel-loader": "^9.1.2",
+    "copy-webpack-plugin": "^12.0.2",
+    "css-loader": "^6.7.4",
     "eslint": "^8.45.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-base": "^15.0.0",
@@ -66,7 +62,12 @@
     "eslint-watch": "^8.0.0",
     "lint-staged": "11.2.0",
     "react-dom": "^18.2.0",
+    "style-loader": "^3.3.3",
+    "ts-loader": "^9.4.3",
     "typescript": "^5.1.6",
-    "watch": "^1.0.2"
+    "watch": "^0.13.0",
+    "webpack": "^5.83.1",
+    "webpack-cli": "^5.1.1",
+    "webpack-dev-server": "^4.15.1"
   }
 }

tsconfig.json

@@ -1,6 +1,6 @@
 {
     "compilerOptions": {
-        "outDir": "./dist/",
+        "outDir": "./dist-tsc/",
         "noImplicitAny": true,
         "module": "es6",
         "target": "es5",
@@ -8,7 +8,11 @@
         "allowJs": true,
         "moduleResolution": "node"
     },
+    "include": ["src/*"],
     "paths": {
-        "*": ["node_modules/@types/*", "node_modules/*"]
+        "*": ["node_modules"]
-    }
+    },
+    "exclude": [
+        "node_modules"
+    ]
 }

webpack.config.js

@@ -1,21 +1,35 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const path = require('path');
+
 module.exports = {
   entry: './src/index.tsx',
   output: {
-    filename: '<PluginName>.js',
+    filename: '<plugin-name>.js',
-    library: '<PluginName>',
+    library: '<plugin-name>',
     libraryTarget: 'umd',
-    publicPath: '/static/',
+    publicPath: '/',
     globalObject: 'this',
   },
   devServer: {
     allowedHosts: 'all',
     port: 4701,
-    host: 'localhost',
+    host: '0.0.0.0',
     hot: false,
     liveReload: false,
     client: {
       overlay: false,
     },
+    onBeforeSetupMiddleware: (devServer) => {
+      if (!devServer) {
+        throw new Error('webpack-dev-server is not defined');
+      }
+
+      // Serve manifest.json from the project root when requested at /manifest.json
+      devServer.app.get('/manifest.json', (req, res) => {
+        res.sendFile(path.resolve(__dirname, 'manifest.json'));
+      });
+    },
   },
   module: {
     rules: [
@@ -40,4 +54,11 @@ module.exports = {
   resolve: {
     extensions: ['.js', '.jsx', '.tsx', '.ts'],
   },
+  plugins: [
+    new CopyWebpackPlugin({
+      patterns: [
+        { from: 'manifest.json', to: './' }, // Copy manifest.json to static/ in the output folder
+      ],
+    }),
+  ],
 };