create-surf-app 0.1.0 → 0.1.2

package/dist/index.js

@@ -5,18 +5,18 @@ import fs from "fs";
 import path from "path";
 var args = process.argv.slice(2);
 var projectName = args.find((a) => !a.startsWith("--")) || ".";
-var frontendPort = getFlag("--port", "5173");
-var backendPort = getFlag("--backend-port", "3001");
-function getFlag(name2, fallback) {
+var frontendPort = getFlag("--port") || process.env.VITE_PORT || "5173";
+var backendPort = getFlag("--backend-port") || process.env.VITE_BACKEND_PORT || "3001";
+function getFlag(name2) {
   const idx = args.indexOf(name2);
-  return idx >= 0 && args[idx + 1] ? args[idx + 1] : fallback;
+  return idx >= 0 && args[idx + 1] ? args[idx + 1] : void 0;
 }
 var frontendPkg = {
   name: "frontend",
   private: true,
   type: "module",
   scripts: {
-    dev: `vite --port ${frontendPort}`,
+    dev: "vite",
     build: "vite build",
     preview: "vite preview",
     lint: "eslint ."
@@ -61,6 +61,7 @@ var frontendPkg = {
     "next-themes": "0.4.6",
     "react": "19.2.4",
     "react-dom": "19.2.4",
+    "react-router-dom": "7.6.1",
     "sonner": "1.7.4",
     "tailwind-merge": "2.6.1",
     "vaul": "1.1.2",
@@ -91,7 +92,7 @@ var templates = {
     private: true,
     scripts: {
       start: "node server.js",
-      dev: "node --watch server.js"
+      dev: "node --env-file=.env --watch server.js"
     },
     dependencies: {
       "@surf-ai/sdk": "latest",
@@ -99,7 +100,7 @@ var templates = {
     }
   }, null, 2),
   "backend/server.js": `const { createServer } = require('@surf-ai/sdk/server')
-createServer({ port: ${backendPort} }).start()
+createServer().start()
 `,
   "backend/routes/.gitkeep": "",
   "backend/db/schema.js": `// Define your Drizzle ORM tables here.
@@ -110,17 +111,37 @@ createServer({ port: ${backendPort} }).start()
 //     name: text('name').notNull(),
 //     created_at: timestamp('created_at').defaultNow(),
 //   })
+`,
+  "backend/.env": `PORT=${backendPort}
 `,
   // ── Frontend ─────────────────────────────────────────────────────────────
   "frontend/package.json": JSON.stringify(frontendPkg, null, 2),
+  "frontend/.env": `VITE_PORT=${frontendPort}
+VITE_BACKEND_PORT=${backendPort}
+`,
   "frontend/vite.config.ts": `import { defineConfig, loadEnv } from 'vite'
 import react from '@vitejs/plugin-react'
 import tailwindcss from '@tailwindcss/vite'
 import path from 'path'
 
 const env = loadEnv('', process.cwd(), '')
-const FRONTEND_PORT = parseInt(env.VITE_PORT || '${frontendPort}', 10)
-const BACKEND_PORT = parseInt(env.VITE_BACKEND_PORT || '${backendPort}', 10)
+
+function requiredPort(name: string) {
+  const value = env[name]
+  if (!value) {
+    throw new Error(\`Missing \${name}. Set it in frontend/.env or your shell environment.\`)
+  }
+
+  const port = Number.parseInt(value, 10)
+  if (!Number.isInteger(port) || port < 1 || port > 65535) {
+    throw new Error(\`Invalid \${name}: \${value}\`)
+  }
+
+  return port
+}
+
+const FRONTEND_PORT = requiredPort('VITE_PORT')
+const BACKEND_PORT = requiredPort('VITE_BACKEND_PORT')
 
 export default defineConfig({
   plugins: [react(), tailwindcss()],
@@ -280,9 +301,18 @@ exports.users = pgTable('users', {
 Tables are auto-created on startup and when \`schema.js\` changes (file watcher).
 The agent can also call \`POST /api/__sync-schema\` explicitly after editing.
 
+## Dev Servers
+
+- Frontend: \`cd frontend && npm run dev\` (port from \`.env\`, do NOT pass \`--port\`)
+- Backend: \`cd backend && npm run dev\` (port from \`.env\`)
+- After \`npm install\` new packages, do NOT restart servers \u2014 Vite auto-discovers deps, backend uses \`node --watch\`
+- If a server crashes, restart with \`npm run dev\` in that directory
+- NEVER use \`npx vite\` \u2014 always use \`npm run dev\`
+
 ## Do NOT modify
 
 - \`vite.config.ts\` \u2014 proxy and build config
+- \`frontend/.env\` \u2014 port configuration (auto-generated)
 - \`backend/server.js\` \u2014 uses @surf-ai/sdk/server
 - \`entry-client.tsx\` \u2014 app bootstrap with SSR hydration
 - \`entry-server.tsx\` \u2014 SSR render for deploy
@@ -294,7 +324,7 @@ The agent can also call \`POST /api/__sync-schema\` explicitly after editing.
 
 - Use \`@surf-ai/sdk/react\` hooks in frontend, \`@surf-ai/sdk/server\` dataApi in backend
 - Use Tailwind CSS classes for styling (Surf Design System theme via \`@surf-ai/theme\`)
-- Use shadcn/ui components \u2014 install with \`bunx shadcn@latest add button\`
+- Use shadcn/ui components \u2014 install with \`npx shadcn@latest add button\`
 - Use \`cn()\` from \`@surf-ai/sdk/react\` to merge Tailwind classes
 - Frontend packages are pre-installed \u2014 check \`package.json\` before installing
 - Dark theme is the default (configured in entry-client.tsx)
@@ -333,14 +363,14 @@ console.log(`
 Done! Next steps:
 
   cd ${name}
-  cd backend && bun install && cd ..
-  cd frontend && bun install && cd ..
+  cd backend && npm install && cd ..
+  cd frontend && npm install && cd ..
 
   # Start backend
-  cd backend && bun dev &
+  cd backend && npm run dev &
 
   # Start frontend
-  cd frontend && bun dev
+  cd frontend && npm run dev
 
   Open http://localhost:${frontendPort}
 `);

package/package.json

@@ -1,15 +1,19 @@
 {
   "name": "create-surf-app",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Scaffold a Surf app — Vite + React + Express + @surf-ai/sdk",
   "type": "module",
   "bin": {
     "create-surf-app": "./dist/index.js"
   },
-  "files": ["dist", "templates"],
+  "files": [
+    "dist",
+    "templates"
+  ],
   "scripts": {
     "build": "tsup src/index.ts --format esm --clean && rm -rf dist/templates && cp -r templates dist/templates",
-    "dev": "tsup src/index.ts --format esm --watch"
+    "dev": "tsup src/index.ts --format esm --watch",
+    "test": "bun test"
   },
   "devDependencies": {
     "tsup": "^8.0.0",