Setup: GUI client

Updated 2024-09-07

If you want to install your own instance of the GUI client (for Option C):

Make sure you have the Typescript compiler (npm) on your machine. If you don't, you can install it with sudo apt-get install npm (if using Ubuntu), or a similar command for your OS.

Download the client source from GitHub https://github.com/RuleGame/Rule-Game . This can be done e.g. as follows:

	    cd ~/w2020
	    mkdir client
	    cd client/
	    git init
	    git remote add origin https://github.com/RuleGame/RuleGame.git
	    git pull origin master

Install the Node.js programming language https://nodejs.org/en/ (version 14 LTS version)

In the terminal window where you are going to carry out the compilation, set up 2 environment variables:

Variable name	Variable value	Comments
`REACT_APP_DEBUG_MODE_ENABLED`	`true` or `false`	Use `true` if compiling the production version of the client, or `false` for the development version (which will show more debugging information)
`REACT_APP_APP_API_HOST_ORIGIN`	The Game Server URL	E.g. `http://myhost.come/w2020` (if your server runs on that host on port 80), or `http://localhost:8080/w2020` (if, for testing purposes, you have installed the server on your laptop, and only plan to access it from the web browser running on the same laptop)

The way you set environment variables depends on what shell you use; it's usually something like setenv in shells such as csh or tcsh, and export in some other shells. For example, when we compile the client on our own server, we may do this:

	    setenv REACT_APP_DEBUG_MODE_ENABLED false
	    setenv REACT_APP_APP_API_HOST_ORIGIN http://rulegame.wisc.edu/w2020

Run npm install from the top directory
Run npm run build from the top directory
Copy all of the files inside the generated folder called build/ to where you are hosting static files using a web server. For example,
```
    sudo -u tomcat mkdir /opt/tomcat/webapps/rule-game
    sudo -u tomcat cp -pa build /opt/tomcat/webapps/rule-game/prod
  
```
The directory location within the Tomcat webapps dir should, of course, correspond to the URLs you have specified for GUI_PROD and GUI_DEV in your Master config file.

Alternative: deploy as a war file

It may be more convenient to pack the compiled code (for both the prod and dev versions) into a WAR file, and deploy that as a single web application. The commands below assume that you'll want to install the GUI client and the Game Server as two web apps on the same server, in /rule-game and /w2020 respectively.

#!/bin/csh

#-- this only needs to be done once
npm install

#-- Assuming that the GUI client and the Game Server will run as two
#-- web apps on the same server
setenv REACT_APP_APP_API_HOST_ORIGIN /w2020

rm -rf rule-game 
mkdir rule-game

setenv REACT_APP_DEBUG_MODE_ENABLED true
echo "Compiling with REACT_APP_DEBUG_MODE_ENABLED=$REACT_APP_DEBUG_MODE_ENABLED"
rm -rf build 
npm run build
mv build rule-game/dev

echo "Compiling with REACT_APP_DEBUG_MODE_ENABLED=$REACT_APP_DEBUG_MODE_ENABLED"
setenv REACT_APP_DEBUG_MODE_ENABLED false
# setenv REACT_APP_APP_API_HOST_ORIGIN http://localhost:8080/w2020
rm -rf build
npm run build
mv build rule-game/prod

rm -f rule-game.war
(cd rule-game; jar -cvf ../rule-game.war .)

#-- Install to the Tomcat's webapps dir. (Change this as needed depending
#-- on where your Tomcat lives.)
cp rule-game.war /opt/tomcat/webapps

Updating the client

If at a later point the GUI client source code has been updated in the GitHub repository, you can update your instance of the client by pulling the updated source code from GitHub and rebuilding. If you do this in the previously created directory (client, in our example), you don't need to repeat the commands git init and git remote add; just do the pull and recompile. This can be done, for example, with the following commands:

	#!/bin/bash
	pull origin master
	mkdir rule-game
	export REACT_APP_APP_API_HOST_ORIGIN=/w2020
	export  REACT_APP_DEBUG_MODE_ENABLED=false
	npm install
	npm run build
	mv build prod
	mv prod rule-game
	export  REACT_APP_DEBUG_MODE_ENABLED=true
	npm install
	npm run build
	mv build dev
	mv dev rule-game
        (cd rule-game;  jar cvf rule-game.war prod/* dev/*)
	sudo -u tomcat cp rule-game/rule-game.war /opt/tomcat/webapps

Here we build both the production and development versions of the client, and package them into a single WAR file for deploying to your Tomcat server (where it will show at http://your-host-name/rule-game).

The setting of REACT_APP_APP_API_HOST_ORIGIN used in the script above is suitable if you are going to use your instance of client with one instance of the Rule Game server, the one that you deploy to /w2020 on your host.

Sample compilation script

#!/bin/csh

mkdir rule-game
setenv REACT_APP_APP_API_HOST_ORIGIN /w2020

setenv REACT_APP_DEBUG_MODE_ENABLED false
npm install
npm run build
mv build prod
mv prod rule-game

setenv REACT_APP_DEBUG_MODE_ENABLED true
npm install
npm run build
mv build dev
mv dev rule-game

cd rule-game
jar cf rule-game.war prod dev

Customizing the code

If you know TypeScript, you can modify the client's source code as needed before compiling.

Examples

When our team updates the client code in its GitHub repository, you can rebuild and reinstall the updated client (prod version) using a script like this:

      
      
  

  [MAIN]     [SETUP]