Installation & Configuration

Next: Translating SquadCalc. ➡️

Want to fork, clone, contribute ? Here's a quick overview.

Clone

git clone https://github.com/sh4rkman/SquadCalc.git
cd SquadCalc
npm ci

Running a development server

The following npm script will launch squadcalc in watch-mode : you can code and test at the same time.
By default dev server will run on http://localhost:3000, but you can change the default port if need (see configuration below).

npm run start

Bundling for production

The following script will build a production-ready bundle in the /dist/ folder.
You can then feed this folder to your webserver, like in the nginx configuration file below.

npm run build

Configuration

You can configure a .env file to define specific environment variables. The .env file need to placed at the root of the project.

Example .env file for production use :

##################
#     GENERAL    #
##################

# API Adress to use (REQUIRED)
# Should either be squadcalc.app/api or your own adresse if you proxy /api requests
API_URL=https://squadcalc.app/api

# Enable or disable search engine indexing (Default: false)
# If set to 'true' a robots.txt with 'allow all' will be created when running `npm run start`
SEARCH_ENGINES=true
                                                     
# Enable or disable WebSocket functionality for SquadMortarOverlay (https://github.com/Devil4ngle/SquadMortarOverlay)
# If set to 'true' SquadCalc will try to open a socket with any running local instance of squadmortaroverlay.exe
SMO_WEBSOCKET=true


##################
#   DEV SERVER   #
##################

# Custom port when running `npm run start`
# Default: 3000
DEV_SERVER_PORT=3000

# Should `npm run start` open automatically in a new tab
# Default: true
DEV_SERVER_AUTO_OPEN=true

Nginx & Reverse Proxy the API calls

When rehosting the app, you might want to use NGINX to serve squadcalc behind a domain and proxying API calls. Here's an example config for this.

Here's an example Nginx conf file to use in your setup :

1. In the .env file set the API_URL to https://squadcalc.mydomain.com
2. Set up the nginx conf bellow so it catch these API calls and redirect them to squadcalc.app/api

# HTTP Configuration
server {
    listen         80;
    listen         [::]:80;
    server_name    squadcalc.mydomain.com  www.squadcalc.mydomain.com;
    return         301 https://squadcalc.mydomain.com$request_uri;
}


# HTTPS Configuration
server {

    listen                    443 ssl http2;
    listen                    [::]:443 ssl http2;
    server_name               squadcalc.mydomain.com www.squadcalc.mydomain.com;

    # Proxy API requests to squadcalc.app
    location ^~ /api/ {
        proxy_pass https://squadcalc.app/api/;
        proxy_set_header X-Real-IP         $remote_addr;
        proxy_set_header X-Forwarded-For   $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        # WebSocket support
        proxy_http_version 1.1;
        proxy_set_header Upgrade    $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_read_timeout 3600s;
        # TLS to upstream
        proxy_ssl_server_name on;
    }
    
    # Default Path
    root /change/your/path/to/squadcalc/dist/;                         # Need to be changed

    # gzip
    gzip on;
    gzip_types text/plain application/json application/xml text/css text/javascript application/javascript;
  
    # SSL Configuration
    ssl_certificate           /etc/letsencrypt/live/squadcalc.mydomain.com/fullchain.pem;
    ssl_certificate_key       /etc/letsencrypt/live/squadcalc.mydomain.com/privkey.pem;
    add_header                Strict-Transport-Security "max-age=63072000";
}

Next: Translating SquadCalc. ➡️