Add Vite server integration and GH actions workflow to simplify deployment

Author: diegochine

.github/workflows/build-release.yml

@@ -0,0 +1,56 @@
+name: Build and Release
+
+on:
+  push:
+    branches: [ main ]
+
+permissions:
+  contents: write
+
+jobs:
+  build-and-release:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+          cache: 'npm'
+
+      - name: Install all dependencies
+        run: npm ci
+
+      - name: Build project
+        run: npm run build
+
+      - name: Install production dependencies only
+        run: |
+          npm ci --production
+
+      - name: Create release tarball
+        run: |
+          tar -czf release.tar.gz dist/ package.json server.js node_modules/
+
+      - name: Upload build artifact (for workflow logs)
+        uses: actions/upload-artifact@v4
+        with:
+          name: dist
+          path: dist
+
+      - name: Create GitHub Release and upload asset
+        uses: ncipollo/release-action@v1
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          tag: v${{ github.run_number }}
+          name: Release ${{ github.run_number }}
+          body: |
+            Latest build from main branch.
+          artifacts: release.tar.gz
+          allowUpdates: false
+          draft: false
+          prerelease: false
+          makeLatest: true

.gitignore

@@ -1,2 +1,3 @@
 node_modules
-
+dist/
+.DS_Store

README.md

@@ -108,10 +108,12 @@ This template includes a local development server (`server.js`) that provides:
 ### Starting the Server
 
 ```bash
-node server.js
+npm run start:dev   # Vite + API for local development
+npm run build       # Create production build in dist/
+npm run start:prod  # Serve built assets from dist/
 ```
 
-The server will start on `http://localhost:3000` by default.
+The server will start on `http://localhost:3000` by default. `start:prod` expects `dist/` to exist (created via `npm run build`).
 
 ### WebSocket Messaging API
 
@@ -138,3 +140,31 @@ curl -X POST http://localhost:3000/message \
   -H "Content-Type: application/json" \
   -d '{"message": "Hello from the server!"}'
 ```
+
+## CI/CD and Automated Releases
+
+This template includes a GitHub Actions workflow (`.github/workflows/build-release.yml`) that automatically builds and releases your application when you push to the `main` branch.
+
+### How It Works
+
+When you push to `main`, the workflow will:
+
+1. **Build the project** - Runs `npm run build` to create production assets in `dist/`
+2. **Create a release tarball** - Packages `dist/`, `package.json`, `server.js`, and production `node_modules/` into `release.tar.gz`
+3. **Create a GitHub Release** - Automatically creates a new release tagged as `v{run_number}` with the tarball attached
+
+### Release Contents
+
+The release tarball (`release.tar.gz`) contains everything needed to deploy the application:
+- `dist/` - Built production assets
+- `package.json` - Project dependencies and scripts
+- `server.js` - Production server
+- `node_modules/` - Production dependencies only
+
+### Using Releases
+
+To deploy a release:
+
+1. Download `release.tar.gz` from the latest GitHub Release (e.g. with `wget`)
+2. Extract (and remove) the tarball: `tar -xzf release.tar.gz && rm release.tar.gz`
+3. Start the production server: `npm run start:prod`

client/app.js

@@ -11,16 +11,16 @@
   function initializeWebSocket() {
     const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
     const host = window.location.host;
-    const wsUrl = `${protocol}//${host}`;
-    
+    const wsUrl = `${protocol}//${host}/ws`;
+
     try {
       websocket = new WebSocket(wsUrl);
-      
+
       websocket.onopen = function(event) {
         console.log('WebSocket connected');
         setStatus('Ready (WebSocket connected)');
       };
-      
+
       websocket.onmessage = function(event) {
         try {
           const data = JSON.parse(event.data);
@@ -31,23 +31,23 @@
           console.error('Error parsing WebSocket message:', error);
         }
       };
-      
+
       websocket.onclose = function(event) {
         console.log('WebSocket disconnected');
         setStatus('Ready (WebSocket disconnected)');
-        
+
         // Attempt to reconnect after 3 seconds
         setTimeout(() => {
           console.log('Attempting to reconnect WebSocket...');
           initializeWebSocket();
         }, 3000);
       };
-      
+
       websocket.onerror = function(error) {
         console.error('WebSocket error:', error);
         setStatus('Ready (WebSocket error)');
       };
-      
+
     } catch (error) {
       console.error('Failed to create WebSocket connection:', error);
       setStatus('Ready (WebSocket unavailable)');