feat: add zephyr as an option

Author: Nsttt

frameworks/react-cra/add-ons/zephyr/assets/src/routes/demo.zephyr.tsx

@@ -0,0 +1,59 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/demo/zephyr')({
+  component: ZephyrDemo,
+})
+
+function ZephyrDemo() {
+  return (
+    <div className="p-8 max-w-4xl mx-auto">
+      <h1 className="text-3xl font-bold mb-6">Zephyr Cloud Demo</h1>
+      
+      <div className="space-y-6">
+        <div className="bg-blue-50 border border-blue-200 rounded-lg p-6">
+          <h2 className="text-xl font-semibold mb-3 text-blue-800">🚀 Deployment Ready</h2>
+          <p className="text-blue-700">
+            Your application is configured with Zephyr Cloud! Simply run <code className="bg-blue-100 px-2 py-1 rounded">npm run build</code> to deploy your app.
+          </p>
+        </div>
+
+        <div className="bg-green-50 border border-green-200 rounded-lg p-6">
+          <h2 className="text-xl font-semibold mb-3 text-green-800">✨ Key Features</h2>
+          <ul className="list-disc list-inside text-green-700 space-y-2">
+            <li>Micro-frontend architecture support</li>
+            <li>Automatic deployments to multiple environments</li>
+            <li>Version rollback and roll-forward capabilities</li>
+            <li>Chrome extension for easy app access</li>
+            <li>Multi-cloud provider support (AWS, Cloudflare, Netlify)</li>
+          </ul>
+        </div>
+
+        <div className="bg-purple-50 border border-purple-200 rounded-lg p-6">
+          <h2 className="text-xl font-semibold mb-3 text-purple-800">🔧 Next Steps</h2>
+          <ol className="list-decimal list-inside text-purple-700 space-y-2">
+            <li>Initialize a git repository: <code className="bg-purple-100 px-2 py-1 rounded">git init</code></li>
+            <li>Commit your changes: <code className="bg-purple-100 px-2 py-1 rounded">git add . && git commit -m "Initial commit"</code></li>
+            <li>Build and deploy: <code className="bg-purple-100 px-2 py-1 rounded">npm run build</code></li>
+            <li>Follow the CLI prompts to log in and deploy</li>
+          </ol>
+        </div>
+
+        <div className="bg-gray-50 border border-gray-200 rounded-lg p-6">
+          <h2 className="text-xl font-semibold mb-3 text-gray-800">📚 Learn More</h2>
+          <p className="text-gray-700">
+            Visit the{' '}
+            <a 
+              href="https://docs.zephyr-cloud.io/" 
+              target="_blank" 
+              rel="noopener noreferrer"
+              className="text-blue-600 hover:text-blue-800 underline"
+            >
+              Zephyr Cloud documentation
+            </a>{' '}
+            to explore advanced features and integrations.
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}

frameworks/react-cra/add-ons/zephyr/assets/vite.config.ts.append

@@ -0,0 +1,8 @@
+{
+  "name": "Zephyr Cloud",
+  "description": "The fastest way to go from idea to production.",
+  "phase": "add-on",
+  "modes": ["file-router", "code-router"],
+  "link": "https://zephyr-cloud.io/",
+  "type": "add-on"
+}

frameworks/react-cra/add-ons/zephyr/info.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "vite-plugin-zephyr": "latest"
+  }
+}

frameworks/react-cra/add-ons/zephyr/package.json

@@ -3,14 +3,15 @@ import viteReact from "@vitejs/plugin-react";<% if (tailwind) { %>
 import tailwindcss from "@tailwindcss/vite";
 <% } %><%if (fileRouter) { %>
 import { TanStackRouterVite } from "@tanstack/router-plugin/vite";<% } %><% if (addOnEnabled['module-federation']) { %>
-import { federation } from "@module-federation/vite";<% } %>
+import { federation } from "@module-federation/vite";<% } %><% if (addOnEnabled.zephyr) { %>
+import { withZephyr } from 'vite-plugin-zephyr';<% } %>
 import { resolve } from "node:path";<% if (addOnEnabled['module-federation']) { %>
 import federationConfig from "./module-federation.config.js";
 <% } %>
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [<% if(fileRouter) { %>TanStackRouterVite({ autoCodeSplitting: true }), <% } %>viteReact()<% if (tailwind) { %>, tailwindcss()<% } %><% if (addOnEnabled['module-federation']) { %>, federation(federationConfig)<% } %>],
+  plugins: [<% if(fileRouter) { %>TanStackRouterVite({ autoCodeSplitting: true }), <% } %>viteReact()<% if (tailwind) { %>, tailwindcss()<% } %><% if (addOnEnabled['module-federation']) { %>, federation(federationConfig)<% } %><% if (addOnEnabled.zephyr) { %>, withZephyr(<% if (addOnEnabled['module-federation']) { %>{ mfConfig: federationConfig }<% } %>)<% } %>],
   test: {
     globals: true,
     environment: "jsdom",