Installation & Configuration

Next: Translating SquadCalc. ➡️

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

Installation

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.

npm run start

Bundling for production

The following script will build a production-ready bundle in the /dist/ folder , see bellow.

npm run build

Configuration

When forking this project, you will need to 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 :

# Base URL for the API the application communicates with.
# Disable or leave empty if you don't want to use API features (publishing markers & heatmaps)
# Note that official API access need to be obtained first, see : https://github.com/sh4rkman/SquadCalc/wiki/API-Documentation
#API_URL=https://beta.squadcalc.app/api
API_URL=https://squadcalc.app/api

# Enable or disable WebSocket functionality for SquadMortarOverlay
# If set to 'true' SquadCalc will try to open a socket with any running local instance of squadmortaroverlay.exe
# see https://github.com/Devil4ngle/SquadMortarOverlay
WEBSOCKET=true

# Enable or disable search engine indexing
# If set to 'true' a robots.txt with allow all will be created
# If set to 'false' a robots.txt with disallow all will be created
INDEX=true

# Enable or disable Factions/Vehicles functions
# If set to 'true' no faction will be displayed after selecting a layer
# Default to false
DISABLE_FACTIONS=false

Nginx Reverse Proxy

You'll need to run squadcalc behind a reverse proxy in order to handle API request and forward them to https://squadcalc.app/api/v2 with an API Key. Here's an example Nginx conf file to use in your setup :

• replace proxy_set_header X-API-Key "1234-1234-1234-1234-1234"; with your own API key.
• Update root /PATH/TO/squadcalc/dist; to point to your SquadCalc frontend build.

# 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;

    location ^~ /api/v2/ {
        proxy_pass https://squadcalc.app;
        proxy_set_header X-API-Key "1234-1234-1234-1234-1234";
        # Basic proxy headers
        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";
        # TLS to upstream
        proxy_ssl_server_name on;
        # Keep WebSocket alive
        proxy_read_timeout 3600s;
    }
    
    # Default Path
    root /change/your/path/to/squadcalc/dist/;

    # 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;
    ssl_protocols             TLSv1.2 TLSv1.3;
    add_header                Strict-Transport-Security "max-age=63072000";
}

Bundler & WebServer

Squadcalc is using Webpack as a code bundler: using npm run build will launch webpack and create a ready-for-production bundle inside a dist folder that can be deployed and fed to any web server instance of your own.

Squadcalc doesn't include a web server : you'll have to use your own nginx/lighthttpd/apache instance. Just point it to the dist folder.

Next: Translating SquadCalc. ➡️