# Setup: GUI client

Updated 2025-06-06

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

1. 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.
2. 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

3. Install the Node.js programming language https://nodejs.org/en/ (version 14 LTS version)
4. 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)

   Additionally, as of June 2025, when compiling on action.rutgers.edu, set `NODE_OPTIONS` to `--openssl-legacy-provider`. As Aryan explained, this is needed to prevent a security warning.

   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
       	    setenv NODE_OPTIONS "--openssl-legacy-provider"

5. Run `npm install` from the top directory
6. Run `npm run build` from the top directory
7. 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]