boilerplates-bootstraps/electron_boilerplate.sh

#!/bin/bash
set -euo pipefail

usage() {
  echo "Usage: $0 [project-name]"
  echo "If no project name is given, you will be prompted."
}

valid_name() {
  [[ "$1" =~ ^[A-Za-z0-9_-]+$ ]]
}

if [[ "${1-}" == "-h" || "${1-}" == "--help" ]]; then
  usage; exit 0
fi

PROJ="${1-}"

if [[ -n "$PROJ" ]] && ! valid_name "$PROJ"; then
  echo "Invalid project name: $PROJ (use letters, numbers, hyphen, underscore)"
  PROJ=""
fi

while [[ -z "$PROJ" ]]; do
  read -r -p "Enter project name (letters, numbers, -, _ only): " PROJ
  if [[ -z "$PROJ" ]]; then
    continue
  fi
  if ! valid_name "$PROJ"; then
    echo "Invalid project name. Use letters, numbers, hyphen, underscore."
    PROJ=""
  fi
done

echo ">> Creating Electron+React+FastAPI boilerplate in '$PROJ' ..."

# --- Directory Structure ---
mkdir -p "$PROJ/backend"
mkdir -p "$PROJ/frontend"

# --- Backend: Python FastAPI+SQLite ---
cat > "$PROJ/backend/requirements.txt" <<EOF
fastapi
uvicorn[standard]
EOF

cat > "$PROJ/backend/db.py" <<EOF
import sqlite3, os
from datetime import datetime

DB_FILE = os.environ.get("WS_DB_PATH", "appdata.db")

def get_conn():
    conn = sqlite3.connect(DB_FILE, check_same_thread=False)
    conn.row_factory = sqlite3.Row
    return conn

def init_db():
    conn = get_conn()
    c = conn.cursor()
    c.execute('''
    CREATE TABLE IF NOT EXISTS likes (
        id TEXT PRIMARY KEY,
        title TEXT,
        artist TEXT,
        album TEXT,
        url TEXT,
        duration INTEGER,
        is_new INTEGER DEFAULT 1,
        last_seen TIMESTAMP
    )''')
    conn.commit()
    conn.close()

def get_likes(is_new=None):
    conn = get_conn()
    c = conn.cursor()
    if is_new is None:
        rows = c.execute('SELECT * FROM likes ORDER BY last_seen DESC').fetchall()
    else:
        rows = c.execute('SELECT * FROM likes WHERE is_new=? ORDER BY last_seen DESC', (1 if is_new else 0,)).fetchall()
    return [dict(row) for row in rows]

def add_demo_like():
    conn = get_conn()
    c = conn.cursor()
    c.execute(
        "INSERT OR IGNORE INTO likes (id, title, artist, album, url, duration, last_seen) VALUES (?, ?, ?, ?, ?, ?, ?)",
        ("track1", "Test Track", "Some Artist", "Test Album", "http://test", 123, datetime.utcnow())
    )
    conn.commit()
    conn.close()
EOF

cat > "$PROJ/backend/main.py" <<EOF
from fastapi import FastAPI, WebSocket
from fastapi.middleware.cors import CORSMiddleware
from starlette.websockets import WebSocketDisconnect
import db

app = FastAPI(title="$PROJ – React, FastAPI, SQLite, WebSocket")
db.init_db()
db.add_demo_like()

app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_methods=["*"],
    allow_headers=["*"],
)

@app.get("/likes/all")
def api_all_likes():
    return db.get_likes()

@app.get("/likes/new")
def api_new_likes():
    return db.get_likes(is_new=True)

# Example WebSocket endpoint (send a message on connection)
@app.websocket("/ws")
async def websocket_endpoint(ws: WebSocket):
    await ws.accept()
    try:
        await ws.send_json({"type": "hello", "msg": "WebSocket is live!"})
        while True:
            data = await ws.receive_text()
            await ws.send_json({"type": "echo", "data": data})
    except WebSocketDisconnect:
        # Client disconnected; exit quietly.
        pass
    except Exception:
        # Any other exception: close connection gracefully.
        await ws.close()
EOF

# --- Frontend: Vite+React+ESLint+Electron ---
cd "$PROJ/frontend"
CI=true npm_config_yes=true npm create vite@5.2.0 . -- --template react

cat > electron.cjs <<'EOF'
const { app, BrowserWindow } = require('electron');
const path = require('path');
const fs = require('fs');
const { spawn } = require('child_process');

const distIndex = path.join(__dirname, 'dist', 'index.html');
const useDevServer = process.env.ELECTRON_DEV === 'true' ||
  (!app.isPackaged && process.env.ELECTRON_DEV !== 'false' && !fs.existsSync(distIndex));
const skipBackend = ['1', 'true', 'yes'].includes(String(process.env.SKIP_ELECTRON_BACKEND || '').toLowerCase());
const skipFrontend = ['1', 'true', 'yes'].includes(String(process.env.SKIP_ELECTRON_FRONTEND || '').toLowerCase());
const frontendUrl = process.env.FRONTEND_URL || 'http://localhost:5173';
const appTitle = process.env.APP_TITLE || process.env.npm_package_name || "React, FastAPI, SQLite, WebSocket";

let backendProc = null;
let frontendProc = null;

function waitFor(url, timeoutMs = 20000, intervalMs = 300) {
  const http = require('http');
  const start = Date.now();
  return new Promise((resolve, reject) => {
    const check = () => {
      http
        .get(url, res => {
          res.destroy();
          resolve();
        })
        .on('error', () => {
          if (Date.now() - start > timeoutMs) {
            reject(new Error(`Timed out waiting for ${url}`));
          } else {
            setTimeout(check, intervalMs);
          }
        });
    };
    check();
  });
}

function cleanup() {
  if (backendProc) backendProc.kill();
  if (frontendProc) frontendProc.kill();
}

async function createWindow() {
  const win = new BrowserWindow({
    width: 1200,
    height: 800,
    title: appTitle,
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true,
    }
  });

  // Prevent the page title from overwriting our window title
  win.on('page-title-updated', (event) => {
    event.preventDefault();
    if (win.getTitle() !== appTitle) {
      win.setTitle(appTitle);
    }
  });

  if (useDevServer) {
    if (!skipFrontend) {
      frontendProc = spawn(/^win/.test(process.platform) ? 'npm.cmd' : 'npm', ['run', 'dev'], {
        cwd: __dirname,
        shell: false,
        stdio: 'ignore'
      });
    }
    try {
      await waitFor(frontendUrl);
      win.loadURL(frontendUrl);
    } catch (err) {
      console.error(err);
      cleanup();
      app.quit();
    }
  } else if (fs.existsSync(distIndex)) {
    win.loadFile(distIndex);
  } else {
    console.error('dist/index.html not found. Run "npm run build" or set ELECTRON_DEV=true to use the dev server.');
    cleanup();
    app.quit();
  }
}

function backendPython() {
  const venvBin = process.platform === 'win32' ? '.venv/Scripts/python.exe' : '.venv/bin/python';
  const candidate = path.join(__dirname, '../backend', venvBin);
  if (fs.existsSync(candidate)) return candidate;
  return process.platform === 'win32' ? 'python' : 'python3';
}

app.whenReady().then(() => {
  if (!skipBackend) {
    backendProc = spawn(backendPython(), ['-m', 'uvicorn', 'main:app', '--port', '8000', '--reload'], {
      cwd: path.join(__dirname, '../backend'),
      stdio: 'inherit',
      shell: false,
    });
    backendProc.on('error', err => console.error('Failed to start backend:', err));
  } else {
    console.log('Skipping backend spawn (SKIP_ELECTRON_BACKEND set)');
  }
  createWindow();
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
  cleanup();
});

process.on('SIGINT', () => { cleanup(); process.exit(0); });
process.on('SIGTERM', () => { cleanup(); process.exit(0); });
EOF

cd src

cat > App.jsx <<'EOF'
import React, { useEffect, useState } from "react";
import axios from "axios";

const API_URL = "http://localhost:8000";

function App() {
  const [allLikes, setAllLikes] = useState([]);
  const [wsMsg, setWsMsg] = useState("");
  const [error, setError] = useState("");
  const [wsAttempts, setWsAttempts] = useState(0);

  useEffect(() => {
    axios.get(API_URL + "/likes/all")
      .then(res => setAllLikes(res.data))
      .catch(err => setError(err.message));

    let socket;
    let retryTimer;

    const connectWs = (attempt = 0) => {
      setWsAttempts(attempt + 1);
      socket = new WebSocket("ws://localhost:8000/ws");
      socket.onopen = () => {
        setError("");
      };
      socket.onmessage = e => {
        const msg = JSON.parse(e.data);
        setWsMsg(JSON.stringify(msg));
      };
      socket.onerror = () => {
        setError("WebSocket connection failed");
      };
      socket.onclose = () => {
        if (attempt < 4) {
          retryTimer = setTimeout(() => connectWs(attempt + 1), 1000 * (attempt + 1));
        }
      };
    };

    connectWs();

    return () => {
      if (retryTimer) clearTimeout(retryTimer);
      if (socket) socket.close();
    };
  }, []);

  return (
    <div>
      <h1>React · FastAPI · SQLite · WebSocket · ESLint</h1>
      {error && <p style={{ color: "#f66" }}>Error: {error}</p>}
      <p>Likes from backend:</p>
      <ul>
        {allLikes.map(t => (
          <li key={t.id}>{t.title} – {t.artist}</li>
        ))}
      </ul>
      <p>WebSocket (attempt {wsAttempts}): <code>{wsMsg}</code></p>
    </div>
  );
}
export default App;
EOF

cat > main.jsx <<'EOF'
import React from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)
EOF

cat > index.css <<'EOF'
body { font-family: sans-serif; margin: 2em; background: #202126; color: #fafafa; }
h1 { color: #6bf; }
EOF

cd ../

# --- Patch package.json for Electron & deps ---
PROJ_NAME="$PROJ" node -e '
const fs = require("fs");
const pkg = JSON.parse(fs.readFileSync("./package.json", "utf8"));
pkg.name = process.env.PROJ_NAME || pkg.name;
pkg.main = "./electron.cjs";
pkg.scripts = { ...pkg.scripts, electron: "electron .", "electron-build": "npm run build && electron ." };
pkg.dependencies = pkg.dependencies || {};
pkg.devDependencies = pkg.devDependencies || {};
pkg.dependencies.axios = pkg.dependencies.axios || "latest";
pkg.devDependencies.electron = pkg.devDependencies.electron || "latest";
pkg.devDependencies["eslint-plugin-react"] = pkg.devDependencies["eslint-plugin-react"] || "latest";
fs.writeFileSync("package.json", JSON.stringify(pkg, null, 2));
'

cd ../..

cat > "$PROJ/.gitignore" <<'EOF'
backend/.venv
backend/__pycache__/
backend/appdata.db
frontend/node_modules
frontend/dist
.DS_Store
*.pyc
EOF

cat > "$PROJ/run.sh" <<'EOF'
#!/bin/bash
set -euo pipefail

ROOT="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
BACKEND="$ROOT/backend"
FRONTEND="$ROOT/frontend"
VENV="$BACKEND/.venv"
APP_TITLE="${APP_TITLE:-$(basename "$ROOT")}"

cleanup() {
  [[ -n "${BACK_PID:-}" ]] && kill "$BACK_PID" 2>/dev/null || true
  [[ -n "${FRONT_PID:-}" ]] && kill "$FRONT_PID" 2>/dev/null || true
  [[ -n "${ELECTRON_PID:-}" ]] && kill "$ELECTRON_PID" 2>/dev/null || true
}
trap cleanup EXIT INT TERM

echo ">> Backend: ensure venv and deps"
python3 -m venv "$VENV"
source "$VENV/bin/activate"
pip install --upgrade pip
pip install -r "$BACKEND/requirements.txt"

echo ">> Starting backend (uvicorn)..."
cd "$BACKEND"
python -m uvicorn main:app --port 8000 --reload &
BACK_PID=$!

echo ">> Installing frontend deps (npm install)..."
cd "$FRONTEND"
npm install

echo ">> Starting frontend (Vite dev server)..."
npm run dev -- --host &
FRONT_PID=$!

echo ">> Starting Electron (UI)..."
SKIP_ELECTRON_BACKEND=1 SKIP_ELECTRON_FRONTEND=1 ELECTRON_DEV=true FRONTEND_URL=http://localhost:5173 APP_TITLE="$APP_TITLE" npm run electron &
ELECTRON_PID=$!

echo ">> Backend PID: $BACK_PID  Frontend PID: $FRONT_PID  Electron PID: $ELECTRON_PID"
wait $BACK_PID $FRONT_PID $ELECTRON_PID
EOF
chmod +x "$PROJ/run.sh"

cat > "$PROJ/README.md" <<EOF
# $PROJ

## Quickstart (dev)

1. **Backend venv + deps**
   cd $PROJ/backend
   python3 -m venv .venv
   source .venv/bin/activate
   pip install --upgrade pip
   pip install -r requirements.txt

2. **Install frontend deps**
   cd ../frontend
   npm install

3. **Run Electron (dev)**
   npm run electron

- **Alt: run both servers without Electron**
  ./run.sh

## What this does

- Starts FastAPI backend (REST & WebSocket, SQLite, uvicorn --reload)
- Starts React+Vite dev server with ESLint (auto-reloads/HMR)
- Opens Electron window
- React frontend talks to backend via HTTP+WebSocket

## Production-ish build

1. cd frontend
2. npm run build
3. npm run electron

(Electron loads built frontend from dist/ and still spawns backend)

## WebSocket

Check out App.jsx and main.py for example WS code.

EOF

echo ">> Creating Python venv and installing backend requirements..."
cd "$PROJ/backend"
python3 -m venv .venv
source .venv/bin/activate
pip install --upgrade pip
pip install -r requirements.txt
deactivate

echo ">> Installing frontend npm dependencies..."
cd ../frontend
npm install
echo ">> All dependencies installed."
cd ../..

echo ">> Boilerplate created at '$PROJ'. See $PROJ/README.md for next steps."

echo ">> Launching Electron app..."
cd "$PROJ/frontend"
APP_TITLE="$PROJ" npm run electron