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

[adrianZahra]

Relevant components:

• Scalable Pixel Streaming Frontend library
• Examples
• Docs

Problem statement:

The problem that this PR aims to solve is the need to split out the webpack.config.js files in the example and library. This is required as currently webpack is adding features in production builds of the frontend that are not required and not wanted for production building.

Solution

This PR solves the issue by splitting out the old webpack files for the library and example into webpack.dev, webpack.prod and webpack.common files. This allows us to make dev and prod builds of the library and example. Dev builds will include things like enabling the source map for debugging and prod builds help by minimizing code and only include the most nessecary files in builds.

Documentation

Documentation for this is to be constructed at this point in time and will be addressed in Updating Frontend Docs for 1.0.0#229

Test Plan and Compatibility

To make use of this new functionality the following commands can be run from ./examples/typescript
build the library and example with dev settings npm run build-all-dev
build the library and example with production settings npm run build-all-prod
link the library to the example npm run symlink
run the example for development once all is build npm run serve **this will run with development mode

To make use of this new functionality with the library the following commands can be run from ./library
to build the library in dev mode npm run build-dev
to build the library in production mode npm run build-prod

[lukehb]

Left some minor comments and questions.

[lukehb]

Take this more as an idea, but I think it could be cool:

When a PR is initiated it does a build of dev and prod of the lib as a validation that the PR didn't break library building.

wdyt @dan-tw ?

edit: I mention this here because if the team agrees it is cool, this PR could be the one that introduces that potentially.

[dan-tw]

https://github.com/ScalablePixelStreaming/Frontend/blob/v1.0.0/.github/workflows/test-pull-request.yaml

This workflow does that, perhaps it needs updating to also run the new dev/prod build scripts as well

I would do dev/prod build for lib and dev/prod build for the example (4 checks in total) .. that way we can get a more fine-grained understanding of where something might be broken (e.g. dev/prod lib/frontend)

[adrianZahra]

The pull request test has been updated in 86ddce5

[dan-tw]

Ensure that we are using WEBSOCKET_URL in the code if the .env file is used. I can't see anywhere that this variable is actually being consumed.

[adrianZahra]

I have tested the env file and updated the process and usage as it was broken da665f8