Initial commit

templates/vite-react/.env.example

@@ -0,0 +1,18 @@
+# TinaCloud Credentials
+# Get these from https://app.tina.io after creating a project
+
+# Note: Vite requires VITE_ prefix for environment variables
+# These variables are exposed to the client, so only use public values
+
+# Client ID (public, safe to expose)
+VITE_TINA_CLIENT_ID=your_client_id_here
+
+# Read-only token (keep secret, but exposed to client in Vite)
+# For production, use backend proxy to keep this secret
+VITE_TINA_TOKEN=your_read_only_token_here
+
+# Git branch
+VITE_GITHUB_BRANCH=main
+
+# For self-hosted backend
+# VITE_TINA_API_URL=/api/tina/gql

templates/vite-react/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "vite-react-tinacms-app",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "tinacms dev -c \"vite\"",
+    "build": "tinacms build && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^6.28.0",
+    "tinacms": "^2.9.0"
+  },
+  "devDependencies": {
+    "@tinacms/cli": "^1.11.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "typescript": "^5.6.0",
+    "vite": "^7.1.0"
+  }
+}

templates/vite-react/tina-config.ts

@@ -0,0 +1,69 @@
+import { defineConfig } from 'tinacms'
+import { blogPostCollection } from './collections/blog-post'
+import { docPageCollection } from './collections/doc-page'
+import { authorCollection } from './collections/author'
+
+/**
+ * TinaCMS Configuration for Vite + React
+ *
+ * This config works with Vite + React applications.
+ *
+ * Key Differences from Next.js:
+ * - Environment variables use VITE_ prefix
+ * - Admin interface setup is more manual
+ * - Data fetching requires custom implementation
+ *
+ * Usage:
+ * 1. Copy this file to: tina/config.ts
+ * 2. Copy collection files to: tina/collections/
+ * 3. Set environment variables in .env
+ * 4. Run: npm run dev
+ * 5. Access admin: http://localhost:3000/admin/index.html
+ *
+ * Visual Editing:
+ * - Import useTina from 'tinacms/dist/react'
+ * - Wrap your components with useTina hook
+ * - See templates for examples
+ */
+
+// Get Git branch from environment
+const branch =
+  process.env.VITE_GITHUB_BRANCH ||
+  process.env.VITE_VERCEL_GIT_COMMIT_REF ||
+  'main'
+
+export default defineConfig({
+  // Git branch to use
+  branch,
+
+  // TinaCloud credentials
+  // Note: Use VITE_ prefix for Vite environment variables
+  clientId: process.env.VITE_TINA_CLIENT_ID,
+  token: process.env.VITE_TINA_TOKEN,
+
+  // Build configuration
+  build: {
+    outputFolder: 'admin',
+    publicFolder: 'public',
+  },
+
+  // Media configuration
+  media: {
+    tina: {
+      mediaRoot: 'uploads',
+      publicFolder: 'public',
+    },
+  },
+
+  // Content schema
+  schema: {
+    collections: [
+      blogPostCollection,
+      authorCollection,
+      docPageCollection,
+    ],
+  },
+
+  // Optional: Self-hosted backend
+  // contentApiUrlOverride: '/api/tina/gql',
+})

templates/vite-react/vite.config.ts

@@ -0,0 +1,21 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+/**
+ * Vite Configuration for TinaCMS + React
+ *
+ * Key settings:
+ * - React plugin for JSX support
+ * - Port 3000 (TinaCMS default)
+ * - Host 0.0.0.0 for Docker compatibility
+ */
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 3000,
+    host: '0.0.0.0',  // Allows external connections (Docker, network)
+  },
+  build: {
+    outDir: 'dist',
+  },
+})