TanStack · jherr · Oct 21, 2025 · Oct 21, 2025
diff --git a/frameworks/solid/hosts/cloudflare/assets/wrangler.jsonc b/frameworks/solid/hosts/cloudflare/assets/wrangler.jsonc
@@ -0,0 +1,9 @@
+{
+  "$schema": "node_modules/wrangler/config-schema.json",
+  "name": "tanstack-start-app",
+  "compatibility_date": "2025-09-02",
+  "compatibility_flags": [
+    "nodejs_compat"
+  ],
+  "main": "@tanstack/solid-start/server-entry"
+}
diff --git a/frameworks/solid/hosts/cloudflare/info.json b/frameworks/solid/hosts/cloudflare/info.json
@@ -0,0 +1,16 @@
+{
+  "name": "Cloudflare",
+  "description": "Cloudflare deployment setup",
+  "link": "https://developers.cloudflare.com/workers/vite-plugin/",
+  "phase": "add-on",
+  "modes": ["file-router", "code-router"],
+  "type": "host",
+  "priority": 200,
+  "integrations": [
+    {
+      "type": "vite-plugin",
+      "import": "import { cloudflare } from '@cloudflare/vite-plugin'",
+      "code": "cloudflare({ viteEnvironment: { name: 'ssr' } })"
+    }
+  ]
+}
diff --git a/frameworks/solid/hosts/cloudflare/package.json b/frameworks/solid/hosts/cloudflare/package.json
@@ -0,0 +1,11 @@
+{
+  "scripts": {
+    "deploy": "wrangler deploy"
+  },
+  "dependencies": {
+    "@cloudflare/vite-plugin": "^1.13.8"
+  },
+  "devDependencies": {
+    "wrangler": "^4.40.3"
+  }
+}
diff --git a/frameworks/solid/hosts/cloudflare/small-logo.svg b/frameworks/solid/hosts/cloudflare/small-logo.svg
diff --git a/frameworks/solid/hosts/netlify/assets/netlify.toml b/frameworks/solid/hosts/netlify/assets/netlify.toml
@@ -0,0 +1,6 @@
+[build]
+  command = "vite build"
+  dir = "dist/client"
+[dev]
+  command = "vite dev"
+  port = 3000
diff --git a/frameworks/solid/hosts/netlify/info.json b/frameworks/solid/hosts/netlify/info.json
@@ -0,0 +1,16 @@
+{
+  "name": "Netlify",
+  "description": "Netlify deployment setup",
+  "link": "https://docs.netlify.com",
+  "phase": "add-on",
+  "modes": ["file-router", "code-router"],
+  "type": "host",
+  "priority": 180,
+  "integrations": [
+    {
+      "type": "vite-plugin",
+      "import": "import netlify from '@netlify/vite-plugin-tanstack-start'",
+      "code": "netlify()"
+    }
+  ]
+}
diff --git a/frameworks/solid/hosts/netlify/package.json b/frameworks/solid/hosts/netlify/package.json
@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "@netlify/vite-plugin-tanstack-start": "^1.0.2"
+  }
+}
diff --git a/frameworks/solid/hosts/netlify/small-logo.svg b/frameworks/solid/hosts/netlify/small-logo.svg
diff --git a/frameworks/solid/hosts/nitro/package.json b/frameworks/solid/hosts/nitro/package.json
@@ -1,5 +1,5 @@
 {
   "dependencies": {
-    "@tanstack/nitro-v2-vite-plugin": "^1.132.31"
+    "@tanstack/nitro-v2-vite-plugin": "^1.133.19"
   }
 }
diff --git a/frameworks/solid/project/base/package.json b/frameworks/solid/project/base/package.json
@@ -9,13 +9,13 @@
     "test": "vitest run"
   },
   "dependencies": {
-    "@tanstack/solid-router": "^1.132.25",
-    "@tanstack/solid-router-devtools": "^1.132.25",
-    "@tanstack/solid-start": "^1.132.25",
-    "solid-js": "^1.9.5"
+    "@tanstack/solid-router": "^1.133.20",
+    "@tanstack/solid-router-devtools": "^1.133.20",
+    "@tanstack/solid-start": "^1.133.20",
+    "solid-js": "^1.9.9"
   },
   "devDependencies": {
-    "vite-plugin-solid": "^2.11.2",
+    "vite-plugin-solid": "^2.11.10",
     "typescript": "^5.7.2",
     "vite": "^7.1.7"
   }

diff --git a/frameworks/solid/project/base/src/routes/__root.tsx.ejs b/frameworks/solid/project/base/src/routes/__root.tsx.ejs
@@ -11,6 +11,7 @@ import "@fontsource/inter"
   for(const init of addOn.main?.initialize || []) { %>
   <%- init %>
 <% } } %>
+import { HydrationScript } from 'solid-js/web'
 
 import styleCss from "../styles.css?url";
 
@@ -23,23 +24,30 @@ export const Route = createRootRouteWithContext()({
 
 function RootComponent() {
   return (
-    <>
-      <% for(const integration of integrations.filter(i => i.type === 'provider')) { %>
-        <<%= integration.jsName %>>
-      <% } %>
-      <HeadContent />
-      <% if (addOns.length || integrations.length || routes.length) { %>
-        <Header />
-      <% } %>
-      <Outlet />
-      <TanStackRouterDevtools />
-      <% 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 %>>
-      <% } %>
-      <Scripts />
-    </>
+    <html>
+      <head>
+        <HydrationScript />
+        <HeadContent />
+      </head>
+      <body>
+        <Suspense>
+          <% for(const integration of integrations.filter(i => i.type === 'provider')) { %>
+            <<%= integration.jsName %>>
+          <% } %>
+          <% if (addOns.length || integrations.length || routes.length) { %>
+            <Header />
+          <% } %>
+          <Outlet />
+          <TanStackRouterDevtools />
+          <% 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 %>>
+          <% } %>
+          </Suspense>
+        <Scripts />
+      </body>
+    </html>
   )
 }
diff --git a/frameworks/solid/project/packages.json b/frameworks/solid/project/packages.json
@@ -12,7 +12,7 @@
   },
   "file-router": {
     "dependencies": {
-      "@tanstack/router-plugin": "^1.121.3"
+      "@tanstack/router-plugin": "^1.133.21"
     }
   }
 }
diff --git a/frameworks/solid/tests/snapshots/solid/solid-cr-js-npm.json b/frameworks/solid/tests/snapshots/solid/solid-cr-js-npm.json
@@ -12,7 +12,7 @@
     "/src/styles.css": "@import \"tailwindcss\";\n\nbody {\n  @apply m-0;\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\",\n    \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\n    sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n  font-family: source-code-pro, Menlo, Monaco, Consolas, \"Courier New\",\n    monospace;\n}\n",
     "README.md": "Welcome to your new TanStack app! \n\n# Getting Started\n\nTo run this application:\n\n```bash\nnpm install\nnpm run start\n```\n\n# Building For Production\n\nTo build this application for production:\n\n```bash\nnpm run build\n```\n\n## Styling\n\nThis project uses [Tailwind CSS](https://tailwindcss.com/) for styling.\n\n\n\n## Routing\nThis project uses [TanStack Router](https://tanstack.com/router). The initial setup is a code based router. Which means that the routes are defined in code (in the `./src/main.jsx` file). If you like you can also use a file based routing setup by following the [File Based Routing](https://tanstack.com/router/latest/docs/framework/solid/guide/file-based-routing) guide.\n\n### Adding A Route\n\nTo add a new route to your application just add another `createRoute` call to the `./src/main.jsx` file. The example below adds a new `/about`route to the root route.\n\n```tsx\nconst aboutRoute = createRoute({\n  getParentRoute: () => rootRoute,\n  path: \"/about\",\n  component: () => <h1>About</h1>,\n});\n```\n\nYou will also need to add the route to the `routeTree` in the `./src/main.jsx` file.\n\n```tsx\nconst routeTree = rootRoute.addChildren([indexRoute, aboutRoute]);\n```\n\nWith this set up you should be able to navigate to `/about` and see the about page.\n\nOf course you don't need to implement the About page in the `main.jsx` file. You can create that component in another file and import it into the `main.jsx` file, then use it in the `component` property of the `createRoute` call, like so:\n\n```tsx\nimport About from \"./components/About.jsx\";\n\nconst aboutRoute = createRoute({\n  getParentRoute: () => rootRoute,\n  path: \"/about\",\n  component: About,\n});\n```\n\nThat is how we have the `App` component set up with the home page.\n\nFor more information on the options you have when you are creating code based routes check out the [Code Based Routing](https://tanstack.com/router/latest/docs/framework/solid/guide/code-based-routing) documentation.\n\nNow that you have two routes you can use a `Link` component to navigate between them.\n\n### Adding Links\n\nTo use SPA (Single Page Application) navigation you will need to import the `Link` component from `@tanstack/solid-router`.\n\n```tsx\nimport { Link } from \"@tanstack/solid-router\";\n```\n\nThen anywhere in your JSX you can use it like so:\n\n```tsx\n<Link to=\"/about\">About</Link>\n```\n\nThis will create a link that will navigate to the `/about` route.\n\nMore information on the `Link` component can be found in the [Link documentation](https://tanstack.com/router/v1/docs/framework/solid/api/router/linkComponent).\n\n### Using A Layout\n\n\nLayouts can be used to wrap the contents of the routes in menus, headers, footers, etc.\n\nThere is already a layout in the `src/main.jsx` file:\n\n```tsx\nconst rootRoute = createRootRoute({\n  component: () => (\n    <>\n      <Outlet />\n      <TanStackRouterDevtools />\n    </>\n  ),\n});\n```\n\nYou can use the Soliid component specified in the `component` property of the `rootRoute` to wrap the contents of the routes. The `<Outlet />` component is used to render the current route within the body of the layout. For example you could add a header to the layout like so:\n\n```tsx\nimport { Link } from \"@tanstack/solid-router\";\n\nconst rootRoute = createRootRoute({\n  component: () => (\n    <>\n      <header>\n        <nav>\n          <Link to=\"/\">Home</Link>\n          <Link to=\"/about\">About</Link>\n        </nav>\n      </header>\n      <Outlet />\n      <TanStackRouterDevtools />\n    </>\n  ),\n});\n```\n\nThe `<TanStackRouterDevtools />` component is not required so you can remove it if you don't want it in your layout.\n\nMore information on layouts can be found in the [Layouts documentation](https://tanstack.com/router/latest/docs/framework/solid/guide/routing-concepts#layouts).\n\n## Data Fetching\n\nThere are multiple ways to fetch data in your application. You can use TanStack Query to fetch data from a server. But you can also use the `loader` functionality built into TanStack Router to load the data for a route before it's rendered.\n\nFor example:\n\n```tsx\nconst peopleRoute = createRoute({\n  getParentRoute: () => rootRoute,\n  path: \"/people\",\n  loader: async () => {\n    const response = await fetch(\"https://swapi.dev/api/people\");\n    return response.json();\n  },\n  component: () => {\n    const data = peopleRoute.useLoaderData();\n    return (\n      <ul>\n        {data.results.map((person) => (\n          <li key={person.name}>{person.name}</li>\n        ))}\n      </ul>\n    );\n  },\n});\n```\n\nLoaders simplify your data fetching logic dramatically. Check out more information in the [Loader documentation](https://tanstack.com/router/latest/docs/framework/solid/guide/data-loading#loader-parameters).\n\n# Demo files\n\nFiles prefixed with `demo` can be safely deleted. They are there to provide a starting point for you to play around with the features you've installed.\n\n\n\n# Learn More\n\nYou can learn more about all of the offerings from TanStack in the [TanStack documentation](https://tanstack.com).\n",
     "index.html": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link rel=\"icon\" href=\"/favicon.ico\" />\n    <meta name=\"theme-color\" content=\"#000000\" />\n    <meta\n      name=\"description\"\n      content=\"Web site created using create-tsrouter-app\"\n    />\n    <link rel=\"apple-touch-icon\" href=\"/logo192.png\" />\n    <link rel=\"manifest\" href=\"/manifest.json\" />\n    <title>Create TanStack App - app-ts</title>\n  </head>\n  <body>\n    <div id=\"app\"></div>\n    <script type=\"module\" src=\"/src/main.tsx\"></script>\n  </body>\n</html>\n",
-    "package.json": "{\n  \"name\": \"TEST\",\n  \"private\": true,\n  \"type\": \"module\",\n  \"scripts\": {\n    \"dev\": \"vite --port 3000\",\n    \"build\": \"vite build && tsc\",\n    \"serve\": \"vite preview\",\n    \"test\": \"vitest run\"\n  },\n  \"dependencies\": {\n    \"@tanstack/solid-router\": \"^1.132.25\",\n    \"@tanstack/solid-router-devtools\": \"^1.132.25\",\n    \"@tanstack/solid-start\": \"^1.132.25\",\n    \"solid-js\": \"^1.9.5\"\n  },\n  \"devDependencies\": {\n    \"typescript\": \"^5.7.2\",\n    \"vite\": \"^7.1.7\",\n    \"vite-plugin-solid\": \"^2.11.2\"\n  }\n}",
+    "package.json": "{\n  \"name\": \"TEST\",\n  \"private\": true,\n  \"type\": \"module\",\n  \"scripts\": {\n    \"dev\": \"vite --port 3000\",\n    \"build\": \"vite build && tsc\",\n    \"serve\": \"vite preview\",\n    \"test\": \"vitest run\"\n  },\n  \"dependencies\": {\n    \"@tanstack/solid-router\": \"^1.133.20\",\n    \"@tanstack/solid-router-devtools\": \"^1.133.20\",\n    \"@tanstack/solid-start\": \"^1.133.20\",\n    \"solid-js\": \"^1.9.9\"\n  },\n  \"devDependencies\": {\n    \"typescript\": \"^5.7.2\",\n    \"vite\": \"^7.1.7\",\n    \"vite-plugin-solid\": \"^2.11.10\"\n  }\n}",
     "vite.config.js": "import { defineConfig } from 'vite'\n\nimport solidPlugin from 'vite-plugin-solid'\nimport tailwindcss from '@tailwindcss/vite'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n  plugins: [solidPlugin(), tailwindcss()],\n})\n"
   },
   "commands": [