@tanstack/create 0.49.3 → 0.59.4

package/src/frameworks/react/project/base/src/components/Header.tsx.ejs

@@ -1,8 +1,7 @@
 <% if (addOns.length === 0 && integrations.length === 0 && routes.length === 0) { ignoreFile() } %>import { Link } from '@tanstack/react-router'
 <% for(const integration of integrations.filter(i => i.type === 'header-user')) { %>
 import <%= integration.jsName %> from "<%= relativePath(integration.path) %>";
-<% } %><% if (!tailwind) { %>
-import './Header.css'<% } %><% if (tailwind) {
+<% } %><%
 const icons = new Set([
   "Menu",
   "X",
@@ -26,10 +25,9 @@ import { useState } from 'react';
 import {
   <%= Array.from(icons).sort().join(", ") %>
 } from "lucide-react";
-<% } %>
 
 export default function Header() {
-<% if (tailwind) {
+<%
 const menusWithChildren = addOns.filter(a => a.routes?.some(r => r.children));
 const userHeaders = integrations.filter(i => i.type === 'header-user');
 %>
@@ -155,32 +153,4 @@ const userHeaders = integrations.filter(i => i.type === 'header-user');
       </aside>
     </>
   );
-<% } else { %>
-  return (
-<% if (tailwind) { %>
-    <header className="p-2 flex gap-2 bg-white text-black justify-between">
-      <nav className="flex flex-row">
-        <div className="px-2 font-bold">
-<% } else { %>
-  <header className="header">
-    <nav className="nav">
-      <div className="nav-item">
-<% } %>
-          <Link to="/">Home</Link>
-        </div>
-<% for(const addOn of addOns) {
-  for(const route of (addOn?.routes||[])?.filter(r => r.url && r.name)) { %>
-<div className="px-2 font-bold"><Link to="<%= route.url %>"><%= route.name %></Link></div>
-<% } } %>
-      </nav>
-<% if (integrations.filter(i => i.type === 'header-user').length > 0) { %>
-      <div>
-<% for(const integration of integrations.filter(i => i.type === 'header-user')) { %>
-  <<%= integration.jsName %> />
-<% } %>
-      </div>
-<% } %>
-    </header>
-  )
-<% } %>
 }

package/src/frameworks/react/project/base/src/routes/__root.tsx.ejs

@@ -1,6 +1,6 @@
 <% let hasContext = addOnEnabled["apollo-client"] || addOnEnabled["tanstack-query"]; %>
-<% if (!fileRouter) { ignoreFile() } %>import { <% if (addOnEnabled.start) { %>
-  HeadContent<% } else { %>Outlet<% } %><% if (addOnEnabled.start) { %>, Scripts<% } %>, <% if (hasContext) { %>createRootRouteWithContext<% } else { %>createRootRoute<% } %><% if (addOnEnabled.paraglide) { %>, redirect<% } %> } from '@tanstack/react-router'
+import {
+  HeadContent, Scripts, <% if (hasContext) { %>createRootRouteWithContext<% } else { %>createRootRoute<% } %> } from '@tanstack/react-router'
 import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools';
 import { TanStackDevtools } from '@tanstack/react-devtools'
 <% if (addOns.length) { %>
@@ -8,11 +8,9 @@ import Header from '../components/Header'
 <% } %><% for(const integration of integrations.filter(i => i.type === 'layout' || i.type === 'provider' || i.type === 'devtools')) { %>
 import <%= integration.jsName %> from '<%= relativePath(integration.path, true) %>'
 <% } %><% if (addOnEnabled.paraglide) { %>
-import { getLocale, shouldRedirect } from '@/paraglide/runtime'
+import { getLocale } from '@/paraglide/runtime'
 <% } %>
-<% if (addOnEnabled.start) { %>
 import appCss from '../styles.css?url'
-<% } %>
 <% if (addOnEnabled["apollo-client"]) { %>
 import type { ApolloClientIntegration } from "@apollo/client-integration-tanstack-start";
 <% } %>
@@ -41,20 +39,9 @@ export const Route = <% if (hasContext) { %>createRootRouteWithContext<MyRouterC
     if (typeof document !== 'undefined') {
       document.documentElement.setAttribute('lang', getLocale())
     }
-
-    <% if (!addOnEnabled.start) { %>// Client-side fallback redirect for SPA/file-router builds. Start apps should
-    // prefer server-side paraglideMiddleware (see start template server.ts).
-    if (typeof window !== 'undefined') {
-      const decision = await shouldRedirect({ url: window.location.href })
-
-      if (decision.redirectUrl) {
-        throw redirect({ href: decision.redirectUrl.href })
-      }
-    }<% } %>
   },
 <% } %>
-<% if (addOnEnabled.start) { %>
-    head: () => ({
+  head: () => ({
     meta: [
       {
         charSet: 'utf-8',
@@ -74,35 +61,9 @@ export const Route = <% if (hasContext) { %>createRootRouteWithContext<MyRouterC
       },
     ],
   }),
-<% } %>
-<% if (addOnEnabled.start) { %>
   shellComponent: RootDocument
-<% } else { %>
-  component: () => (
-    <>
-  <% for(const integration of integrations.filter(i => i.type === 'provider')) { %><<%= integration.jsName %>>
-  <% } %><% if (addOns.length) { %><Header />  
-  <% } %><Outlet />
-        <TanStackDevtools
-        config={{
-          position: 'bottom-right',
-        }}
-        plugins={[
-          {
-            name: 'Tanstack Router',
-            render: <TanStackRouterDevtoolsPanel />,
-          },
-          <% for(const integration of integrations.filter(i => i.type === 'devtools')) { %><%= integration.jsName %>,<% } %>
-        ]}
-      />
-      <% for(const integration of integrations.filter(i => i.type === 'layout')) { %><<%= integration.jsName %> />
-      <% } %><% for(const integration of integrations.filter(i => i.type === 'provider').reverse()) { %></<%= integration.jsName %>>
-    <% } %>
-    </>)
-<% } %>
 })
 
-<% if (addOnEnabled.start) { %>
 function RootDocument({ children }: { children: React.ReactNode }) {
   return (
     <% if (addOnEnabled.paraglide) { %><html lang={getLocale()}><% } else { %><html lang="en"><% } %>
@@ -132,4 +93,3 @@ function RootDocument({ children }: { children: React.ReactNode }) {
     </html>
   )
 }
-<% } %>

package/src/frameworks/react/project/base/src/routes/index.tsx.ejs

@@ -1,67 +1,105 @@
-<% if (codeRouter || addOnEnabled.start) { ignoreFile() } %>
 import { createFileRoute } from "@tanstack/react-router";
-import logo from "../logo.svg";<% if (!tailwind) { %>
-import "../App.css";
-<% } %>
+import {
+  Zap, Server, Route as RouteIcon, Shield, Waves, Sparkles,
+} from "lucide-react";
 
-export const Route = createFileRoute("/")({
-  component: App,
-});
+export const Route = createFileRoute("/")({ component: App });
 
 function App() {
-  return (<% if (tailwind) { %>
-    <div className="text-center">
-      <header className="min-h-screen flex flex-col items-center justify-center bg-[#282c34] text-white text-[calc(10px+2vmin)]">
-        <img
-          src={logo}
-          className="h-[40vmin] pointer-events-none animate-[spin_20s_linear_infinite]"
-          alt="logo"
-        />
-        <p>
-          Edit <code>src/routes/index.tsx</code> and save to reload.
-        </p>
-        <a
-          className="text-[#61dafb] hover:underline"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-        <a
-          className="text-[#61dafb] hover:underline"
-          href="https://tanstack.com"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn TanStack
-        </a>
-      </header>
-    </div>
-<% } else { %>
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/routes/index.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-        <a
-          className="App-link"
-          href="https://tanstack.com"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn TanStack
-        </a>
-      </header>
+  const features = [
+    {
+      icon: <Zap className="w-12 h-12 text-cyan-400" />,
+      title: "Powerful Server Functions",
+      description: "Write server-side code that seamlessly integrates with your client components. Type-safe, secure, and simple.",
+    },
+    {
+      icon: <Server className="w-12 h-12 text-cyan-400" />,
+      title: "Flexible Server Side Rendering",
+      description: "Full-document SSR, streaming, and progressive enhancement out of the box. Control exactly what renders where.",
+    },
+    {
+      icon: <RouteIcon className="w-12 h-12 text-cyan-400" />,
+      title: "API Routes",
+      description: "Build type-safe API endpoints alongside your application. No separate backend needed.",
+    },
+    {
+      icon: <Shield className="w-12 h-12 text-cyan-400" />,
+      title: "Strongly Typed Everything",
+      description: "End-to-end type safety from server to client. Catch errors before they reach production.",
+    },
+    {
+      icon: <Waves className="w-12 h-12 text-cyan-400" />,
+      title: "Full Streaming Support",
+      description: "Stream data from server to client progressively. Perfect for AI applications and real-time updates.",
+    },
+    {
+      icon: <Sparkles className="w-12 h-12 text-cyan-400" />,
+      title: "Next Generation Ready",
+      description: "Built from the ground up for modern web applications. Deploy anywhere JavaScript runs.",
+    },
+  ];
+
+  return (
+    <div className="min-h-screen bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900">
+      <section className="relative py-20 px-6 text-center overflow-hidden">
+        <div className="absolute inset-0 bg-gradient-to-r from-cyan-500/10 via-blue-500/10 to-purple-500/10"></div>
+        <div className="relative max-w-5xl mx-auto">
+          <div className="flex items-center justify-center gap-6 mb-6">
+            <img
+              src="/tanstack-circle-logo.png"
+              alt="TanStack Logo"
+              className="w-24 h-24 md:w-32 md:h-32"
+            />
+            <h1 className="text-6xl md:text-7xl font-black text-white [letter-spacing:-0.08em]">
+              <span className="text-gray-300">TANSTACK</span>{" "}
+              <span className="bg-gradient-to-r from-cyan-400 to-blue-400 bg-clip-text text-transparent">
+                START
+              </span>
+            </h1>
+          </div>
+          <p className="text-2xl md:text-3xl text-gray-300 mb-4 font-light">
+            The framework for next generation AI applications
+          </p>
+          <p className="text-lg text-gray-400 max-w-3xl mx-auto mb-8">
+            Full-stack framework powered by TanStack Router for React and Solid.
+            Build modern applications with server functions, streaming, and type
+            safety.
+          </p>
+          <div className="flex flex-col items-center gap-4">
+            <a
+              href="https://tanstack.com/start"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="px-8 py-3 bg-cyan-500 hover:bg-cyan-600 text-white font-semibold rounded-lg transition-colors shadow-lg shadow-cyan-500/50"
+            >
+              Documentation
+            </a>
+            <p className="text-gray-400 text-sm mt-2">
+              Begin your TanStack Start journey by editing{" "}
+              <code className="px-2 py-1 bg-slate-700 rounded text-cyan-400">
+                /src/routes/index.tsx
+              </code>
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <section className="py-16 px-6 max-w-7xl mx-auto">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {features.map((feature, index) => (
+            <div
+              key={index}
+              className="bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-xl p-6 hover:border-cyan-500/50 transition-all duration-300 hover:shadow-lg hover:shadow-cyan-500/10"
+            >
+              <div className="mb-4">{feature.icon}</div>
+              <h3 className="text-xl font-semibold text-white mb-3">
+                {feature.title}
+              </h3>
+              <p className="text-gray-400 leading-relaxed">{feature.description}</p>
+            </div>
+          ))}
+        </div>
+      </section>
     </div>
-<% } %>  );
+  );
 }

package/src/frameworks/react/project/base/src/styles.css.ejs

@@ -1,7 +1,7 @@
-<% if (tailwind) { %>@import "tailwindcss";
-<% } %>
+@import "tailwindcss";
+
 body {
-  <% if (tailwind) { %>@apply m-0;<% } else { %>margin: 0;<% } %>
+  @apply m-0;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
     "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;

package/src/frameworks/react/project/base/tsconfig.json.ejs

@@ -1,4 +1,4 @@
-<% if (!typescript) { ignoreFile() } %>{
+{
   <% if (addOnEnabled.eslint) { %>"include": ["**/*.ts", "**/*.tsx", "eslint.config.js", "prettier.config.js", "vite.config.js"],
   <% } else { %>"include": ["**/*.ts", "**/*.tsx"],<% } %>
   "compilerOptions": {

package/src/frameworks/react/project/base/vite.config.ts.ejs

@@ -1,33 +1,39 @@
-<% if (addOnEnabled.start) { ignoreFile() } %>import { defineConfig } from "vite";
-import { devtools } from '@tanstack/devtools-vite'<% if (addOnEnabled.paraglide) { %>
-import { paraglideVitePlugin } from "@inlang/paraglide-js"<% } %>
-import viteReact from "@vitejs/plugin-react";
-<% if (tailwind) { %>
-import tailwindcss from "@tailwindcss/vite";
-<% } %><%if (fileRouter) { %>
-import { tanstackRouter } from "@tanstack/router-plugin/vite";<% } %><% if (addOnEnabled['module-federation']) { %>
-import { federation } from "@module-federation/vite";<% } %>
-import { fileURLToPath, URL } from 'node:url';<% if (addOnEnabled['module-federation']) { %>
-import federationConfig from "./module-federation.config.js";<% } %><% for(const integration of integrations.filter(i => i.type === 'vite-plugin')) { %><%- integrationImportContent(integration) %>
+import { defineConfig } from 'vite'
+import { devtools } from '@tanstack/devtools-vite'
+<% if (addOnEnabled.paraglide) { -%>
+import { paraglideVitePlugin } from "@inlang/paraglide-js"
+<% } -%>
+import { tanstackStart } from '@tanstack/react-start/plugin/vite';
+import viteReact from '@vitejs/plugin-react'
+import viteTsConfigPaths from 'vite-tsconfig-paths'
+import { fileURLToPath, URL } from 'url'
+import tailwindcss from "@tailwindcss/vite"
+<% for(const integration of integrations.filter(i => i.type === 'vite-plugin')) { %><%- integrationImportContent(integration) %>
 <% } %>
 
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [devtools(), <% if (addOnEnabled.paraglide) { %>paraglideVitePlugin({
-    project: './project.inlang',
-    outdir: './src/paraglide',
-    strategy: ['url'],
-  }), <% } %><% for(const integration of integrations.filter(i => i.type === 'vite-plugin')) { %><%- integrationImportCode(integration) %>,<% } %> <% if(fileRouter) { %>tanstackRouter({
-    target: "react",
-    autoCodeSplitting: true,
-  }), <% } %>viteReact(<% if (addOnEnabled.compiler) { %>{
-    babel: {
-      plugins: ["babel-plugin-react-compiler"],
-    },
-  }<% } %>)<% if (tailwind) { %>, tailwindcss()<% } %><% if (addOnEnabled['module-federation']) { %>, federation(federationConfig)<% } %>],
+const config = defineConfig({
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url)),
     },
-  }
-});
+  },
+  plugins: [devtools(), <% if (addOnEnabled.paraglide) { %>paraglideVitePlugin({
+    project: './project.inlang',
+    outdir: './src/paraglide',
+    strategy: ['url'],
+  }), <% } %><% for(const integration of integrations.filter(i => i.type === 'vite-plugin')) { %><%- integrationImportCode(integration) %>,<% } %>
+    // this is the plugin that enables path aliases
+    viteTsConfigPaths({
+      projects: ['./tsconfig.json'],
+    }),
+    tailwindcss(),
+    tanstackStart(),
+    viteReact(<% if (addOnEnabled.compiler) { %>{
+      babel: {
+        plugins: ["babel-plugin-react-compiler"],
+      },
+    }<% } %>),
+  ],
+})
+
+export default config

package/src/frameworks/react/project/packages.json

@@ -9,8 +9,8 @@
   },
   "tailwindcss": {
     "dependencies": {
-      "@tailwindcss/vite": "^4.0.6",
-      "tailwindcss": "^4.0.6",
+      "@tailwindcss/vite": "^4.1.18",
+      "tailwindcss": "^4.1.18",
       "lucide-react": "^0.545.0"
     }
   },

package/src/frameworks/solid/add-ons/better-auth/info.json

@@ -8,7 +8,7 @@
   "color": "#000000",
   "link": "https://www.better-auth.com/",
   "modes": ["file-router"],
-  "dependsOn": ["start"],
+  
   "routes": [
     {
       "url": "/demo/better-auth",

package/src/frameworks/solid/hosts/cloudflare/info.json

@@ -9,7 +9,6 @@
   "exclusive": ["deploy"],
   "color": "#F38020",
   "priority": 200,
-  "tailwind": false,
   "integrations": [
     {
       "type": "vite-plugin",

package/src/frameworks/solid/hosts/netlify/info.json

@@ -9,7 +9,6 @@
   "exclusive": ["deploy"],
   "color": "#00C7B7",
   "priority": 180,
-  "tailwind": false,
   "integrations": [
     {
       "type": "vite-plugin",

package/src/frameworks/solid/hosts/nitro/info.json

@@ -8,7 +8,6 @@
   "category": "deploy",
   "exclusive": ["deploy"],
   "color": "#ECDC5A",
-  "tailwind": false,
   "integrations": [
     {
       "type": "vite-plugin",

package/src/frameworks/solid/hosts/railway/info.json

@@ -9,7 +9,6 @@
   "exclusive": ["deploy"],
   "color": "#9B4DCA",
   "priority": 160,
-  "tailwind": false,
   "integrations": [
     {
       "type": "vite-plugin",

package/src/frameworks/solid/index.ts

@@ -34,14 +34,9 @@ export function createFrameworkDefinition(): FrameworkDefinition {
     basePackageJSON,
     optionalPackages,
     supportedModes: {
-      'code-router': {
-        displayName: 'Code Router',
-        description: 'TanStack Router using code to define the routes',
-        forceTypescript: true,
-      },
       'file-router': {
         displayName: 'File Router',
-        description: 'TanStack Router using files to define the routes',
+        description: 'TanStack Start with file-based routing',
         forceTypescript: true,
       },
     },