Refactor environment variable names for Tailscale integration: update configuration files, Dockerfile, and application code to use VITE_TAILSCALE_API_KEY and VITE_TAILSCALE_TAILNET; revise README and example environment file to reflect changes.

Author: rajsinghtech

Dockerfile

@@ -49,7 +49,7 @@ EXPOSE 3000 3001
 
 # Health check
 HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
-  CMD node -e "require('http').get('http://localhost:3001/api/v2/tailnet/' + process.env.TAILSCALE_TAILNET + '/devices', (res) => process.exit(res.statusCode === 200 ? 0 : 1)).on('error', () => process.exit(1))"
+  CMD node -e "require('http').get('http://localhost:3001/api/v2/tailnet/' + process.env.VITE_TAILSCALE_TAILNET + '/devices', (res) => process.exit(res.statusCode === 200 ? 0 : 1)).on('error', () => process.exit(1))"
 
 # Start both the API server and serve the built React app
 CMD ["dumb-init", "sh", "-c", "node server.js & npx serve -s dist -l 3000"]

README.md

@@ -43,15 +43,31 @@ A modern, real-time web application for visualizing and analyzing network traffi
 ## Quick Start
 
 ### Prerequisites
-- Node.js 18+ and npm 8+
 - Tailscale API key with appropriate permissions
 - Access to a Tailscale network
+- Docker (recommended) or Node.js 18+ and npm 8+
 
-### Installation
+### Option 1: Using Docker (Recommended)
+
+The fastest way to get started is using the pre-built Docker image:
+
+```bash
+docker run -d \
+  -p 3000:3000 \
+  -p 3001:3001 \
+  -e VITE_TAILSCALE_API_KEY=your-api-key \
+  -e VITE_TAILSCALE_TAILNET=your-tailnet \
+  --name tsflow \
+  ghcr.io/rajsinghtech/tsflow:latest
+```
+
+Then navigate to `http://localhost:3000` to start exploring your network!
+
+### Option 2: Development Setup
 
 1. **Clone the repository**
    ```bash
-   git clone https://github.com/your-username/tsflow.git
+   git clone https://github.com/rajsinghtech/tsflow.git
    cd tsflow
    ```
 
@@ -67,8 +83,8 @@ A modern, real-time web application for visualizing and analyzing network traffi
 
    Edit `.env` and add your Tailscale credentials:
    ```env
-   TAILSCALE_ACCESS_TOKEN=tskey-client-your-api-key-here
-   TAILSCALE_TAILNET=your-tailnet-name
+   VITE_TAILSCALE_API_KEY=tskey-client-your-api-key-here
+   VITE_TAILSCALE_TAILNET=your-tailnet-name
    ```
 
 4. **Start the application**
@@ -86,10 +102,48 @@ A modern, real-time web application for visualizing and analyzing network traffi
 
 ## Docker Deployment
 
+### Using Pre-built Images (Recommended)
+
+Pre-built container images are automatically built and published to GitHub Container Registry:
+
+```bash
+# Pull and run the latest image
+docker run -d \
+  -p 3000:3000 \
+  -p 3001:3001 \
+  -e VITE_TAILSCALE_API_KEY=your-api-key \
+  -e VITE_TAILSCALE_TAILNET=your-tailnet \
+  --name tsflow \
+  ghcr.io/rajsinghtech/tsflow:latest
+```
+
+**Available tags:**
+- `latest` - Latest stable release from main branch
+- `<commit-sha>` - Specific commit builds
+- `<version>` - Tagged releases (when available)
+
 ### Using Docker Compose (Recommended)
 
+Create a `docker-compose.yml` file:
+
+```yaml
+version: '3.8'
+services:
+  tsflow:
+    image: ghcr.io/rajsinghtech/tsflow:latest
+    ports:
+      - "3000:3000"
+      - "3001:3001"
+    environment:
+      - VITE_TAILSCALE_API_KEY=your-api-key
+      - VITE_TAILSCALE_TAILNET=your-tailnet
+    restart: unless-stopped
+```
+
+Then start the application:
+
 ```bash
-# Build and start
+# Start the application
 docker-compose up -d
 
 # View logs
@@ -99,7 +153,9 @@ docker-compose logs -f
 docker-compose down
 ```
 
-### Using Docker directly
+### Building from Source
+
+If you prefer to build the image yourself:
 
 ```bash
 # Build image
@@ -109,8 +165,8 @@ docker build -t tsflow .
 docker run -d \
   -p 3000:3000 \
   -p 3001:3001 \
-  -e TAILSCALE_ACCESS_TOKEN=your-api-key \
-  -e TAILSCALE_TAILNET=your-tailnet \
+  -e VITE_TAILSCALE_API_KEY=your-api-key \
+  -e VITE_TAILSCALE_TAILNET=your-tailnet \
   --name tsflow \
   tsflow
 ```
@@ -136,9 +192,9 @@ npm run preview
 
 | Variable | Description | Default |
 |----------|-------------|---------|
-| `TAILSCALE_ACCESS_TOKEN` | Your Tailscale API key | Required |
-| `TAILSCALE_TAILNET` | Your tailnet name | Required |
-| `PROXY_TAILSCALE_BASE_URL` | API base URL | `http://localhost:3001/api/v2` |
+| `VITE_TAILSCALE_API_KEY` | Your Tailscale API key | Required |
+| `VITE_TAILSCALE_TAILNET` | Your tailnet name | Required |
+| `VITE_TAILSCALE_BASE_URL` | API base URL | `http://localhost:3001/api/v2` |
 
 ## Usage
 

docker-compose.yml

@@ -7,9 +7,9 @@ services:
       - "3000:3000"  # Frontend
       - "3001:3001"  # API proxy
     environment:
-      - TAILSCALE_ACCESS_TOKEN=${TAILSCALE_ACCESS_TOKEN}
-      - TAILSCALE_TAILNET=${TAILSCALE_TAILNET}
-      - PROXY_TAILSCALE_BASE_URL=http://localhost:3001/api/v2
+      - VITE_TAILSCALE_API_KEY=${VITE_TAILSCALE_API_KEY}
+      - VITE_TAILSCALE_TAILNET=${VITE_TAILSCALE_TAILNET}
+      - VITE_TAILSCALE_BASE_URL=http://localhost:3001/api/v2
       - NODE_ENV=production
     env_file:
       - .env

env.example

@@ -1,9 +1,9 @@
 # Tailscale API Configuration
 # Get your API key from: https://login.tailscale.com/admin/settings/keys
-TAILSCALE_ACCESS_TOKEN=tskey-client-your-api-key-here
+VITE_TAILSCALE_API_KEY=tskey-client-your-api-key-here
 
 # Your Tailnet name (e.g., example.com or example.ts.net)
-TAILSCALE_TAILNET=your-tailnet-name
+VITE_TAILSCALE_TAILNET=your-tailnet-name
 
 # API Base URL (usually doesn't need to change)
-PROXY_TAILSCALE_BASE_URL=https://api.tailscale.com/api/v2 
+VITE_TAILSCALE_BASE_URL=https://api.tailscale.com/api/v2 

server.js

@@ -18,8 +18,8 @@ app.use(express.json());
 // Proxy endpoint for Tailscale API
 app.use('/api/v2', async (req, res) => {
   try {
-    const apiKey = process.env.TAILSCALE_ACCESS_TOKEN;
-    const tailnet = process.env.TAILSCALE_TAILNET;
+    const apiKey = process.env.VITE_TAILSCALE_API_KEY;
+    const tailnet = process.env.VITE_TAILSCALE_TAILNET;
 
     if (!apiKey || !tailnet) {
       return res.status(500).json({ 

src/lib/api.ts

@@ -12,9 +12,9 @@ const loadConfig = (): TailscaleConfig => {
   const savedTailnet = localStorage.getItem('tsflow-tailnet')
 
   // Fallback to environment variables
-  const envApiKey = import.meta.env.TAILSCALE_ACCESS_TOKEN
-  const envTailnet = import.meta.env.TAILSCALE_TAILNET
-  const envBaseUrl = import.meta.env.PROXY_TAILSCALE_BASE_URL
+  const envApiKey = import.meta.env.VITE_TAILSCALE_API_KEY
+  const envTailnet = import.meta.env.VITE_TAILSCALE_TAILNET
+  const envBaseUrl = import.meta.env.VITE_TAILSCALE_BASE_URL
 
   return {
     apiKey: savedApiKey || envApiKey || '',

src/pages/Settings.tsx

@@ -30,8 +30,8 @@ export default function Settings() {
     const savedTailnet = localStorage.getItem('tsflow-tailnet')
 
     // Load from environment variables as fallback
-    const envApiKey = import.meta.env.TAILSCALE_ACCESS_TOKEN
-    const envTailnet = import.meta.env.TAILSCALE_TAILNET
+    const envApiKey = import.meta.env.VITE_TAILSCALE_API_KEY
+    const envTailnet = import.meta.env.VITE_TAILSCALE_TAILNET
 
     // Set API key (localStorage first, then env)
     const finalApiKey = savedApiKey || envApiKey || ''
@@ -311,7 +311,7 @@ export default function Settings() {
             <p>• <strong>API Key:</strong> Generate from Tailscale Admin Console → Settings → Keys</p>
             <p>• <strong>Permissions:</strong> API key needs "Devices" read access at minimum</p>
             <p>• <strong>Tailnet:</strong> Found in your Tailscale admin console URL or settings</p>
-            <p>• <strong>Environment Variables:</strong> Set TAILSCALE_ACCESS_TOKEN and TAILSCALE_TAILNET</p>
+            <p>• <strong>Environment Variables:</strong> Set VITE_TAILSCALE_API_KEY and VITE_TAILSCALE_TAILNET</p>
             <p>• <strong>Auto-loading:</strong> App loads env vars on startup if no saved config exists</p>
             <p>• <strong>Issues:</strong> Check your API key permissions and tailnet name</p>
           </div>

src/vite-env.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="vite/client" />
 
 interface ImportMetaEnv {
-  readonly TAILSCALE_ACCESS_TOKEN: string
-  readonly TAILSCALE_TAILNET: string
-  readonly PROXY_TAILSCALE_BASE_URL: string
+  readonly VITE_TAILSCALE_API_KEY: string
+  readonly VITE_TAILSCALE_TAILNET: string
+  readonly VITE_TAILSCALE_BASE_URL: string
 }
 
 interface ImportMeta {