Update docs about how libraries are built

Common/README.md

@@ -7,5 +7,15 @@ For examples of how to implement this library.
 - See [lib-pixelstreamingsignalling](/Signalling)
 - Also see [Wilbur](/SignallingWebServer) which uses the signalling library to implement a full signalling server.
 
+### Adding it to your project
+`npm i @epicgames-ps/lib-pixelstreamingcommon-ue5.5`
+
 ## Documentation
 The API is documented [here](docs).
+
+### How this library is built
+The NPM packages supports:
+- ES6 module usage
+- CommonJS usage
+- Type definitions
+- Source maps

Frontend/README.md

@@ -7,6 +7,7 @@ The frontend consists of two packages:
 1. [lib-pixelstreamingfrontend](/Frontend/library/): the core Pixel Streaming frontend for WebRTC, settings, input, and general functionality.
 2. [lib-pixelstreamingfrontend-ui](/Frontend/implementations/typescript): the reference UI that users can either optionally apply on top of the core library or build on top of.
 
+These libraries are published as [NPM packages](/README.md#npm-packages) and support usage as ES6 modules, CommonJS, include type definitions and source maps.
 
 ## Docs
 - [The Settings Panel](Docs/Settings%20Panel.md)
@@ -29,7 +30,7 @@ The TypeScript libraries are provided as both an [NPM](https://www.npmjs.com/set
 ## Usage from source
 
 When developing your own Pixel Streaming experience the intent is you will start with this library and extend it through the use of 
-its public API. We have provided an example of this workflow in our [implementations/typescript](/Frontend/implementations/typescript), which is an implementation of this library.
+its public API. We have provided an example of this workflow in our [implementations/typescript](/Frontend/implementations/typescript), which is an implementation of the frontend libraries and contains a working example of how you can bundle/minify your final application JavaScript..
 
 ## Contributing
 
@@ -39,18 +40,18 @@ If part of the library is not exposed and you wish to extend it, please do so in
 
 ⚠️ Only NodeJS LTS 18.17.0 is officially supported, some newer versions on NodeJS **WILL BREAK YOUR BUILD** ⚠️
 
-### Prerequisites
+### Prerequisites for local dev
 - Install NodeJS LTS 18.17.0 on your system.
 - Install npm globally using: `npm install npm -g` (yes this is required)
 
 ### Building the Library
 
 Changes to the library occur in the [/library](/Frontend/library) directory and require you to have NodeJS installed as part of your development environment.
-Once you have NodeJS installed: 
+Once you have NodeJS installed:
 
 - `cd library`
 - `npm install`
-- `npm run build`
+- `npm run build-all`
 
 ### Building the UI-Library
 
@@ -76,7 +77,7 @@ This will produce `player.html` and `player.js` under the `SignallingWebServer/P
 We recommend studying [/ui-library](/Frontend/ui-library) and [player.ts](/Frontend/implementations/typescript/src/player.ts)/[player.html](/Frontend/implementations/typescript/src/player.html), or alternatively the sample React implementation in [implementations/react](/Frontend/implementations/react), then once you have copied and modified the [package.json](/Frontend/implementations/typescript/package.json) and `.ts` into your own `implementation/your_implementation` directory, the process is similar:
 
 - `cd implementation/your_implementation`
-- `npm build-all`
+- `npm run build-all`
 
 ## Unit tests
 
@@ -87,4 +88,4 @@ The [/library](/Frontend/library) project has unit tests that test the Pixel Str
 
 ## Legal
 
-Copyright © 2024, Epic Games. Licensed under the MIT License, see the file [LICENSE](/LICENSE) for details.
+Copyright © 2024, Epic Games. Licensed under the MIT License, see the file [LICENSE](/LICENSE.md) for details.

Frontend/implementations/react/package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "build": "npx webpack --config webpack.prod.js",
     "build-dev": "npx webpack --config webpack.dev.js",
+    "build-all": "cd ../../ui-library && npm run build-all && cd ../implementations/react && npm install && npm run build",
     "watch": "npx webpack --watch",
     "serve": "webpack serve --config webpack.dev.js",
     "serve-prod": "webpack serve --config webpack.prod.js"

Frontend/implementations/typescript/readme.md

@@ -7,6 +7,8 @@ This is the frontend we ship with the Pixel Streaming plugin. The reference fron
 
 Using these two libraries gives a fully functional (and customizable) Pixel Streaming experience.
 
+This package is also a good example of how to include the frontend libraries as dependencies and bundle/minify the final application you ship.
+
 ### Key features of the reference frontend
 - An info panel (screen right) that provides a UI for displaying live statistics to the user.
 - A settings panel (screen right) that provides a UI for all the options inside [config.ts](/Frontend/library/src/Config/Config.ts).
@@ -17,7 +19,7 @@ Using these two libraries gives a fully functional (and customizable) Pixel Stre
 ```
 cd Frontend/implementations/typescript
 npm install
-npm run build
+npm run build-all
 ```
 
 ### Using the reference frontend
@@ -28,3 +30,5 @@ cd SignallingWebServer/platform_scripts/cmd
 start.bat
 # Navigate to http://localhost in your browser to see the reference frontend
 ```
+
+***Note:* You can also run `start.bat --build` to build all the dependent libraries.

Frontend/library/readme.md

@@ -11,5 +11,13 @@ See [lib-pixelstreamingfrontend-ui](/Frontend/implementations/typescript) for an
 - Opens a data channel connection sending and receiving custom data (in addition to input).
 
 ### Adding it to your project
-`npm i @epicgames-ps/lib-pixelstreamingfrontend-ue5.4`
+`npm i @epicgames-ps/lib-pixelstreamingfrontend-ue5.5`
 
+### How this library is built
+The NPM packages supports:
+- ES6 module usage
+- CommonJS usage
+- Type definitions
+- Source maps
+
+**Note:** The NPM package does not contain a minified/bundled output, this is up to the user to do this in their application.

Frontend/ui-library/README.md

@@ -0,0 +1,24 @@
+## lib-pixelstreamingfrontend-ui
+
+A plugin library that add UI support to the `lib-pixelstreamingfrontend` library.
+
+This UI library depends on a the base library as a peer dependency, so you should include both as dependencies in your application
+if you want to use this library.
+
+### Key features
+- Stock Pixel Streaming frontend
+- Setting panel
+- Info panel
+
+### Adding it to your project
+`npm i @epicgames-ps/lib-pixelstreamingfrontend-ue5.5`
+`npm i @epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.5`
+
+### How this library is built
+The NPM packages supports:
+- ES6 module usage
+- CommonJS usage
+- Type definitions
+- Source maps
+
+**Note:** The NPM package does not contain a minified/bundled output, this is up to the user to do this in their application.

Signalling/README.md

@@ -8,17 +8,25 @@ To build the `Signalling` module invoke the following commands in the `Common` a
 
 ```bash
 npm install
-npm run build
-# Or npm run build-dev
+npm run build-all
+# Or npm run build
 ```
 
 This will result in a `/dist` or `/build` output directory.
 
 **Note:** If you just want to get a signalling server up and running refer to ["Getting Started"](../README.md#getting-started)
 
+### How this library is built
+The NPM packages supports:
+- ES6 module usage
+- CommonJS usage
+- Type definitions
+- Source maps
+
 ## Documentation
 
 - [Protocol Notes](docs/Protocol.md)
 - [Protocol Messages](../Common/docs/messages.md)
 
 The API documentation is [here](docs/) and covers details of all exported components of the library.
+