Website configuration

To be able to customize SteamSpeak web panel, you will need to edit and replace some files into de packages/client folder.

Folder structure

📦client
 ┣ 📂dist
 ┣ 📂public
 ┣ 📂src
 ┣ 📂tests
 ┣ 📜.editorconfig
 ┣ 📜.eslintrc.js
 ┣ 📜.firebaserc
 ┣ 📜.gitignore
 ┣ 📜auth_config.json
 ┣ 📜babel.config.js
 ┣ 📜firebase.json
 ┣ 📜package.json
 ┣ 📜tailwind.config.js
 ┣ 📜themeConfig.js
 ┗ 📜vue.config.js

Edit files

vue.config.js

This file contains most of the website related configuration. After editing this file, you will need to rebuild you website.

• chainWebpack
• transpileDependencies
• productionSourceMap
• pwa
• devServer
• css

∼/SteamSpeak/packages/client/vue.config.js

chainWebpack: (config) => {
  config.plugin('html').tap((args) => {
    args[0].title = 'SteamSpeak';
    return args;
  });
  config.plugin('define').tap((args) => {
    args[0]['process.env'].VERSION = JSON.stringify(_package.version);
    return args;
  });
}

2 items

required

• stringrequired

  args[0].title

  Change it to define your custom website title.

  • Default: "SteamSpeak"
  • View examples
• stringrequired

  args[0]['process.env'].VERSION

  Used to set your current website version.

  • WARNING: You shouldn't edit this part.
  • View examples

How was it? Did this tutorial work?  Yes  No

Reverse proxy

SteamSpeak is only accessible over HTTP. To make the app available over HTTPS you need to set up a reverse proxy (e.g. Apache or NGINX). There are tons of guides on the internet how to setup a reverse proxy with free ssl certificate. Below are just example vhost/server block files for Apache and NGINX.

• Nginx
• Apache

server {
  listen 80;
  listen [::]:80;
  server_name steamspeak.example.com
  return 301 https://$host$request_uri;
}

server {
  listen 443 ssl;
  server_name steamspeak.example.com

  location / {
    proxy_pass http://127.0.0.1:3000;
  }

  # Let certbot install certificates for you or remove those if you don't use ssl
  ssl_certificate /etc/letsencrypt/live/steamspeak.example.com/fullchain.pem;
  ssl_certificate_key /etc/letsencrypt/live/steamspeak.example.com/privkey.pem;
  include /etc/letsencrypt/options-ssl-nginx.conf;
  ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;
}