Phaser High Scores UI

A Phaser 3 project with ES6 support via Babel 7 and Webpack 4 that includes hot-reloading for development and production-ready builds primed for OpenShift.

Available Commands

Command	Description
npm install	Install project dependencies
npm start	Build project and open webserver for running project locally
npm run build	Builds code as a bundle for production (minification, uglification, etc..)

Running this

Running Locally

Simple, that's just this:

npm install; npm start

(edit files all you want and hotdeploy will watch/update for you)

set the env var export DEBUG_INPUT=true to see the input panel and allow setting high scores

set the env var export API_SERVER_URL=localhost:5000 to hook up to an API server (if you're running one)

Deploying from Local Dir to OpenShift

When you run the npm run build command, your code will be built into a single bundle located at dist/bundle.min.js along with any other assets you project depends upon.

Containerizing and pushing this app into your OpenShift cluster is easy with the help of NodeShift. It will create the OpenShift configuration needed, do a build inside the cluster, then deploy the app, and expose a URL route into it. Just run this command

npx nodeshift --web-app --build.env OUTPUT_DIR=dist --expose

(edit files and rerun npx nodeshift and it will update OpenShift for you)

add the env config --build.env DEBUG_INPUT=true to true to see the input panel and allow setting highscores

set the env var --build.env API_SERVER_URL=http://route_to_api_service:80 to hook up to an API server (note this is the external openshift route not the service name)

set the env var --build-env API_SERVER_WEBSOCKET_URL=ws://route_to_api_service:80 to hook up to an API server (note this is the external openshift route not the service name)

Expose our app to outside the cluster

oc expose service openshift-highscores-phaser-ui

Deploying from GitHub to OpenShift

This is also pretty easy with the help of Source 2 Image (aka s2i). Run the following (after replacing the github URL with yours):

oc new-app nodeshift/ubi8-s2i-web-app:latest~https://github.com/CodeCafeOpenShiftGame/openshift-highscores-phaser-ui --build-env OUTPUT_DIR=dist

add the env config --build-env DEBUG_INPUT=true to true to see the input panel and allow setting highscores

set the env var --build-env API_SERVER_URL=http://route_to_api_service:80 to hook up to an API server (note this is the external openshift route not the service name)

set the env var --build-env API_SERVER_WEBSOCKET_URL=ws://route_to_api_service:80 to hook up to an API server (note this is the external openshift route not the service name)

Expose our app to outside the cluster

oc expose service openshift-highscores-phaser-ui

Other Notes

• API_SERVER_URL and API_SERVER_WEBSOCKET_URL can use https and wss as long as they a both set to be secure (use port 443)

Credit & Thanks

Thanks to Richard Davey @ Phaser for the tutorials here that this was initially based upon.