create-rari-app 0.1.3

package/dist/index.js

@@ -0,0 +1,150 @@
+#!/usr/bin/env node
+import { spawn } from "node:child_process";
+import { mkdir, readFile, writeFile } from "node:fs/promises";
+import { dirname, join } from "node:path";
+import process from "node:process";
+import { cancel, confirm, intro, isCancel, outro, select, spinner, text } from "@clack/prompts";
+import pc from "picocolors";
+
+//#region src/index.ts
+const templates = { default: {
+	name: "Default",
+	description: "A clean starter with React Server Components"
+} };
+const packageManagers = {
+	pnpm: "pnpm",
+	npm: "npm",
+	yarn: "yarn",
+	bun: "bun"
+};
+async function main() {
+	console.clear();
+	intro(pc.bgCyan(pc.black(" create-rari-app ")));
+	const projectName = await text({
+		message: "What is your project named?",
+		placeholder: "my-rari-app",
+		validate: (value) => {
+			if (!value) return "Please enter a project name.";
+			if (value.includes(" ")) return "Project name cannot contain spaces.";
+			if (!/^[\w-]+$/.test(value)) return "Project name can only contain letters, numbers, hyphens, and underscores.";
+		}
+	});
+	if (isCancel(projectName)) {
+		cancel("Operation cancelled.");
+		process.exit(0);
+	}
+	const template = await select({
+		message: "Which template would you like to use?",
+		options: Object.entries(templates).map(([key, { name, description }]) => ({
+			value: key,
+			label: name,
+			hint: description
+		}))
+	});
+	if (isCancel(template)) {
+		cancel("Operation cancelled.");
+		process.exit(0);
+	}
+	const packageManager = await select({
+		message: "Which package manager would you like to use?",
+		options: Object.entries(packageManagers).map(([key, value]) => ({
+			value: key,
+			label: value
+		}))
+	});
+	if (isCancel(packageManager)) {
+		cancel("Operation cancelled.");
+		process.exit(0);
+	}
+	const installDeps = await confirm({
+		message: "Install dependencies?",
+		initialValue: true
+	});
+	if (isCancel(installDeps)) {
+		cancel("Operation cancelled.");
+		process.exit(0);
+	}
+	const options = {
+		name: projectName,
+		template,
+		packageManager,
+		installDeps
+	};
+	await createProject(options);
+	outro(pc.green("🎉 Project created successfully!"));
+	console.log();
+	console.log(pc.cyan("Next steps:"));
+	console.log(pc.gray(`  cd ${options.name}`));
+	if (!options.installDeps) console.log(pc.gray(`  ${options.packageManager} install`));
+	console.log(pc.gray(`  ${options.packageManager} run dev`));
+	console.log();
+}
+async function createProject(options) {
+	const projectPath = join(process.cwd(), options.name);
+	const templatePath = join(import.meta.dirname, "..", "templates", options.template);
+	const s = spinner();
+	try {
+		s.start("Creating project structure...");
+		await mkdir(projectPath, { recursive: true });
+		await copyTemplate(templatePath, projectPath, options);
+		s.stop("Project structure created.");
+		if (options.installDeps) {
+			s.start("Installing dependencies...");
+			await installDependencies(projectPath, options.packageManager);
+			s.stop("Dependencies installed.");
+		}
+	} catch (error) {
+		s.stop("Error occurred.");
+		throw error;
+	}
+}
+async function copyTemplate(templatePath, projectPath, options) {
+	const templateFiles = [
+		"package.json",
+		"vite.config.ts",
+		"tsconfig.json",
+		"tsconfig.app.json",
+		"tsconfig.node.json",
+		"index.html",
+		"src/main.tsx",
+		"src/App.tsx",
+		"src/vite-env.d.ts",
+		"src/styles/index.css",
+		"src/components/Welcome.tsx",
+		"src/components/ServerTime.tsx",
+		".gitignore"
+	];
+	await mkdir(join(projectPath, "src", "components"), { recursive: true });
+	await mkdir(join(projectPath, "src", "styles"), { recursive: true });
+	for (const file of templateFiles) {
+		const sourcePath = join(templatePath, file);
+		const destPath = join(projectPath, file);
+		try {
+			let content = await readFile(sourcePath, "utf-8");
+			content = content.replace(/\{\{PROJECT_NAME\}\}/g, options.name).replace(/\{\{PACKAGE_MANAGER\}\}/g, options.packageManager);
+			await mkdir(dirname(destPath), { recursive: true });
+			await writeFile(destPath, content);
+		} catch (error) {
+			console.warn(`Warning: Could not copy ${file}:`, error);
+		}
+	}
+}
+async function installDependencies(projectPath, packageManager) {
+	return new Promise((resolve, reject) => {
+		const child = spawn(packageManager, ["install"], {
+			cwd: projectPath,
+			stdio: "pipe"
+		});
+		child.on("close", (code) => {
+			if (code === 0) resolve();
+			else reject(/* @__PURE__ */ new Error(`${packageManager} install failed with code ${code}`));
+		});
+		child.on("error", reject);
+	});
+}
+main().catch((error) => {
+	console.error(pc.red("Error:"), error.message);
+	process.exit(1);
+});
+
+//#endregion

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "create-rari-app",
+  "type": "module",
+  "version": "0.1.3",
+  "description": "Create Runtime Accelerated Rendering Infrastructure (Rari) applications with no build configuration",
+  "author": "Ryan Skinner",
+  "license": "MIT",
+  "homepage": "https://github.com/rari-build/rari#readme",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/rari-build/rari.git",
+    "directory": "packages/create-rari-app"
+  },
+  "bugs": {
+    "url": "https://github.com/rari-build/rari/issues"
+  },
+  "keywords": [
+    "rari",
+    "react",
+    "scaffolding",
+    "cli",
+    "create-app",
+    "generator",
+    "boilerplate",
+    "template",
+    "server-components",
+    "rust",
+    "framework",
+    "zero-config",
+    "starter",
+    "project-template"
+  ],
+  "bin": {
+    "create-rari-app": "dist/index.js"
+  },
+  "files": [
+    "dist",
+    "templates"
+  ],
+  "scripts": {
+    "build": "pnpm clean && pnpm typecheck && tsdown",
+    "dev": "tsdown --watch",
+    "clean": "rm -rf dist",
+    "typecheck": "tsgo",
+    "lint": "oxlint && eslint",
+    "lint:fix": "oxlint --fix && eslint --fix"
+  },
+  "dependencies": {
+    "@clack/prompts": "^0.8.2",
+    "picocolors": "^1.1.1"
+  },
+  "devDependencies": {
+    "@types/node": "^24.1.0",
+    "@typescript/native-preview": "7.0.0-dev.20250611.1",
+    "eslint": "^9.32.0",
+    "oxlint": "^1.8.0",
+    "tsdown": "^0.12.9"
+  }
+}

package/templates/default/README.md

@@ -0,0 +1,122 @@
+# {{PROJECT_NAME}}
+
+A high-performance React Server Components application powered by [Rari](https://rari.dev).
+
+## 🚀 Getting Started
+
+```bash
+# Install dependencies
+{{INSTALL_COMMAND}}
+
+# Start development server
+{{PACKAGE_MANAGER}} run dev
+```
+
+Visit [http://localhost:5173](http://localhost:5173) to see your app.
+
+## 🚀 Deploy to the Cloud
+
+This Rari application is pre-configured for cloud deployment.
+
+### 🚂 Railway
+
+### Quick Deploy
+
+1. **Push to GitHub**:
+   ```bash
+   git add .
+   git commit -m "Initial commit"
+   git push origin main
+   ```
+
+2. **Deploy to Railway**:
+   - Go to [railway.app](https://railway.app)
+   - Create new project → "Deploy from GitHub repo"
+   - Select your repository
+   - Click "Deploy Now"
+
+3. **Generate Domain**:
+   - In Railway dashboard → Settings → Networking
+   - Click "Generate Domain"
+   - Your app will be live! 🎉
+
+### Alternative: Setup Railway from CLI
+
+```bash
+# Configure Railway deployment files
+{{PACKAGE_MANAGER}} run deploy:railway
+
+# Follow the instructions to deploy
+```
+
+### 🎨 Render
+
+1. **Push to GitHub**:
+   ```bash
+   git add .
+   git commit -m "Initial commit"
+   git push origin main
+   ```
+
+2. **Deploy to Render**:
+   - Go to [render.com](https://render.com)
+   - Create new "Web Service"
+   - Connect your GitHub repository
+   - Render auto-detects Node.js and uses `render.yaml`
+   - Click "Create Web Service"
+
+### Alternative: Setup Render from CLI
+
+```bash
+# Configure Render deployment files
+{{PACKAGE_MANAGER}} run deploy:render
+
+# Follow the instructions to deploy
+```
+
+## 📜 Available Scripts
+
+```bash
+# Development
+{{PACKAGE_MANAGER}} run dev          # Start development server
+{{PACKAGE_MANAGER}} run build        # Build for production
+
+# Production
+{{PACKAGE_MANAGER}} start            # Start production server
+{{PACKAGE_MANAGER}} run start:local  # Start local production server
+
+# Deployment
+{{PACKAGE_MANAGER}} run deploy:railway  # Setup Railway deployment
+{{PACKAGE_MANAGER}} run deploy:render   # Setup Render deployment
+
+# Code Quality
+{{PACKAGE_MANAGER}} run lint         # Run linters
+{{PACKAGE_MANAGER}} run typecheck    # Run TypeScript checks
+```
+
+## 🌍 Environment Variables
+
+Cloud platforms automatically provide:
+- `PORT` - Server port (platform assigns this)
+- `NODE_ENV=production` - Production mode
+
+Optional variables you can set:
+- `RUST_LOG=debug` - Rust logging level
+
+## 🏗️ Architecture
+
+- **⚡ Rust Runtime**: Native performance with zero-cost abstractions
+- **🚀 React Server Components**: True server-side rendering
+- **📁 File-based Routing**: Automatic route generation
+- **🎯 Zero Configuration**: Works out of the box
+
+## 📚 Learn More
+
+- [Rari Documentation](https://rari.dev)
+- [Railway Documentation](https://docs.railway.app)
+- [Render Documentation](https://render.com/docs)
+- [React Server Components](https://react.dev/reference/react/use-server)
+
+---
+
+Built with ❤️ using [Rari](https://rari.dev)

package/templates/default/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{{PROJECT_NAME}}</title>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+</html>

package/templates/default/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "type": "module",
+  "version": "0.1.0",
+  "private": true,
+  "description": "A Runtime Accelerated Rendering Infrastructure (Rari) application",
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "scripts": {
+    "build": "{{PACKAGE_MANAGER}} clean && {{PACKAGE_MANAGER}} typecheck && vite build",
+    "dev": "NODE_OPTIONS='--max-http-header-size=1048576' vite",
+    "start": "rari start",
+    "start:local": "rari start",
+    "deploy:railway": "rari deploy railway",
+    "deploy:render": "rari deploy render",
+    "clean": "rm -rf dist",
+    "lint": "oxlint && eslint",
+    "lint:fix": "oxlint --fix && eslint --fix",
+    "typecheck": "tsgo"
+  },
+  "dependencies": {
+    "rari": "latest",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.11",
+    "@types/node": "^24.1.0",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@typescript/native-preview": "7.0.0-dev.20250611.1",
+    "@vitejs/plugin-react-oxc": "^0.2.3",
+    "eslint": "^9.32.0",
+    "oxlint": "^1.8.0",
+    "rolldown-vite": "^7.0.11",
+    "tailwindcss": "^4.1.11"
+  }
+}

package/templates/default/railway.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://railway.app/railway.schema.json",
+  "build": {
+    "builder": "NIXPACKS"
+  },
+  "deploy": {
+    "startCommand": "npm start",
+    "healthcheckPath": "/",
+    "healthcheckTimeout": 300,
+    "restartPolicyType": "ALWAYS"
+  },
+  "environments": {
+    "production": {
+      "variables": {
+        "NODE_ENV": "production",
+        "RUST_LOG": "info"
+      }
+    }
+  }
+}

package/templates/default/render.yaml

@@ -0,0 +1,14 @@
+services:
+  - type: web
+    name: '{{PROJECT_NAME}}'
+    runtime: node
+    env: node
+    plan: free
+    buildCommand: '{{INSTALL_COMMAND}}'
+    startCommand: '{{PACKAGE_MANAGER}} start'
+    healthCheckPath: /
+    envVars:
+      - key: NODE_ENV
+        value: production
+      - key: RUST_LOG
+        value: info

package/templates/default/src/App.tsx

@@ -0,0 +1,19 @@
+import { RouterProvider } from 'rari/client'
+import { routes } from './.rari/routes'
+
+function App() {
+  return (
+    <RouterProvider
+      routes={routes}
+      config={{
+        basePath: '',
+        useHash: false,
+        caseSensitive: false,
+      }}
+    >
+      <div id="app" />
+    </RouterProvider>
+  )
+}
+
+export default App

package/templates/default/src/components/ServerTime.tsx

@@ -0,0 +1,28 @@
+'use server'
+
+// This is a React Server Component
+export default async function ServerTime() {
+  // This runs on the server!
+  const timestamp = new Date().toISOString()
+
+  // Simulate some async work
+  await new Promise(resolve => setTimeout(resolve, 100))
+
+  return (
+    <div className="bg-gradient-to-r from-green-50 to-blue-50 rounded-xl p-8 shadow-sm border border-green-200">
+      <h2 className="text-2xl font-semibold mb-4 text-gray-900">
+        ⚡ Server Component
+      </h2>
+      <p className="text-gray-600 mb-4">
+        This component renders on the server with Rari's high-performance Rust runtime.
+      </p>
+      <div className="bg-white rounded-lg p-4 border">
+        <p className="text-sm text-gray-500 mb-1">Server timestamp:</p>
+        <p className="font-mono text-lg text-gray-900">{timestamp}</p>
+      </div>
+      <p className="text-xs text-gray-500 mt-4">
+        💡 This timestamp was generated on the server and won't change on refresh.
+      </p>
+    </div>
+  )
+}

package/templates/default/src/components/Welcome.tsx

@@ -0,0 +1,39 @@
+export default function Welcome() {
+  return (
+    <div className="bg-white rounded-xl p-8 shadow-sm">
+      <h2 className="text-2xl font-semibold mb-4 text-gray-900">
+        🎉 Welcome to Rari!
+      </h2>
+      <p className="text-gray-600 mb-4">
+        You've successfully created a new Rari application. This is a client component
+        that renders on both server and client.
+      </p>
+      <div className="space-y-2 text-sm text-gray-500">
+        <p>
+          🚀
+          <strong>High-performance</strong>
+          {' '}
+          React Server Components
+        </p>
+        <p>
+          ⚡
+          <strong>Optimized</strong>
+          {' '}
+          Rust runtime
+        </p>
+        <p>
+          🔥
+          <strong>Hot module</strong>
+          {' '}
+          reloading
+        </p>
+        <p>
+          📦
+          <strong>Zero config</strong>
+          {' '}
+          setup
+        </p>
+      </div>
+    </div>
+  )
+}

package/templates/default/src/main.tsx

@@ -0,0 +1,68 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App'
+import './styles/index.css'
+
+import 'virtual:rsc-integration'
+import 'virtual:rsc-client-components'
+
+export function RouterErrorBoundary({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  const [hasError, setHasError] = React.useState(false)
+  const [error, setError] = React.useState<Error | null>(null)
+
+  React.useEffect(() => {
+    const handleError = (event: ErrorEvent) => {
+      if (
+        event.error?.message?.includes('router')
+        || event.error?.message?.includes('navigation')
+      ) {
+        setHasError(true)
+        setError(event.error)
+      }
+    }
+
+    window.addEventListener('error', handleError)
+    return () => window.removeEventListener('error', handleError)
+  }, [])
+
+  if (hasError) {
+    return (
+      <div className="min-h-screen bg-red-50 flex items-center justify-center p-8">
+        <div className="bg-white rounded-xl p-8 shadow-sm border border-red-200 max-w-2xl">
+          <h1 className="text-2xl font-bold text-red-900 mb-4">Router Error</h1>
+          <p className="text-red-700 mb-4">
+            There was an error with the routing system:
+          </p>
+          <pre className="bg-red-100 p-4 rounded-lg text-sm text-red-800 overflow-auto">
+            {error?.message || 'Unknown router error'}
+          </pre>
+          <button
+            type="button"
+            onClick={() => {
+              setHasError(false)
+              setError(null)
+              window.location.reload()
+            }}
+            className="mt-4 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors"
+          >
+            Reload Page
+          </button>
+        </div>
+      </div>
+    )
+  }
+
+  return <>{children}</>
+}
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <RouterErrorBoundary>
+      <App />
+    </RouterErrorBoundary>
+  </React.StrictMode>,
+)