Separate webpack workflow into development and production for the library and typescript example packages

.github/workflows/release-workflow.yaml

@@ -19,7 +19,7 @@ jobs:
           node-version: "16.x"
           registry-url: "https://registry.npmjs.org"
       - run: npm ci
-      - run: npm run build
+      - run: npm run build-prod
       - run: npm publish --access public
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/tag-workflow.yaml

@@ -43,7 +43,7 @@ jobs:
     - name: Build SPS Frontend
       run: |
         cd ./examples/typescript      
-        npm run build-all
+        npm run build-all-prod
 
       # Build the Scalable Pixel Streaming Frontend Docker image from the dist directories of the packages
     - name: Build the Scalable Pixel Streaming Frontend Docker image and push to Docker

.github/workflows/test-pull-request.yaml

@@ -1,4 +1,4 @@
-# The following workflow will run when a pull request is opened, synched or reopened
+# The following workflow will run when a pull request is opened, synced or reopened
 # It's intent is to run a build of the package against the PR to ensure that it passes a code build check
 
 name: test-build
@@ -26,10 +26,30 @@ jobs:
         with:
           node-version: "16.x"
 
-      # install deps for frontend and library and build both
-      - name: Install library and frontend deps and build
+      # install deps for Library and build for development
+      - name: Install and build library for development
+        working-directory: ./library
+        run: |
+          npm ci
+          npm run build-dev
+
+      # install deps for Library and build for production
+      - name: Install and build library for production
+        working-directory: ./library
+        run: |
+          npm ci
+          npm run build-prod
+
+      # install deps for Frontend and Library and build both for development
+      - name: Install and build library and Frontend for development
+        working-directory: ./examples/typescript
+        run: |
+          npm ci
+          npm run build-all-dev
+
+      # install deps for Frontend and Library for and build both for production
+      - name: Install and build library and Frontend for production
         working-directory: ./examples/typescript
-        id: npm
         run: |
           npm ci
-          npm run build-all
+          npm run build-all-prod

.gitignore

@@ -2,3 +2,5 @@ dist/
 node_modules/
 types/
 .vscode
+!.env.example
+.env

examples/typescript/.env.example

@@ -0,0 +1 @@
+WEBSOCKET_URL=ws://example.com/your/ws

examples/typescript/package.json

@@ -2,13 +2,17 @@
   "name": "spstypescriptexample",
   "version": "1.0.0",
   "description": "The typescript example for consuming the Scalable Pixel Streaming Frontend",
-  "main": "index.ts",
+  "main": "./src/index.ts",
   "scripts": {
-    "build": "npx webpack",
+    "build-dev": "npx webpack --config webpack.dev.js",
+    "build-prod": "npx webpack --config webpack.prod.js",
     "watch": "npx webpack --watch",
     "start": "npx webpack && open-cli ./dist/index.html",
-    "serve": "webpack serve",
-    "build-all": "cd ../../library && npm install && npm run build && cd ../examples/typescript && npm install && npm link ../../library && npm run build"
+    "serve-dev": "webpack serve --config webpack.dev.js",
+    "serve-prod": "webpack serve --config webpack.prod.js",
+    "symlink": "npm link ../../library",
+    "build-all-dev": "cd ../../library && npm install && npm run build-dev && cd ../examples/typescript && npm run symlink && npm run build-dev",
+    "build-all-prod": "cd ../../library && npm install && npm run build-prod && cd ../examples/typescript && npm run symlink && npm run build-prod"
   },
   "author": "TensorWorks Pty Ltd",
   "keywords": [],
@@ -21,14 +25,15 @@
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.7.3",
     "declaration-bundler-webpack-plugin": "^1.0.3",
+    "dotenv": "^16.0.3",
+    "html-loader": "^4.2.0",
     "html-webpack-plugin": "^5.5.0",
     "style-loader": "^3.3.1",
     "ts-loader": "^9.4.2",
-    "html-loader": "^4.2.0",
     "typescript": "^4.9.5",
     "webpack": "^5.76.1",
     "webpack-cli": "^5.0.1",
     "webpack-dev-server": "^4.11.1",
     "wepack-cli": "^0.0.1-security"
   }
-}
+}

examples/typescript/src/index.ts

@@ -1,18 +1,27 @@
-import * as spsFrontend from "@tensorworks/libspsfrontend";
+import {Config, PixelStreaming, SPSApplication, TextParameters, PixelStreamingApplicationStyle} from "@tensorworks/libspsfrontend";
 
-// Apply default styling from Epic's frontend
-export const PixelStreamingApplicationStyles = new spsFrontend.PixelStreamingApplicationStyle();
+// Apply default styling from Epic Games Pixel Streaming Frontend
+export const PixelStreamingApplicationStyles = new PixelStreamingApplicationStyle();
 PixelStreamingApplicationStyles.applyStyleSheet();
 
+// websocket url env
+declare var WEBSOCKET_URL: string;
+
 document.body.onload = function () {
 
 	// Create a config object.
 	// Note: This config is extremely important, SPS only supports the browser sending the offer.
-	const config = new spsFrontend.Config({ useUrlParams: true, initialSettings: { OfferToReceive: true, TimeoutIfIdle: true } });
+	const config = new Config({ useUrlParams: true, initialSettings: { OfferToReceive: true, TimeoutIfIdle: true } });
+
+	// make usage of WEBSOCKET_URL if it is not empty
+	let webSocketAddress = WEBSOCKET_URL;
+	if(webSocketAddress != ""){
+		config.setTextSetting(TextParameters.SignallingServerUrl, webSocketAddress)
+	}
 
-	// Create a Native DOM delegate instance that implements the Delegate interface class
-	const stream = new spsFrontend.PixelStreaming(config);
-	const spsApplication = new spsFrontend.SPSApplication({
+	// Create stream and spsApplication instances that implement the Epic Games Pixel Streaming Frontend PixelStreaming and Application types
+	const stream = new PixelStreaming(config);
+	const spsApplication = new SPSApplication({
 		stream,
 		onColorModeChanged: (isLightMode) => PixelStreamingApplicationStyles.setColorMode(isLightMode) /* Light/Dark mode support. */
 	});

examples/typescript/webpack.common.js

@@ -0,0 +1,72 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const webpack = require('webpack');
+require('dotenv').config({ path: './.env' }); 
+
+module.exports = {
+    entry: {
+        index: './src/index.ts',
+    },
+    plugins: [
+        new webpack.DefinePlugin({
+            WEBSOCKET_URL: JSON.stringify((process.env.WEBSOCKET_URL !== undefined) ? process.env.WEBSOCKET_URL : '')
+        }),
+        new HtmlWebpackPlugin({
+            title: 'Scalable Pixel Streaming Frontend',
+            template: './src/index.html',
+            filename: 'index.html'
+        }),
+    ],
+    module: {
+        rules: [
+            {
+                test: /\.tsx?$/,
+                loader: 'ts-loader',
+                exclude: [
+                    /node_modules/,
+                ],
+            },
+            {
+                test: /\.html$/i,
+                use: 'html-loader'
+            },
+            {
+                test: /\.css$/,
+                type: 'asset/resource',
+                generator: {
+                    filename: '[name][ext]'
+                }
+            },
+            {
+                test: /\.(png|svg)$/i,
+                type: 'asset/resource',
+                generator: {
+                    filename: 'images/[name][ext]'
+                }
+            },
+        ],
+    },
+    resolve: {
+        extensions: ['.tsx', '.ts', '.js', '.svg'],
+    },
+    output: {
+        filename: '[name].js',
+        library: 'spstypescriptexample',
+        libraryTarget: 'umd',
+        path: path.resolve(__dirname, 'dist'),
+        clean: true,
+        globalObject: 'this',
+        hashFunction: 'xxhash64'
+    },
+    experiments: {
+        futureDefaults: true
+    },
+    optimization: {
+        minimize: false
+    },
+    devServer: {
+        static: {
+            directory: path.join(__dirname, 'dist'),
+        },
+    },
+};

examples/typescript/webpack.dev.js

@@ -0,0 +1,8 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+const path = require('path');
+
+module.exports = merge(common, {
+    mode: 'development',
+    devtool: 'inline-source-map',
+});

examples/typescript/webpack.prod.js

@@ -0,0 +1,14 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+
+module.exports = merge(common, {
+    mode: 'production',
+    optimization: {
+      usedExports: true,
+      minimize: true
+    },
+    stats: 'errors-only',
+	performance: {
+		hints: false
+	}
+});

library/package.json

@@ -4,7 +4,8 @@
   "description": "The Scalable Pixel Streaming Frontend Library consuming Epic Games' Pixel Streaming Frontend",
   "main": "src/index.ts",
   "scripts": {
-    "build": "npx webpack",
+    "build-prod": "npx webpack --config webpack.prod.js",
+    "build-dev": "npx webpack --config webpack.dev.js",
     "watch": "npx webpack --watch",
     "serve": "webpack serve"
   },

library/webpack.common.js

@@ -0,0 +1,26 @@
+const package = require('./package.json');
+const path = require('path');
+const webpack = require('webpack');
+
+module.exports = {
+    entry: {
+        index: './src/index.ts'
+    },
+    module: {
+        rules: [
+            {
+                test: /\.tsx?$/,
+                loader: 'ts-loader',
+                exclude: [/node_modules/]
+            }
+        ]
+    },
+    resolve: {
+        extensions: ['.tsx', '.ts', '.js']
+    },
+    plugins: [],
+    output: {
+        path: path.resolve(__dirname, 'dist'),
+        globalObject: 'this'
+    }
+};