added documentation regarding env variables

added base_url support
renamed VITE default env prefix to JS

README.md

@@ -14,6 +14,7 @@
 - Jellyfin Statistics Plugin Integration
 
 ## Required Development
+
 - Responsive UI
 - Code Optimizations
 - Security Testing
@@ -21,7 +22,25 @@
 - Multi-Server support
 - More to come
 
+## Environmental Variables
+
+| Env                             | Default | Example                  | Description                                                                                                                    |
+| ------------------------------- | ------- | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------ |
+| JS_BASE_URL                     | /       | /                        | Base url                                                                                                                       |
+| JS_USER                         | not set | User                     | Master Override User in case username used during setup is forgotten                                                           |
+| JS_PASSWORD                     | not set | Password                 | Master Override Password in case username used during setup is forgotten                                                       |
+| POSTGRES_USER                   | not set | postgres                 | Username that will be used in postgres database                                                                                |
+| POSTGRES_PASSWORD               | not set | postgres                 | Password that will be used in postgres database                                                                                |
+| POSTGRES_DB                     | jfstat  | jfstat                   | Name of postgres database                                                                                                      |
+| POSTGRES_IP                     | not set | jellystat-db/192.168.0.5 | Hostname/IP of postgres instance                                                                                               |
+| POSTGRES_PORT                   | not set | 5432                     | Port Postgres is running on                                                                                                    |
+| REJECT_SELF_SIGNED_CERTIFICATES | true    | false                    | Allow or deny self signed SSL certificates                                                                                     |
+| JWT_SECRET                      | not set | my-secret-jwt-key        | JWT Key to be used to encrypt JWT tokens for authentication                                                                    |
+| JS_GEOLITE_ACCOUNT_ID           | not set | 123456                   | maxmind.com user id to be used for Geolocating IP Addresses (Can be found at https://www.maxmind.com/en/accounts/current/edit) |
+| JS_GEOLITE_LICENSE_KEY          | not set | ASDWdaSdawe2sd186        | License key you need to generate on maxmin to use their services                                                               |
+
 ## Getting Started with Development
+
 - Clone the project from git
 - set your env variables before strating the server (Variable names as per the docker compose file).
 - Run `npm install` to install necessary packages
@@ -37,14 +56,17 @@ Check out our dockerhub to run Jellystat:
 https://hub.docker.com/r/cyfershepard/jellystat
 
 ### Environment variables from files (Docker secrets)
+
 You can set any environment variable from a file by using the prefix `FILE__`
 
 As an example:
+
 ```yaml
-  jellystat:
+jellystat:
-    environment:
+  environment:
-      FILE__MYVAR: /run/secrets/MYSECRETFILE
+    FILE__MYVAR: /run/secrets/MYSECRETFILE
 ```
+
 Will set the environment variable `MYVAR` based on the contents of the `/run/secrets/MYSECRETFILE` file. see [docker secrets](https://docs.docker.com/compose/use-secrets/) for more info.
 
 ## Screenshots

backend/.env.example

@@ -6,5 +6,5 @@ POSTGRES_PORT = # your postgres port
 
 JWT_SECRET = # ultra secret word
 
-VITE_GEOLITE_ACCOUNT_ID = # optional, your GeoLite account ID to show geolocation info for client IPs
+JS_GEOLITE_ACCOUNT_ID = # optional, your GeoLite account ID to show geolocation info for client IPs
-VITE_GEOLITE_LICENSE_KEY = # optional, your GeoLite account license key to show geolocation info for client IPs
+JS_GEOLITE_LICENSE_KEY = # optional, your GeoLite account license key to show geolocation info for client IPs

backend/routes/utils.js

@@ -6,8 +6,8 @@ const router = express.Router();
 
 const geoliteUrlBase = 'https://geolite.info/geoip/v2.1/city';
 
-const geoliteAccountId = process.env.VITE_GEOLITE_ACCOUNT_ID;
+const geoliteAccountId = process.env.JS_GEOLITE_ACCOUNT_ID;
-const geoliteLicenseKey = process.env.VITE_GEOLITE_LICENSE_KEY;
+const geoliteLicenseKey = process.env.JS_GEOLITE_LICENSE_KEY;
 
 //https://stackoverflow.com/a/29268025
 const ipRegex = new RegExp(/\b(?!(10\.|172\.(1[6-9]|2[0-9]|3[0-1])\.|192\.168))(?:(?:2(?:[0-4][0-9]|5[0-5])|[0-1]?[0-9]?[0-9])\.){3}(?:(?:2([0-4][0-9]|5[0-5])|[0-1]?[0-9]?[0-9]))\b/);

src/index.jsx

@@ -33,7 +33,7 @@ i18n
     ReactDOM.createRoot(document.getElementById("root")).render(
       <React.StrictMode>
         <Suspense fallback={<Loading />} />
-        <BrowserRouter>
+        <BrowserRouter basename={import.meta.env.JS_BASE_URL ?? "/"}>
           <App />
         </BrowserRouter>
       </React.StrictMode>

src/pages/components/activity/activity-table.jsx

@@ -155,8 +155,8 @@ export default function ActivityTable(props) {
         row = row.original;
         if (
           isRemoteSession(row.RemoteEndPoint) &&
-          import.meta.env.VITE_GEOLITE_ACCOUNT_ID &&
+          import.meta.env.JS_GEOLITE_ACCOUNT_ID &&
-          import.meta.env.VITE_GEOLITE_LICENSE_KEY
+          import.meta.env.JS_GEOLITE_LICENSE_KEY
         ) {
           return (
             <Link className="text-decoration-none" onClick={() => showIPDataModal(row.RemoteEndPoint)}>

src/pages/components/sessions/session-card.jsx

@@ -141,7 +141,7 @@ function SessionCard(props) {
                     <Row>
                       <Col className="col-auto ellipse">
 
-                        {isRemoteSession(props.data.session.RemoteEndPoint) && (import.meta.env.VITE_GEOLITE_ACCOUNT_ID && import.meta.env.VITE_GEOLITE_LICENSE_KEY) ? 
+                        {isRemoteSession(props.data.session.RemoteEndPoint) && (import.meta.env.JS_GEOLITE_ACCOUNT_ID && import.meta.env.JS_GEOLITE_LICENSE_KEY) ? 
                           <Card.Text>                            
                           </Card.Text>
                           :

vite.config.js

@@ -1,19 +1,14 @@
-import { defineConfig, splitVendorChunkPlugin } from 'vite';
+import { defineConfig, splitVendorChunkPlugin } from "vite";
-import react from '@vitejs/plugin-react-swc';
+import react from "@vitejs/plugin-react-swc";
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  envPrefix: "JS_",
   optimizeDeps: {
-    include: [
+    include: ["react", "react-dom", "react-router-dom", "axios", "react-toastify"],
-      'react',
-      'react-dom',
-      'react-router-dom',
-      'axios',
-      'react-toastify',
-    ],
     esbuildOptions: {
       loader: {
-        '.js': 'jsx',
+        ".js": "jsx",
       },
     },
   },
@@ -22,30 +17,30 @@ export default defineConfig({
     port: 3000,
     // port for exposing APIs
     proxy: {
-      '/api': 'http://127.0.0.1:3000',
+      "/api": "http://127.0.0.1:3000",
-      '/proxy': 'http://127.0.0.1:3000',
+      "/proxy": "http://127.0.0.1:3000",
-      '/stats': 'http://127.0.0.1:3000',
+      "/stats": "http://127.0.0.1:3000",
-      '/sync': 'http://127.0.0.1:3000',
+      "/sync": "http://127.0.0.1:3000",
-      '/auth': 'http://127.0.0.1:3000',
+      "/auth": "http://127.0.0.1:3000",
-      '/backup': 'http://127.0.0.1:3000',
+      "/backup": "http://127.0.0.1:3000",
-      '/logs': 'http://127.0.0.1:3000',
+      "/logs": "http://127.0.0.1:3000",
-      '/socket.io': 'http://127.0.0.1:3000',
+      "/socket.io": "http://127.0.0.1:3000",
-      '/swagger': 'http://127.0.0.1:3000',
+      "/swagger": "http://127.0.0.1:3000",
-      '/utils': 'http://127.0.0.1:3000',
+      "/utils": "http://127.0.0.1:3000",
     },
   },
-  target: ['es2015'],
+  target: ["es2015"],
   rollupOptions: {
     output: {
       manualChunks: {
-        react: ['react'],
+        react: ["react"],
-        'react-dom': ['react-dom'],
+        "react-dom": ["react-dom"],
-        'react-router-dom': ['react-router-dom'],
+        "react-router-dom": ["react-router-dom"],
-        axios: ['axios'],
+        axios: ["axios"],
-        'react-toastify': ['react-toastify'],
+        "react-toastify": ["react-toastify"],
       },
     },
   },
   plugins: [react(), splitVendorChunkPlugin()],
-  envDir: "backend"
+  envDir: "backend",
 });