@cloudwerk/create-app 0.1.1 → 0.2.0

package/README.md

@@ -0,0 +1,68 @@
+# @cloudwerk/create-app
+
+Scaffold a new Cloudwerk project with a single command.
+
+## Usage
+
+```bash
+npx @cloudwerk/create-app my-app
+```
+
+Or with a specific package manager:
+
+```bash
+pnpm create @cloudwerk/app my-app
+npm create @cloudwerk/app my-app
+yarn create @cloudwerk/app my-app
+```
+
+## Options
+
+```
+Usage: create-cloudwerk-app [options] <project-name>
+
+Options:
+  -r, --renderer <type>  UI renderer (hono-jsx, react, none)
+  -V, --version          Output version number
+  -h, --help             Display help
+```
+
+## Templates
+
+| Renderer | Description |
+|----------|-------------|
+| `hono-jsx` | Full-stack app with Hono JSX (default) |
+| `react` | Full-stack app with React SSR |
+| `none` | API-only backend, no UI rendering |
+
+## Examples
+
+```bash
+# Interactive mode (prompts for renderer)
+npx @cloudwerk/create-app my-app
+
+# Hono JSX template (default)
+npx @cloudwerk/create-app my-app --renderer hono-jsx
+
+# React template
+npx @cloudwerk/create-app my-app --renderer react
+
+# API-only template
+npx @cloudwerk/create-app my-app --renderer none
+```
+
+## What's Included
+
+Each template includes:
+- Pre-configured `cloudwerk.config.ts`
+- Example routes in `app/routes/`
+- TypeScript configuration
+- Development scripts (`dev`, `build`)
+
+## Documentation
+
+For full documentation, visit: https://github.com/squirrelsoft-dev/cloudwerk
+
+## Part of Cloudwerk
+
+This package is part of the [Cloudwerk](https://github.com/squirrelsoft-dev/cloudwerk) monorepo.

package/dist/index.js

@@ -178,9 +178,9 @@ function printSuccessBanner(projectName, projectPath, pm) {
 }
 
 // src/versions.ts
-var CORE_VERSION = "0.7.1";
-var CLI_VERSION = "0.7.0";
-var UI_VERSION = "0.7.1";
+var CORE_VERSION = "0.14.0";
+var CLI_VERSION = "0.14.0";
+var UI_VERSION = "0.14.0";
 
 // src/scaffold.ts
 function getTemplateDir(renderer) {

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@cloudwerk/create-app",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Create a new Cloudwerk app",
   "repository": {
     "type": "git",
     "url": "https://github.com/squirrelsoft-dev/cloudwerk.git",
-    "directory": "apps/create-cloudwerk-app"
+    "directory": "packages/create-app"
   },
   "type": "module",
   "bin": {

package/template-api/_gitignore

@@ -1,5 +1,6 @@
 node_modules/
 dist/
 .wrangler/
+.cloudwerk/
 .dev.vars
 *.log

package/template-api/app/route.ts

@@ -1,6 +1,5 @@
 import { json } from '@cloudwerk/core'
-import type { Context } from '@cloudwerk/core'
 
-export const GET = (_c: Context) => {
+export function GET() {
   return json({ message: 'Hello Cloudwerk' })
 }

package/template-api/package.json.tmpl

@@ -6,7 +6,10 @@
   "scripts": {
     "dev": "cloudwerk dev",
     "build": "cloudwerk build",
-    "deploy": "wrangler deploy"
+    "preview": "cloudwerk deploy --env preview",
+    "preview:teardown": "wrangler delete --env preview",
+    "deploy": "cloudwerk deploy",
+    "bindings": "cloudwerk bindings"
   },
   "dependencies": {
     "@cloudwerk/core": "^{{coreVersion}}",

package/template-api/tsconfig.json

@@ -8,7 +8,12 @@
     "skipLibCheck": true,
     "declaration": true,
     "outDir": "./dist",
-    "rootDir": "./app"
+    "rootDir": "./app",
+    "baseUrl": ".",
+    "paths": {
+      "@cloudwerk/core/bindings": ["./.cloudwerk/types/bindings.d.ts"],
+      "@cloudwerk/core/context": ["./.cloudwerk/types/context.d.ts"]
+    }
   },
-  "include": ["app/**/*", "cloudwerk.config.ts"]
+  "include": [".cloudwerk/types/**/*", "app/**/*", "cloudwerk.config.ts"]
 }

package/template-api/wrangler.toml.tmpl

@@ -1,6 +1,11 @@
 name = "{{name}}"
 main = "dist/index.js"
-compatibility_date = "2024-01-01"
+compatibility_date = "2024-09-23"
+compatibility_flags = ["nodejs_compat"]
+account_id = "your_account_id"
 
 [build]
 command = "npm run build"
+
+[env.preview]
+name = "{{name}}-preview"

package/template-hono-jsx/_gitignore

@@ -1,5 +1,6 @@
 node_modules/
 dist/
 .wrangler/
+.cloudwerk/
 .dev.vars
 *.log

package/template-hono-jsx/app/components/counter.tsx

@@ -6,8 +6,11 @@ export default function Counter() {
   const [count, setCount] = useState(0)
 
   return (
-    <button onClick={() => setCount((c) => c + 1)}>
-      Count: {count}
+    <button
+      onClick={() => setCount((c) => c + 1)}
+      class="px-6 py-3 bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg font-medium transition-colors"
+    >
+      Count is {count}
     </button>
   )
 }

package/template-hono-jsx/app/globals.css

@@ -0,0 +1 @@
+@import "tailwindcss";

package/template-hono-jsx/app/layout.tsx

@@ -0,0 +1,18 @@
+import type { LayoutProps } from '@cloudwerk/core'
+import globals from './globals.css?url'
+
+export default function RootLayout({ children }: LayoutProps) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>Cloudwerk App</title>
+        <link rel="stylesheet" href={globals} />
+      </head>
+      <body class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 min-h-screen">
+        {children}
+      </body>
+    </html>
+  )
+}

package/template-hono-jsx/app/page.tsx

@@ -2,9 +2,45 @@ import Counter from './components/counter'
 
 export default function HomePage() {
   return (
-    <div>
-      <h1>Welcome to Cloudwerk</h1>
-      <Counter />
-    </div>
+    <main class="flex flex-col items-center justify-center min-h-screen p-8">
+      {/* Logo/Brand */}
+      <div class="mb-8">
+        <h1 class="text-5xl font-bold bg-gradient-to-r from-orange-500 to-yellow-500 bg-clip-text text-transparent">
+          Cloudwerk
+        </h1>
+      </div>
+
+      {/* Tagline */}
+      <p class="text-xl text-gray-600 dark:text-gray-400 mb-8 text-center max-w-md">
+        Full-stack framework for Cloudflare Workers
+      </p>
+
+      {/* Counter Demo */}
+      <div class="mb-12">
+        <Counter />
+      </div>
+
+      {/* Quick Links */}
+      <div class="flex gap-4 text-sm">
+        <a
+          href="https://cloudwerk.dev/docs"
+          class="text-orange-500 hover:text-orange-600 underline underline-offset-4"
+        >
+          Documentation
+        </a>
+        <span class="text-gray-300 dark:text-gray-700">|</span>
+        <a
+          href="https://github.com/cloudwerk/cloudwerk"
+          class="text-orange-500 hover:text-orange-600 underline underline-offset-4"
+        >
+          GitHub
+        </a>
+      </div>
+
+      {/* Edit hint */}
+      <p class="mt-16 text-sm text-gray-400 dark:text-gray-600">
+        Edit <code class="bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded">app/page.tsx</code> to get started
+      </p>
+    </main>
   )
 }

package/template-hono-jsx/app/route.ts

@@ -1,6 +1,5 @@
 import { json } from '@cloudwerk/core'
-import type { Context } from '@cloudwerk/core'
 
-export const GET = (_c: Context) => {
+export function GET() {
   return json({ message: 'Hello Cloudwerk' })
 }

package/template-hono-jsx/cloudwerk.config.ts

@@ -1,7 +1,11 @@
 import { defineConfig } from '@cloudwerk/core'
+import tailwindcss from '@tailwindcss/vite'
 
 export default defineConfig({
   ui: {
     renderer: 'hono-jsx',
   },
+  vite: {
+    plugins: [tailwindcss()],
+  },
 })

package/template-hono-jsx/global.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="vite/client" />
+
+declare module '*.css?url' {
+  const url: string
+  export default url
+}

package/template-hono-jsx/package.json.tmpl

@@ -6,7 +6,10 @@
   "scripts": {
     "dev": "cloudwerk dev",
     "build": "cloudwerk build",
-    "deploy": "wrangler deploy"
+    "preview": "cloudwerk deploy --env preview",
+    "preview:teardown": "wrangler delete --env preview",
+    "deploy": "cloudwerk deploy",
+    "bindings": "cloudwerk bindings"
   },
   "dependencies": {
     "@cloudwerk/core": "^{{coreVersion}}",
@@ -15,7 +18,10 @@
     "hono": "^4.0.0"
   },
   "devDependencies": {
+    "@tailwindcss/vite": "^4.1.18",
+    "tailwindcss": "^4.1.18",
     "typescript": "^5.0.0",
+    "vite": "^6.0.0",
     "wrangler": "^4.0.0"
   },
   "engines": {

package/template-hono-jsx/tsconfig.json

@@ -10,7 +10,12 @@
     "outDir": "./dist",
     "rootDir": "./app",
     "jsx": "react-jsx",
-    "jsxImportSource": "hono/jsx"
+    "jsxImportSource": "hono/jsx",
+    "baseUrl": ".",
+    "paths": {
+      "@cloudwerk/core/bindings": ["./.cloudwerk/types/bindings.d.ts"],
+      "@cloudwerk/core/context": ["./.cloudwerk/types/context.d.ts"]
+    }
   },
-  "include": ["app/**/*", "cloudwerk.config.ts"]
+  "include": [".cloudwerk/types/**/*", "app/**/*", "cloudwerk.config.ts", "global.d.ts"]
 }

package/template-hono-jsx/wrangler.toml.tmpl

@@ -1,6 +1,15 @@
 name = "{{name}}"
 main = "dist/index.js"
-compatibility_date = "2024-01-01"
+compatibility_date = "2024-09-23"
+compatibility_flags = ["nodejs_compat"]
+account_id = "your_account_id"
+
+[assets]
+directory = "./dist/static"
+binding = "ASSETS"
 
 [build]
 command = "npm run build"
+
+[env.preview]
+name = "{{name}}-preview"

package/template-react/_gitignore

@@ -1,5 +1,6 @@
 node_modules/
 dist/
 .wrangler/
+.cloudwerk/
 .dev.vars
 *.log

package/template-react/app/components/counter.tsx

@@ -6,8 +6,11 @@ export default function Counter() {
   const [count, setCount] = useState(0)
 
   return (
-    <button onClick={() => setCount((c) => c + 1)}>
-      Count: {count}
+    <button
+      onClick={() => setCount((c) => c + 1)}
+      className="px-6 py-3 bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg font-medium transition-colors"
+    >
+      Count is {count}
     </button>
   )
 }

package/template-react/app/globals.css

@@ -0,0 +1 @@
+@import "tailwindcss";

package/template-react/app/layout.tsx

@@ -0,0 +1,18 @@
+import type { LayoutProps } from '@cloudwerk/core'
+import globals from './globals.css?url'
+
+export default function RootLayout({ children }: LayoutProps) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>Cloudwerk App</title>
+        <link rel="stylesheet" href={globals} />
+      </head>
+      <body className="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 min-h-screen">
+        {children}
+      </body>
+    </html>
+  )
+}

package/template-react/app/page.tsx

@@ -2,9 +2,45 @@ import Counter from './components/counter'
 
 export default function HomePage() {
   return (
-    <div>
-      <h1>Welcome to Cloudwerk</h1>
-      <Counter />
-    </div>
+    <main className="flex flex-col items-center justify-center min-h-screen p-8">
+      {/* Logo/Brand */}
+      <div className="mb-8">
+        <h1 className="text-5xl font-bold bg-gradient-to-r from-orange-500 to-yellow-500 bg-clip-text text-transparent">
+          Cloudwerk
+        </h1>
+      </div>
+
+      {/* Tagline */}
+      <p className="text-xl text-gray-600 dark:text-gray-400 mb-8 text-center max-w-md">
+        Full-stack framework for Cloudflare Workers
+      </p>
+
+      {/* Counter Demo */}
+      <div className="mb-12">
+        <Counter />
+      </div>
+
+      {/* Quick Links */}
+      <div className="flex gap-4 text-sm">
+        <a
+          href="https://cloudwerk.dev/docs"
+          className="text-orange-500 hover:text-orange-600 underline underline-offset-4"
+        >
+          Documentation
+        </a>
+        <span className="text-gray-300 dark:text-gray-700">|</span>
+        <a
+          href="https://github.com/cloudwerk/cloudwerk"
+          className="text-orange-500 hover:text-orange-600 underline underline-offset-4"
+        >
+          GitHub
+        </a>
+      </div>
+
+      {/* Edit hint */}
+      <p className="mt-16 text-sm text-gray-400 dark:text-gray-600">
+        Edit <code className="bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded">app/page.tsx</code> to get started
+      </p>
+    </main>
   )
 }

package/template-react/app/route.ts

@@ -1,6 +1,5 @@
 import { json } from '@cloudwerk/core'
-import type { Context } from '@cloudwerk/core'
 
-export const GET = (_c: Context) => {
+export function GET() {
   return json({ message: 'Hello Cloudwerk' })
 }

package/template-react/cloudwerk.config.ts

@@ -1,7 +1,11 @@
 import { defineConfig } from '@cloudwerk/core'
+import tailwindcss from '@tailwindcss/vite'
 
 export default defineConfig({
   ui: {
     renderer: 'react',
   },
+  vite: {
+    plugins: [tailwindcss()],
+  },
 })

package/template-react/global.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="vite/client" />
+
+declare module '*.css?url' {
+  const url: string
+  export default url
+}

package/template-react/package.json.tmpl

@@ -6,7 +6,10 @@
   "scripts": {
     "dev": "cloudwerk dev",
     "build": "cloudwerk build",
-    "deploy": "wrangler deploy"
+    "preview": "cloudwerk deploy --env preview",
+    "preview:teardown": "wrangler delete --env preview",
+    "deploy": "cloudwerk deploy",
+    "bindings": "cloudwerk bindings"
   },
   "dependencies": {
     "@cloudwerk/core": "^{{coreVersion}}",
@@ -17,9 +20,12 @@
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
+    "@tailwindcss/vite": "^4.1.18",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
+    "tailwindcss": "^4.1.18",
     "typescript": "^5.0.0",
+    "vite": "^6.0.0",
     "wrangler": "^4.0.0"
   },
   "engines": {

package/template-react/tsconfig.json

@@ -10,7 +10,12 @@
     "outDir": "./dist",
     "rootDir": "./app",
     "jsx": "react-jsx",
-    "jsxImportSource": "react"
+    "jsxImportSource": "react",
+    "baseUrl": ".",
+    "paths": {
+      "@cloudwerk/core/bindings": ["./.cloudwerk/types/bindings.d.ts"],
+      "@cloudwerk/core/context": ["./.cloudwerk/types/context.d.ts"]
+    }
   },
-  "include": ["app/**/*", "cloudwerk.config.ts"]
+  "include": [".cloudwerk/types/**/*", "app/**/*", "cloudwerk.config.ts", "global.d.ts"]
 }

package/template-react/wrangler.toml.tmpl

@@ -1,6 +1,15 @@
 name = "{{name}}"
 main = "dist/index.js"
-compatibility_date = "2024-01-01"
+compatibility_date = "2024-09-23"
+compatibility_flags = ["nodejs_compat"]
+account_id = "your_account_id"
+
+[assets]
+directory = "./dist/static"
+binding = "ASSETS"
 
 [build]
 command = "npm run build"
+
+[env.preview]
+name = "{{name}}-preview"