Refactor environment variable names for Tailscale integration: replace VITE_TAILSCALE_API_KEY and VITE_TAILSCALE_TAILNET with TAILSCALE_ACCESS_TOKEN and TAILSCALE_TAILNET across configuration files, Dockerfile, and application code; update README and example environment file accordingly.

Author: rajsinghtech

.github/workflows/build.yml

@@ -11,6 +11,7 @@ on:
 env:
   REGISTRY: ghcr.io
   IMAGE_NAME: ${{ github.repository }}
+  NODE_VERSION: '18'
 
 jobs:
   build:
@@ -25,34 +26,29 @@ jobs:
     - name: Checkout repository
       uses: actions/checkout@v4
 
-    - name: Set up Go
-      uses: actions/setup-go@v4
+    - name: Set up Node.js
+      uses: actions/setup-node@v4
       with:
-        go-version: '1.21'
-        cache: true
+        node-version: ${{ env.NODE_VERSION }}
+        cache: 'npm'
 
-    - name: Download dependencies
-      run: go mod download
+    - name: Install dependencies
+      run: npm ci
 
-    - name: Run tests
-      run: |
-        go test -v ./...
-        go vet ./...
+    - name: Run linting
+      run: npm run lint
 
-    - name: Build binary
-      run: |
-        go build -ldflags="-w -s" -o tsflow .
-        chmod +x tsflow
+    - name: Run type checking
+      run: npm run type-check
+    
+    - name: Build application
+      run: npm run build
 
-    - name: Build multi-platform binaries
+    - name: Create build archive
       if: github.event_name == 'release'
       run: |
-        GOOS=linux GOARCH=amd64 go build -ldflags="-w -s" -o tsflow-linux-amd64 .
-        GOOS=linux GOARCH=arm64 go build -ldflags="-w -s" -o tsflow-linux-arm64 .
-        GOOS=darwin GOARCH=amd64 go build -ldflags="-w -s" -o tsflow-darwin-amd64 .
-        GOOS=darwin GOARCH=arm64 go build -ldflags="-w -s" -o tsflow-darwin-arm64 .
-        GOOS=windows GOARCH=amd64 go build -ldflags="-w -s" -o tsflow-windows-amd64.exe .
-        chmod +x tsflow-*
+        tar -czf tsflow-build.tar.gz dist/
+        sha256sum tsflow-build.tar.gz > checksums.txt
     
     - name: Set up Docker Buildx
       if: github.event_name != 'pull_request'
@@ -84,43 +80,45 @@ jobs:
         labels: |
           org.opencontainers.image.source=${{ github.event.repository.html_url }}
           org.opencontainers.image.revision=${{ github.sha }}
+          org.opencontainers.image.title=TSFlow
+          org.opencontainers.image.description=Tailscale Network Flow Visualizer
         cache-from: type=gha
         cache-to: type=gha,mode=max
 
-
-    
-    - name: Create release archives
-      if: github.event_name == 'release'
-      run: |
-        tar -czf tsflow-linux-amd64.tar.gz tsflow-linux-amd64
-        tar -czf tsflow-linux-arm64.tar.gz tsflow-linux-arm64
-        tar -czf tsflow-darwin-amd64.tar.gz tsflow-darwin-amd64
-        tar -czf tsflow-darwin-arm64.tar.gz tsflow-darwin-arm64
-        zip tsflow-windows-amd64.zip tsflow-windows-amd64.exe
-        sha256sum *.tar.gz *.zip > checksums.txt
-    
     - name: Upload release assets
       if: github.event_name == 'release'
       uses: softprops/action-gh-release@v1
       with:
         files: |
-          *.tar.gz
-          *.zip
+          tsflow-build.tar.gz
           checksums.txt
         body: |
           ## TSFlow ${{ github.ref_name }}
           
+          A modern web application for visualizing and analyzing network traffic flows within Tailscale networks.
+          
           ### Docker Installation
           ```bash
           docker pull ${{ env.REGISTRY }}/${{ env.IMAGE_NAME_LOWER }}:latest
-          docker run -p 8080:8080 \
-            -e TAILSCALE_ACCESS_TOKEN="your-token" \
+          docker run -p 3000:3000 -p 3001:3001 \
             -e TAILSCALE_TAILNET="your-tailnet" \
+            -e TAILSCALE_ACCESS_TOKEN="your-access-token" \
             ${{ env.REGISTRY }}/${{ env.IMAGE_NAME_LOWER }}:latest
           ```
           
-          ### Binary Installation
-          Download the appropriate binary for your platform from the assets below.
+          ### Manual Installation
+          1. Download the build archive from the assets below
+          2. Extract: `tar -xzf tsflow-build.tar.gz`
+          3. Serve the `dist/` directory with any static file server
+          4. Set up the API server separately using `server.js`
+          
+          ### Development Setup
+          ```bash
+          git clone https://github.com/${{ github.repository }}.git
+          cd tsflow
+          npm install
+          npm run dev:full
+          ```
         draft: false
         prerelease: false
       env:

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.VITE_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.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

@@ -67,8 +67,8 @@ A modern, real-time web application for visualizing and analyzing network traffi
 
    Edit `.env` and add your Tailscale credentials:
    ```env
-   VITE_TAILSCALE_API_KEY=tskey-client-your-api-key-here
-   VITE_TAILSCALE_TAILNET=your-tailnet-name
+   TAILSCALE_ACCESS_TOKEN=tskey-client-your-api-key-here
+   TAILSCALE_TAILNET=your-tailnet-name
    ```
 
 4. **Start the application**
@@ -109,8 +109,8 @@ docker build -t tsflow .
 docker run -d \
   -p 3000:3000 \
   -p 3001:3001 \
-  -e VITE_TAILSCALE_API_KEY=your-api-key \
-  -e VITE_TAILSCALE_TAILNET=your-tailnet \
+  -e TAILSCALE_ACCESS_TOKEN=your-api-key \
+  -e TAILSCALE_TAILNET=your-tailnet \
   --name tsflow \
   tsflow
 ```
@@ -136,9 +136,9 @@ npm run preview
 
 | Variable | Description | Default |
 |----------|-------------|---------|
-| `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` |
+| `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` |
 
 ## Usage
 

docker-compose.yml

@@ -7,9 +7,9 @@ services:
       - "3000:3000"  # Frontend
       - "3001:3001"  # API proxy
     environment:
-      - VITE_TAILSCALE_API_KEY=${VITE_TAILSCALE_API_KEY}
-      - VITE_TAILSCALE_TAILNET=${VITE_TAILSCALE_TAILNET}
-      - VITE_TAILSCALE_BASE_URL=http://localhost:3001/api/v2
+      - TAILSCALE_ACCESS_TOKEN=${TAILSCALE_ACCESS_TOKEN}
+      - TAILSCALE_TAILNET=${TAILSCALE_TAILNET}
+      - PROXY_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
-VITE_TAILSCALE_API_KEY=tskey-client-your-api-key-here
+TAILSCALE_ACCESS_TOKEN=tskey-client-your-api-key-here
 
 # Your Tailnet name (e.g., example.com or example.ts.net)
-VITE_TAILSCALE_TAILNET=your-tailnet-name
+TAILSCALE_TAILNET=your-tailnet-name
 
 # API Base URL (usually doesn't need to change)
-VITE_TAILSCALE_BASE_URL=https://api.tailscale.com/api/v2 
+PROXY_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.VITE_TAILSCALE_API_KEY;
-    const tailnet = process.env.VITE_TAILSCALE_TAILNET;
+    const apiKey = process.env.TAILSCALE_ACCESS_TOKEN;
+    const tailnet = process.env.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.VITE_TAILSCALE_API_KEY
-  const envTailnet = import.meta.env.VITE_TAILSCALE_TAILNET
-  const envBaseUrl = import.meta.env.VITE_TAILSCALE_BASE_URL
+  const envApiKey = import.meta.env.TAILSCALE_ACCESS_TOKEN
+  const envTailnet = import.meta.env.TAILSCALE_TAILNET
+  const envBaseUrl = import.meta.env.PROXY_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.VITE_TAILSCALE_API_KEY
-    const envTailnet = import.meta.env.VITE_TAILSCALE_TAILNET
+    const envApiKey = import.meta.env.TAILSCALE_ACCESS_TOKEN
+    const envTailnet = import.meta.env.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 VITE_TAILSCALE_API_KEY and VITE_TAILSCALE_TAILNET</p>
+            <p>• <strong>Environment Variables:</strong> Set TAILSCALE_ACCESS_TOKEN and 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 VITE_TAILSCALE_API_KEY: string
-  readonly VITE_TAILSCALE_TAILNET: string
-  readonly VITE_TAILSCALE_BASE_URL: string
+  readonly TAILSCALE_ACCESS_TOKEN: string
+  readonly TAILSCALE_TAILNET: string
+  readonly PROXY_TAILSCALE_BASE_URL: string
 }
 
 interface ImportMeta {