create-surf-app 0.1.22 → 0.1.24

package/dist/templates/default/CLAUDE.md

@@ -4,13 +4,12 @@ Built with [Surf SDK](https://github.com/cyberconnecthq/urania/tree/main/package
 
 ## Imports from @surf-ai/sdk
 
-Everything comes from `@surf-ai/sdk`. Do NOT create local utility files for these.
-
-**Frontend (`@surf-ai/sdk/react`):**
-
-```tsx
-import { useMarketPrice, useTokenHolders } from "@surf-ai/sdk/react"; // data hooks
-```
+The frontend should call your own backend routes under the Vite base path.
+Reuse the scaffolded `frontend/src/lib/api.ts` helper for frontend API requests.
+Call routes like `fetch(api('wallet'))`.
+Do not use absolute `/api/...` fetch URLs in the frontend.
+Do not use Surf SDK React hooks in the frontend.
+Use `@surf-ai/sdk/server` in backend routes to talk to Surf data APIs.
 
 **Backend (`@surf-ai/sdk/server`):**
 
@@ -30,6 +29,7 @@ const raw = await dataApi.get("newcategory/endpoint", { foo: "bar" });
 ```
 frontend/src/App.tsx       - build your UI here
 frontend/src/components/   - add components
+frontend/src/lib/api.ts    - base-aware helper for frontend API calls
 backend/routes/*.js        - add API routes (auto-mounted at /api/{name})
 backend/db/schema.js       - define database tables
 ```
@@ -47,7 +47,6 @@ backend/db/schema.js       - define database tables
 | `/api/cron/:id`      | PATCH  | Update a cron task (schedule, enabled, etc.)           |
 | `/api/cron/:id`      | DELETE | Delete a cron task                                     |
 | `/api/cron/:id/run`  | POST   | Manually trigger a cron task                           |
-| `/proxy/*`           | ANY    | Data API passthrough - `/proxy/market/price` -> hermod |
 
 Auto-registered from `backend/routes/*.js`:
 | File | Endpoint |
@@ -73,7 +72,7 @@ The agent can also call `POST /api/__sync-schema` explicitly after editing.
 
 ## Do NOT modify
 
-- `vite.config.ts` - proxy and build config
+- `vite.config.ts` - API proxy and build config
 - `backend/server.js` - uses @surf-ai/sdk/server
 - `entry-client.tsx` - app bootstrap with SSR hydration
 - `entry-server.tsx` - SSR render for deploy
@@ -83,6 +82,9 @@ The agent can also call `POST /api/__sync-schema` explicitly after editing.
 
 ## Rules
 
-- Use `@surf-ai/sdk/react` hooks in frontend, `@surf-ai/sdk/server` dataApi in backend
+- Use the scaffolded `api(path)` helper from `frontend/src/lib/api.ts` for frontend API calls
+- Never use absolute `/api/...` URLs in frontend fetch calls
+- Use `@surf-ai/sdk/server` `dataApi` in backend code when you need Surf data
+- Do not bypass your backend routes from the frontend
 - Frontend packages are pre-installed - check `package.json` before installing
 - Default to a dark theme unless the user explicitly asks for a different visual direction.

package/dist/templates/default/backend/server.js

@@ -1,2 +1,2 @@
 const { createServer } = require('@surf-ai/sdk/server')
-createServer().start()
+createServer({ proxy: false }).start()

package/dist/templates/default/frontend/package.json

@@ -13,7 +13,7 @@
     "type-check": "tsc --noEmit --incremental"
   },
   "dependencies": {
-    "@surf-ai/sdk": "0.1.4-beta",
+    "@surf-ai/theme": "latest",
     "react": "19.2.4",
     "react-dom": "19.2.4",
     "class-variance-authority": "0.7.1",

package/dist/templates/default/frontend/src/App.tsx

@@ -8,6 +8,7 @@ function SurfLogo() {
   )
 }
 
+// Frontend API calls should use `src/lib/api.ts`, not absolute `/api/...` URLs.
 export default function App() {
   return (
     <div data-surf-placeholder className="min-h-screen flex flex-col items-center justify-center gap-4 rounded-[14px]" style={{ background: 'var(--bg-chat-nav, #f4f4f4)', border: '1px solid var(--border-strong, rgba(42,42,42,0.08))' }}>

package/dist/templates/default/frontend/src/lib/api.ts

@@ -0,0 +1,3 @@
+export function api(path: string) {
+  return `${import.meta.env.BASE_URL}api/${path.replace(/^\/+/, '')}`
+}

package/dist/templates/default/frontend/src/vite-env.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="vite/client" />
 
 interface ImportMetaEnv {
-  readonly VITE_API_URL: string
   readonly VITE_PORT: string
   readonly VITE_BACKEND_PORT: string
 }

package/dist/templates/default/frontend/vite.config.ts

@@ -3,12 +3,10 @@ import { defineConfig, loadEnv } from 'vite'
 import react from '@vitejs/plugin-react'
 import tailwindcss from '@tailwindcss/vite'
 
-// Use loadEnv to read .env before config evaluation.
-// Vite does NOT load .env files until after the config is resolved,
-// so process.env.VITE_* is unavailable here without this.
-const env = loadEnv('development', process.cwd())
-
-function readRequiredPort(name: 'VITE_BACKEND_PORT' | 'VITE_PORT') {
+function readRequiredPort(
+  env: Record<string, string>,
+  name: 'VITE_BACKEND_PORT' | 'VITE_PORT',
+) {
   const value = env[name]
   const port = Number.parseInt(value || '', 10)
   if (!Number.isInteger(port)) {
@@ -17,146 +15,54 @@ function readRequiredPort(name: 'VITE_BACKEND_PORT' | 'VITE_PORT') {
   return port
 }
 
-const BACKEND_PORT = readRequiredPort('VITE_BACKEND_PORT')
-const BASE = env.VITE_BASE || './'
-
-// Vite proxy middleware runs BEFORE base-path stripping. When base is
-// non-relative (e.g. /preview/staging/{sid}/), proxy keys must be prefixed
-// with base to match incoming requests.
-// See: https://vite.dev/config/server-options#server-proxy
-const hasAbsBase = BASE.startsWith('/')
-const proxyKey = hasAbsBase ? `${BASE}proxy` : '/proxy'
-const apiProxyKey = hasAbsBase ? `${BASE}api` : '/api'
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd())
+  const backendPort = readRequiredPort(env, 'VITE_BACKEND_PORT')
+  const base = env.VITE_BASE || './'
+  const hasAbsBase = base.startsWith('/')
+  const apiBasePrefix = hasAbsBase ? base.replace(/\/$/, '') : ''
 
-const backendProxy = {
-  target: `http://127.0.0.1:${BACKEND_PORT}`,
-  changeOrigin: true,
-  // Strip base prefix so Express receives clean paths
-  ...(hasAbsBase && {
-    rewrite: (path: string) => path.replace(BASE, '/'),
-  }),
-}
+  const backendProxy = {
+    target: `http://127.0.0.1:${backendPort}`,
+    changeOrigin: true,
+    ...(hasAbsBase && {
+      rewrite: (requestPath: string) => requestPath.replace(base, '/'),
+    }),
+  }
 
-export default defineConfig({
-  plugins: [react(), tailwindcss()],
-  server: {
-    port: readRequiredPort('VITE_PORT'),
-    host: '0.0.0.0',
-    proxy: {
-      // /proxy/* → Express → OutboundProxy (crypto data APIs)
-      [proxyKey]: backendProxy,
-      // /api/* → Express (custom backend routes: auth, CRUD, etc.)
-      [apiProxyKey]: backendProxy,
-    },
-    hmr: {
-      // Relative path so Vite prepends the base (VITE_BASE) to construct
-      // the full WebSocket URL: wss://host/{base}/ws/vite-hmr
-      // This ensures HMR goes through the same preview proxy chain
-      // (frontend rewrite → Muninn → Urania → Vite dev server).
-      // An absolute path (starting with /) would bypass the proxy entirely.
-      path: 'ws/vite-hmr',
+  return {
+    plugins: [react(), tailwindcss()],
+    server: {
+      port: readRequiredPort(env, 'VITE_PORT'),
+      host: '0.0.0.0',
+      proxy: {
+        [`${apiBasePrefix}/api`]: backendProxy,
+      },
+      // Keep the HMR socket under the preview base path.
+      hmr: {
+        path: 'ws/vite-hmr',
+      },
     },
-    // Pre-transform entry files at startup so deps are optimized before the
-    // first browser request.  Reduces the window where Vite serves dep stubs
-    // (partially-optimized modules) during cold start after session respawn.
-    warmup: {
-      clientFiles: ['./src/entry-client.tsx', './src/App.tsx'],
+    resolve: {
+      alias: {
+        '@': path.resolve(__dirname, './src'),
+      },
+      dedupe: ['react', 'react-dom'],
+      preserveSymlinks: true,
     },
-  },
-  // Force Vite to always resolve a single copy of React.
-  // Without this, dep re-optimization after `npm install <new-pkg>` can create
-  // a new React bundle (different hash) while dynamic imports still reference
-  // the old one → two React instances → "Invalid hook call" errors.
-  resolve: {
-    alias: {
-      "@": path.resolve(__dirname, "./src"),
+    // Pre-bundle the deps touched during the initial boot path so cold starts
+    // do not race Vite's lazy dependency optimizer.
+    optimizeDeps: {
+      include: [
+        'react',
+        'react-dom',
+        'react-dom/client',
+        'react/jsx-dev-runtime',
+        'react/jsx-runtime',
+        '@tanstack/react-query',
+        '@tanstack/query-core',
+      ],
     },
-    dedupe: ['react', 'react-dom'],
-    // CRITICAL: node_modules is a tmpfs mount for performance.
-    // With preserveSymlinks=false (default), esbuild and Vite may resolve
-    // paths through the tmpfs layer differently after npm install modifies
-    // the directory — old dep bundles reference the previous real path
-    // → two React instances → "Cannot read properties of null
-    // (reading 'useState')".
-    // With preserveSymlinks=true, module identity uses the logical path
-    // (frontend/node_modules/react) which stays constant regardless of
-    // underlying mount changes → single React instance always.
-    preserveSymlinks: true,
-  },
-  // Eagerly pre-bundle ALL scaffold deps at startup.
-  // Without this, Vite discovers deps lazily by crawling imports. When the agent
-  // rewrites code between turns, new imports trigger dep re-optimization which
-  // serves "stub" modules (all exports undefined) → "Cannot read properties of
-  // null (reading 'useEffect')" and "Loading dependencies..." reload loops.
-  // Pre-bundling everything eliminates lazy discovery entirely.
-  optimizeDeps: {
-    include: [
-      // React core
-      'react',
-      'react-dom',
-      'react-dom/client',
-      'react/jsx-dev-runtime',
-      'react/jsx-runtime',
-      // Data fetching
-      '@tanstack/react-query',
-      '@tanstack/query-core',
-      // Charts
-      'echarts',
-      'echarts-for-react',
-      'echarts/core',
-      'echarts/charts',
-      'echarts/components',
-      'echarts/renderers',
-      // UI primitives (Radix)
-      '@radix-ui/react-accordion',
-      '@radix-ui/react-aspect-ratio',
-      '@radix-ui/react-avatar',
-      '@radix-ui/react-checkbox',
-      '@radix-ui/react-collapsible',
-      '@radix-ui/react-context-menu',
-      '@radix-ui/react-dialog',
-      '@radix-ui/react-dropdown-menu',
-      '@radix-ui/react-hover-card',
-      '@radix-ui/react-label',
-      '@radix-ui/react-menubar',
-      '@radix-ui/react-navigation-menu',
-      '@radix-ui/react-popover',
-      '@radix-ui/react-progress',
-      '@radix-ui/react-radio-group',
-      '@radix-ui/react-scroll-area',
-      '@radix-ui/react-select',
-      '@radix-ui/react-separator',
-      '@radix-ui/react-slider',
-      '@radix-ui/react-slot',
-      '@radix-ui/react-switch',
-      '@radix-ui/react-tabs',
-      '@radix-ui/react-toast',
-      '@radix-ui/react-toggle',
-      '@radix-ui/react-toggle-group',
-      '@radix-ui/react-tooltip',
-      // UI components
-      'sonner',
-      'cmdk',
-      'vaul',
-      'embla-carousel-react',
-      'react-day-picker',
-      'react-resizable-panels',
-      // Forms & validation
-      'react-hook-form',
-      '@hookform/resolvers',
-      'zod',
-      // Utilities
-      'lucide-react',
-      'next-themes',
-      'class-variance-authority',
-      'clsx',
-      'tailwind-merge',
-      'date-fns',
-      'scheduler',
-    ],
-  },
-  // Base path set dynamically to match external preview URL.
-  // This ensures Vite's internal modules (/@vite/client, /@react-refresh, etc.)
-  // are served under the correct path through the multi-layer proxy chain.
-  base: BASE,
+    base,
+  }
 })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-surf-app",
-  "version": "0.1.22",
+  "version": "0.1.24",
   "description": "Scaffold a Surf app — Vite + React + Express + @surf-ai/sdk",
   "type": "module",
   "bin": {