<html lang="en">
<head></head>
<body>

<form id="mainForm" method="post" action="https://stackblitz.com/run" target="_self">
<input type="hidden" name="project[files][.gitignore]" value="node_modules
.DS_Store
.cache
.env
dist
.wrangler

# Local Netlify folder
.netlify
">
<input type="hidden" name="project[files][.prettierignore]" value="**/public
pnpm-lock.yaml
routeTree.gen.ts
worker-configuration.d.ts
">
<input type="hidden" name="project[files][README.md]" value="# Start Basic Netlify

## Getting Started

### Install the dependencies

```bash
pnpm i
```

### Start the development server

```bash
pnpm dev
```

### Build for Production

```bash
pnpm build
```

### Deploy to Netlify

```sh
netlify deploy
```

## Accessing bindings

You can access Cloudflare bindings in server functions by using importable `env`:

```ts
import { env } from &#39;cloudflare:workers&#39;
```

See `src/routes/index.tsx` for an example.
">
<input type="hidden" name="project[files][netlify.toml]" value="[build]
  command = &quot;vite build&quot;
  publish = &quot;dist/client&quot;
[dev]
  command = &quot;vite dev&quot;
  port = 3000">
<input type="hidden" name="project[files][package.json]" value="{&quot;name&quot;:&quot;tanstack-solid-start-example-basic-netlify&quot;,&quot;private&quot;:true,&quot;sideEffects&quot;:false,&quot;type&quot;:&quot;module&quot;,&quot;scripts&quot;:{&quot;dev&quot;:&quot;vite dev&quot;,&quot;build&quot;:&quot;vite build &amp;&amp; tsc --noEmit&quot;,&quot;preview&quot;:&quot;vite preview&quot;},&quot;dependencies&quot;:{&quot;@tanstack/solid-router&quot;:&quot;https://pkg.pr.new/TanStack/router/@tanstack/solid-router@b6570e3c3f3b9fd7cff1ecf2ff4d3f3757987541&quot;,&quot;@tanstack/solid-router-devtools&quot;:&quot;https://pkg.pr.new/TanStack/router/@tanstack/solid-router-devtools@b6570e3c3f3b9fd7cff1ecf2ff4d3f3757987541&quot;,&quot;@tanstack/solid-start&quot;:&quot;https://pkg.pr.new/TanStack/router/@tanstack/solid-start@b6570e3c3f3b9fd7cff1ecf2ff4d3f3757987541&quot;,&quot;solid-js&quot;:&quot;^1.9.10&quot;},&quot;devDependencies&quot;:{&quot;@netlify/vite-plugin-tanstack-start&quot;:&quot;^1.1.4&quot;,&quot;@tailwindcss/postcss&quot;:&quot;^4.1.15&quot;,&quot;@types/node&quot;:&quot;^22.5.4&quot;,&quot;postcss&quot;:&quot;^8.5.1&quot;,&quot;tailwindcss&quot;:&quot;^4.1.15&quot;,&quot;typescript&quot;:&quot;^5.7.2&quot;,&quot;vite&quot;:&quot;^7.1.7&quot;,&quot;vite-plugin-solid&quot;:&quot;^2.11.10&quot;,&quot;vite-tsconfig-paths&quot;:&quot;^5.1.4&quot;}}">
<input type="hidden" name="project[files][postcss.config.mjs]" value="export default {
  plugins: {
    &#39;@tailwindcss/postcss&#39;: {},
  },
}
">
<input type="hidden" name="project[files][tsconfig.json]" value="{
  &quot;include&quot;: [&quot;**/*.ts&quot;, &quot;**/*.tsx&quot;],
  &quot;compilerOptions&quot;: {
    &quot;strict&quot;: true,
    &quot;esModuleInterop&quot;: true,
    &quot;jsx&quot;: &quot;preserve&quot;,
    &quot;jsxImportSource&quot;: &quot;solid-js&quot;,
    &quot;module&quot;: &quot;ESNext&quot;,
    &quot;moduleResolution&quot;: &quot;Bundler&quot;,
    &quot;lib&quot;: [&quot;DOM&quot;, &quot;DOM.Iterable&quot;, &quot;ES2022&quot;],
    &quot;isolatedModules&quot;: true,
    &quot;resolveJsonModule&quot;: true,
    &quot;skipLibCheck&quot;: true,
    &quot;target&quot;: &quot;ES2022&quot;,
    &quot;allowJs&quot;: true,
    &quot;forceConsistentCasingInFileNames&quot;: true,
    &quot;baseUrl&quot;: &quot;.&quot;,
    &quot;paths&quot;: {
      &quot;~/*&quot;: [&quot;./src/*&quot;]
    },
    &quot;noEmit&quot;: true
  }
}
">
<input type="hidden" name="project[files][vite.config.ts]" value="import { defineConfig } from &#39;vite&#39;
import tsConfigPaths from &#39;vite-tsconfig-paths&#39;
import netlify from &#39;@netlify/vite-plugin-tanstack-start&#39;
import { tanstackStart } from &#39;@tanstack/solid-start/plugin/vite&#39;
import viteSolid from &#39;vite-plugin-solid&#39;

export default defineConfig({
  server: {
    port: 3000,
  },
  plugins: [
    tsConfigPaths({
      projects: [&#39;./tsconfig.json&#39;],
    }),
    netlify(),
    tanstackStart(),
    viteSolid({ ssr: true }),
  ],
})
">
<input type="hidden" name="project[files][.vscode/settings.json]" value="{
  &quot;files.watcherExclude&quot;: {
    &quot;**/routeTree.gen.ts&quot;: true
  },
  &quot;search.exclude&quot;: {
    &quot;**/routeTree.gen.ts&quot;: true
  },
  &quot;files.readonlyInclude&quot;: {
    &quot;**/routeTree.gen.ts&quot;: true
  }
}
">
<input type="hidden" name="project[files][src/routeTree.gen.ts]" value="/* eslint-disable */

// @ts-nocheck

// noinspection JSUnusedGlobalSymbols

// This file was automatically generated by TanStack Router.
// You should NOT make any changes in this file as it will be overwritten.
// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.

import { Route as rootRouteImport } from &#39;./routes/__root&#39;
import { Route as UsersRouteImport } from &#39;./routes/users&#39;
import { Route as RedirectRouteImport } from &#39;./routes/redirect&#39;
import { Route as PostsRouteImport } from &#39;./routes/posts&#39;
import { Route as DeferredRouteImport } from &#39;./routes/deferred&#39;
import { Route as CustomScriptDotjsRouteImport } from &#39;./routes/customScript[.]js&#39;
import { Route as PathlessLayoutRouteImport } from &#39;./routes/_pathlessLayout&#39;
import { Route as IndexRouteImport } from &#39;./routes/index&#39;
import { Route as UsersIndexRouteImport } from &#39;./routes/users.index&#39;
import { Route as PostsIndexRouteImport } from &#39;./routes/posts.index&#39;
import { Route as UsersUserIdRouteImport } from &#39;./routes/users.$userId&#39;
import { Route as PostsPostIdRouteImport } from &#39;./routes/posts.$postId&#39;
import { Route as ApiUsersRouteImport } from &#39;./routes/api/users&#39;
import { Route as PathlessLayoutNestedLayoutRouteImport } from &#39;./routes/_pathlessLayout/_nested-layout&#39;
import { Route as PostsPostIdDeepRouteImport } from &#39;./routes/posts_.$postId.deep&#39;
import { Route as ApiUsersUserIdRouteImport } from &#39;./routes/api/users.$userId&#39;
import { Route as PathlessLayoutNestedLayoutRouteBRouteImport } from &#39;./routes/_pathlessLayout/_nested-layout/route-b&#39;
import { Route as PathlessLayoutNestedLayoutRouteARouteImport } from &#39;./routes/_pathlessLayout/_nested-layout/route-a&#39;

const UsersRoute = UsersRouteImport.update({
  id: &#39;/users&#39;,
  path: &#39;/users&#39;,
  getParentRoute: () =&gt; rootRouteImport,
} as any)
const RedirectRoute = RedirectRouteImport.update({
  id: &#39;/redirect&#39;,
  path: &#39;/redirect&#39;,
  getParentRoute: () =&gt; rootRouteImport,
} as any)
const PostsRoute = PostsRouteImport.update({
  id: &#39;/posts&#39;,
  path: &#39;/posts&#39;,
  getParentRoute: () =&gt; rootRouteImport,
} as any)
const DeferredRoute = DeferredRouteImport.update({
  id: &#39;/deferred&#39;,
  path: &#39;/deferred&#39;,
  getParentRoute: () =&gt; rootRouteImport,
} as any)
const CustomScriptDotjsRoute = CustomScriptDotjsRouteImport.update({
  id: &#39;/customScript.js&#39;,
  path: &#39;/customScript.js&#39;,
  getParentRoute: () =&gt; rootRouteImport,
} as any)
const PathlessLayoutRoute = PathlessLayoutRouteImport.update({
  id: &#39;/_pathlessLayout&#39;,
  getParentRoute: () =&gt; rootRouteImport,
} as any)
const IndexRoute = IndexRouteImport.update({
  id: &#39;/&#39;,
  path: &#39;/&#39;,
  getParentRoute: () =&gt; rootRouteImport,
} as any)
const UsersIndexRoute = UsersIndexRouteImport.update({
  id: &#39;/&#39;,
  path: &#39;/&#39;,
  getParentRoute: () =&gt; UsersRoute,
} as any)
const PostsIndexRoute = PostsIndexRouteImport.update({
  id: &#39;/&#39;,
  path: &#39;/&#39;,
  getParentRoute: () =&gt; PostsRoute,
} as any)
const UsersUserIdRoute = UsersUserIdRouteImport.update({
  id: &#39;/$userId&#39;,
  path: &#39;/$userId&#39;,
  getParentRoute: () =&gt; UsersRoute,
} as any)
const PostsPostIdRoute = PostsPostIdRouteImport.update({
  id: &#39;/$postId&#39;,
  path: &#39;/$postId&#39;,
  getParentRoute: () =&gt; PostsRoute,
} as any)
const ApiUsersRoute = ApiUsersRouteImport.update({
  id: &#39;/api/users&#39;,
  path: &#39;/api/users&#39;,
  getParentRoute: () =&gt; rootRouteImport,
} as any)
const PathlessLayoutNestedLayoutRoute =
  PathlessLayoutNestedLayoutRouteImport.update({
    id: &#39;/_nested-layout&#39;,
    getParentRoute: () =&gt; PathlessLayoutRoute,
  } as any)
const PostsPostIdDeepRoute = PostsPostIdDeepRouteImport.update({
  id: &#39;/posts_/$postId/deep&#39;,
  path: &#39;/posts/$postId/deep&#39;,
  getParentRoute: () =&gt; rootRouteImport,
} as any)
const ApiUsersUserIdRoute = ApiUsersUserIdRouteImport.update({
  id: &#39;/$userId&#39;,
  path: &#39;/$userId&#39;,
  getParentRoute: () =&gt; ApiUsersRoute,
} as any)
const PathlessLayoutNestedLayoutRouteBRoute =
  PathlessLayoutNestedLayoutRouteBRouteImport.update({
    id: &#39;/route-b&#39;,
    path: &#39;/route-b&#39;,
    getParentRoute: () =&gt; PathlessLayoutNestedLayoutRoute,
  } as any)
const PathlessLayoutNestedLayoutRouteARoute =
  PathlessLayoutNestedLayoutRouteARouteImport.update({
    id: &#39;/route-a&#39;,
    path: &#39;/route-a&#39;,
    getParentRoute: () =&gt; PathlessLayoutNestedLayoutRoute,
  } as any)

export interface FileRoutesByFullPath {
  &#39;/&#39;: typeof IndexRoute
  &#39;/customScript.js&#39;: typeof CustomScriptDotjsRoute
  &#39;/deferred&#39;: typeof DeferredRoute
  &#39;/posts&#39;: typeof PostsRouteWithChildren
  &#39;/redirect&#39;: typeof RedirectRoute
  &#39;/users&#39;: typeof UsersRouteWithChildren
  &#39;/api/users&#39;: typeof ApiUsersRouteWithChildren
  &#39;/posts/$postId&#39;: typeof PostsPostIdRoute
  &#39;/users/$userId&#39;: typeof UsersUserIdRoute
  &#39;/posts/&#39;: typeof PostsIndexRoute
  &#39;/users/&#39;: typeof UsersIndexRoute
  &#39;/route-a&#39;: typeof PathlessLayoutNestedLayoutRouteARoute
  &#39;/route-b&#39;: typeof PathlessLayoutNestedLayoutRouteBRoute
  &#39;/api/users/$userId&#39;: typeof ApiUsersUserIdRoute
  &#39;/posts/$postId/deep&#39;: typeof PostsPostIdDeepRoute
}
export interface FileRoutesByTo {
  &#39;/&#39;: typeof IndexRoute
  &#39;/customScript.js&#39;: typeof CustomScriptDotjsRoute
  &#39;/deferred&#39;: typeof DeferredRoute
  &#39;/redirect&#39;: typeof RedirectRoute
  &#39;/api/users&#39;: typeof ApiUsersRouteWithChildren
  &#39;/posts/$postId&#39;: typeof PostsPostIdRoute
  &#39;/users/$userId&#39;: typeof UsersUserIdRoute
  &#39;/posts&#39;: typeof PostsIndexRoute
  &#39;/users&#39;: typeof UsersIndexRoute
  &#39;/route-a&#39;: typeof PathlessLayoutNestedLayoutRouteARoute
  &#39;/route-b&#39;: typeof PathlessLayoutNestedLayoutRouteBRoute
  &#39;/api/users/$userId&#39;: typeof ApiUsersUserIdRoute
  &#39;/posts/$postId/deep&#39;: typeof PostsPostIdDeepRoute
}
export interface FileRoutesById {
  __root__: typeof rootRouteImport
  &#39;/&#39;: typeof IndexRoute
  &#39;/_pathlessLayout&#39;: typeof PathlessLayoutRouteWithChildren
  &#39;/customScript.js&#39;: typeof CustomScriptDotjsRoute
  &#39;/deferred&#39;: typeof DeferredRoute
  &#39;/posts&#39;: typeof PostsRouteWithChildren
  &#39;/redirect&#39;: typeof RedirectRoute
  &#39;/users&#39;: typeof UsersRouteWithChildren
  &#39;/_pathlessLayout/_nested-layout&#39;: typeof PathlessLayoutNestedLayoutRouteWithChildren
  &#39;/api/users&#39;: typeof ApiUsersRouteWithChildren
  &#39;/posts/$postId&#39;: typeof PostsPostIdRoute
  &#39;/users/$userId&#39;: typeof UsersUserIdRoute
  &#39;/posts/&#39;: typeof PostsIndexRoute
  &#39;/users/&#39;: typeof UsersIndexRoute
  &#39;/_pathlessLayout/_nested-layout/route-a&#39;: typeof PathlessLayoutNestedLayoutRouteARoute
  &#39;/_pathlessLayout/_nested-layout/route-b&#39;: typeof PathlessLayoutNestedLayoutRouteBRoute
  &#39;/api/users/$userId&#39;: typeof ApiUsersUserIdRoute
  &#39;/posts_/$postId/deep&#39;: typeof PostsPostIdDeepRoute
}
export interface FileRouteTypes {
  fileRoutesByFullPath: FileRoutesByFullPath
  fullPaths:
    | &#39;/&#39;
    | &#39;/customScript.js&#39;
    | &#39;/deferred&#39;
    | &#39;/posts&#39;
    | &#39;/redirect&#39;
    | &#39;/users&#39;
    | &#39;/api/users&#39;
    | &#39;/posts/$postId&#39;
    | &#39;/users/$userId&#39;
    | &#39;/posts/&#39;
    | &#39;/users/&#39;
    | &#39;/route-a&#39;
    | &#39;/route-b&#39;
    | &#39;/api/users/$userId&#39;
    | &#39;/posts/$postId/deep&#39;
  fileRoutesByTo: FileRoutesByTo
  to:
    | &#39;/&#39;
    | &#39;/customScript.js&#39;
    | &#39;/deferred&#39;
    | &#39;/redirect&#39;
    | &#39;/api/users&#39;
    | &#39;/posts/$postId&#39;
    | &#39;/users/$userId&#39;
    | &#39;/posts&#39;
    | &#39;/users&#39;
    | &#39;/route-a&#39;
    | &#39;/route-b&#39;
    | &#39;/api/users/$userId&#39;
    | &#39;/posts/$postId/deep&#39;
  id:
    | &#39;__root__&#39;
    | &#39;/&#39;
    | &#39;/_pathlessLayout&#39;
    | &#39;/customScript.js&#39;
    | &#39;/deferred&#39;
    | &#39;/posts&#39;
    | &#39;/redirect&#39;
    | &#39;/users&#39;
    | &#39;/_pathlessLayout/_nested-layout&#39;
    | &#39;/api/users&#39;
    | &#39;/posts/$postId&#39;
    | &#39;/users/$userId&#39;
    | &#39;/posts/&#39;
    | &#39;/users/&#39;
    | &#39;/_pathlessLayout/_nested-layout/route-a&#39;
    | &#39;/_pathlessLayout/_nested-layout/route-b&#39;
    | &#39;/api/users/$userId&#39;
    | &#39;/posts_/$postId/deep&#39;
  fileRoutesById: FileRoutesById
}
export interface RootRouteChildren {
  IndexRoute: typeof IndexRoute
  PathlessLayoutRoute: typeof PathlessLayoutRouteWithChildren
  CustomScriptDotjsRoute: typeof CustomScriptDotjsRoute
  DeferredRoute: typeof DeferredRoute
  PostsRoute: typeof PostsRouteWithChildren
  RedirectRoute: typeof RedirectRoute
  UsersRoute: typeof UsersRouteWithChildren
  ApiUsersRoute: typeof ApiUsersRouteWithChildren
  PostsPostIdDeepRoute: typeof PostsPostIdDeepRoute
}

declare module &#39;@tanstack/solid-router&#39; {
  interface FileRoutesByPath {
    &#39;/users&#39;: {
      id: &#39;/users&#39;
      path: &#39;/users&#39;
      fullPath: &#39;/users&#39;
      preLoaderRoute: typeof UsersRouteImport
      parentRoute: typeof rootRouteImport
    }
    &#39;/redirect&#39;: {
      id: &#39;/redirect&#39;
      path: &#39;/redirect&#39;
      fullPath: &#39;/redirect&#39;
      preLoaderRoute: typeof RedirectRouteImport
      parentRoute: typeof rootRouteImport
    }
    &#39;/posts&#39;: {
      id: &#39;/posts&#39;
      path: &#39;/posts&#39;
      fullPath: &#39;/posts&#39;
      preLoaderRoute: typeof PostsRouteImport
      parentRoute: typeof rootRouteImport
    }
    &#39;/deferred&#39;: {
      id: &#39;/deferred&#39;
      path: &#39;/deferred&#39;
      fullPath: &#39;/deferred&#39;
      preLoaderRoute: typeof DeferredRouteImport
      parentRoute: typeof rootRouteImport
    }
    &#39;/customScript.js&#39;: {
      id: &#39;/customScript.js&#39;
      path: &#39;/customScript.js&#39;
      fullPath: &#39;/customScript.js&#39;
      preLoaderRoute: typeof CustomScriptDotjsRouteImport
      parentRoute: typeof rootRouteImport
    }
    &#39;/_pathlessLayout&#39;: {
      id: &#39;/_pathlessLayout&#39;
      path: &#39;&#39;
      fullPath: &#39;&#39;
      preLoaderRoute: typeof PathlessLayoutRouteImport
      parentRoute: typeof rootRouteImport
    }
    &#39;/&#39;: {
      id: &#39;/&#39;
      path: &#39;/&#39;
      fullPath: &#39;/&#39;
      preLoaderRoute: typeof IndexRouteImport
      parentRoute: typeof rootRouteImport
    }
    &#39;/users/&#39;: {
      id: &#39;/users/&#39;
      path: &#39;/&#39;
      fullPath: &#39;/users/&#39;
      preLoaderRoute: typeof UsersIndexRouteImport
      parentRoute: typeof UsersRoute
    }
    &#39;/posts/&#39;: {
      id: &#39;/posts/&#39;
      path: &#39;/&#39;
      fullPath: &#39;/posts/&#39;
      preLoaderRoute: typeof PostsIndexRouteImport
      parentRoute: typeof PostsRoute
    }
    &#39;/users/$userId&#39;: {
      id: &#39;/users/$userId&#39;
      path: &#39;/$userId&#39;
      fullPath: &#39;/users/$userId&#39;
      preLoaderRoute: typeof UsersUserIdRouteImport
      parentRoute: typeof UsersRoute
    }
    &#39;/posts/$postId&#39;: {
      id: &#39;/posts/$postId&#39;
      path: &#39;/$postId&#39;
      fullPath: &#39;/posts/$postId&#39;
      preLoaderRoute: typeof PostsPostIdRouteImport
      parentRoute: typeof PostsRoute
    }
    &#39;/api/users&#39;: {
      id: &#39;/api/users&#39;
      path: &#39;/api/users&#39;
      fullPath: &#39;/api/users&#39;
      preLoaderRoute: typeof ApiUsersRouteImport
      parentRoute: typeof rootRouteImport
    }
    &#39;/_pathlessLayout/_nested-layout&#39;: {
      id: &#39;/_pathlessLayout/_nested-layout&#39;
      path: &#39;&#39;
      fullPath: &#39;&#39;
      preLoaderRoute: typeof PathlessLayoutNestedLayoutRouteImport
      parentRoute: typeof PathlessLayoutRoute
    }
    &#39;/posts_/$postId/deep&#39;: {
      id: &#39;/posts_/$postId/deep&#39;
      path: &#39;/posts/$postId/deep&#39;
      fullPath: &#39;/posts/$postId/deep&#39;
      preLoaderRoute: typeof PostsPostIdDeepRouteImport
      parentRoute: typeof rootRouteImport
    }
    &#39;/api/users/$userId&#39;: {
      id: &#39;/api/users/$userId&#39;
      path: &#39;/$userId&#39;
      fullPath: &#39;/api/users/$userId&#39;
      preLoaderRoute: typeof ApiUsersUserIdRouteImport
      parentRoute: typeof ApiUsersRoute
    }
    &#39;/_pathlessLayout/_nested-layout/route-b&#39;: {
      id: &#39;/_pathlessLayout/_nested-layout/route-b&#39;
      path: &#39;/route-b&#39;
      fullPath: &#39;/route-b&#39;
      preLoaderRoute: typeof PathlessLayoutNestedLayoutRouteBRouteImport
      parentRoute: typeof PathlessLayoutNestedLayoutRoute
    }
    &#39;/_pathlessLayout/_nested-layout/route-a&#39;: {
      id: &#39;/_pathlessLayout/_nested-layout/route-a&#39;
      path: &#39;/route-a&#39;
      fullPath: &#39;/route-a&#39;
      preLoaderRoute: typeof PathlessLayoutNestedLayoutRouteARouteImport
      parentRoute: typeof PathlessLayoutNestedLayoutRoute
    }
  }
}

interface PathlessLayoutNestedLayoutRouteChildren {
  PathlessLayoutNestedLayoutRouteARoute: typeof PathlessLayoutNestedLayoutRouteARoute
  PathlessLayoutNestedLayoutRouteBRoute: typeof PathlessLayoutNestedLayoutRouteBRoute
}

const PathlessLayoutNestedLayoutRouteChildren: PathlessLayoutNestedLayoutRouteChildren =
  {
    PathlessLayoutNestedLayoutRouteARoute:
      PathlessLayoutNestedLayoutRouteARoute,
    PathlessLayoutNestedLayoutRouteBRoute:
      PathlessLayoutNestedLayoutRouteBRoute,
  }

const PathlessLayoutNestedLayoutRouteWithChildren =
  PathlessLayoutNestedLayoutRoute._addFileChildren(
    PathlessLayoutNestedLayoutRouteChildren,
  )

interface PathlessLayoutRouteChildren {
  PathlessLayoutNestedLayoutRoute: typeof PathlessLayoutNestedLayoutRouteWithChildren
}

const PathlessLayoutRouteChildren: PathlessLayoutRouteChildren = {
  PathlessLayoutNestedLayoutRoute: PathlessLayoutNestedLayoutRouteWithChildren,
}

const PathlessLayoutRouteWithChildren = PathlessLayoutRoute._addFileChildren(
  PathlessLayoutRouteChildren,
)

interface PostsRouteChildren {
  PostsPostIdRoute: typeof PostsPostIdRoute
  PostsIndexRoute: typeof PostsIndexRoute
}

const PostsRouteChildren: PostsRouteChildren = {
  PostsPostIdRoute: PostsPostIdRoute,
  PostsIndexRoute: PostsIndexRoute,
}

const PostsRouteWithChildren = PostsRoute._addFileChildren(PostsRouteChildren)

interface UsersRouteChildren {
  UsersUserIdRoute: typeof UsersUserIdRoute
  UsersIndexRoute: typeof UsersIndexRoute
}

const UsersRouteChildren: UsersRouteChildren = {
  UsersUserIdRoute: UsersUserIdRoute,
  UsersIndexRoute: UsersIndexRoute,
}

const UsersRouteWithChildren = UsersRoute._addFileChildren(UsersRouteChildren)

interface ApiUsersRouteChildren {
  ApiUsersUserIdRoute: typeof ApiUsersUserIdRoute
}

const ApiUsersRouteChildren: ApiUsersRouteChildren = {
  ApiUsersUserIdRoute: ApiUsersUserIdRoute,
}

const ApiUsersRouteWithChildren = ApiUsersRoute._addFileChildren(
  ApiUsersRouteChildren,
)

const rootRouteChildren: RootRouteChildren = {
  IndexRoute: IndexRoute,
  PathlessLayoutRoute: PathlessLayoutRouteWithChildren,
  CustomScriptDotjsRoute: CustomScriptDotjsRoute,
  DeferredRoute: DeferredRoute,
  PostsRoute: PostsRouteWithChildren,
  RedirectRoute: RedirectRoute,
  UsersRoute: UsersRouteWithChildren,
  ApiUsersRoute: ApiUsersRouteWithChildren,
  PostsPostIdDeepRoute: PostsPostIdDeepRoute,
}
export const routeTree = rootRouteImport
  ._addFileChildren(rootRouteChildren)
  ._addFileTypes&lt;FileRouteTypes&gt;()

import type { getRouter } from &#39;./router.tsx&#39;
import type { createStart } from &#39;@tanstack/solid-start&#39;
declare module &#39;@tanstack/solid-start&#39; {
  interface Register {
    ssr: true
    router: Awaited&lt;ReturnType&lt;typeof getRouter&gt;&gt;
  }
}
">
<input type="hidden" name="project[files][src/router.tsx]" value="import { createRouter } from &#39;@tanstack/solid-router&#39;
import { routeTree } from &#39;./routeTree.gen&#39;
import { DefaultCatchBoundary } from &#39;./components/DefaultCatchBoundary&#39;
import { NotFound } from &#39;./components/NotFound&#39;

export function getRouter() {
  const router = createRouter({
    routeTree,
    defaultPreload: &#39;intent&#39;,
    defaultErrorComponent: DefaultCatchBoundary,
    defaultNotFoundComponent: () =&gt; &lt;NotFound /&gt;,
    scrollRestoration: true,
  })

  return router
}
">
<input type="hidden" name="project[files][public/android-chrome-192x192.png]" value="https://pkg.pr.new/template/67f0ac75-5913-4307-916c-6509579988a1">
<input type="hidden" name="project[files][public/android-chrome-512x512.png]" value="https://pkg.pr.new/template/c512b003-ead9-499d-a569-89a4da679134">
<input type="hidden" name="project[files][public/apple-touch-icon.png]" value="https://pkg.pr.new/template/47f814af-a94c-4b54-a79e-9f3312812a0a">
<input type="hidden" name="project[files][public/favicon-16x16.png]" value="https://pkg.pr.new/template/1a61d25d-e5d5-45d8-80f6-1617c52308ea">
<input type="hidden" name="project[files][public/favicon-32x32.png]" value="https://pkg.pr.new/template/3aac5a30-a428-43f4-87b4-996af7f33503">
<input type="hidden" name="project[files][public/favicon.ico]" value="https://pkg.pr.new/template/d8b9a6c7-4267-4e56-adf0-07f1da0be454">
<input type="hidden" name="project[files][public/favicon.png]" value="https://pkg.pr.new/template/9bb3210d-061c-4fdf-a8b3-ba6f4fa73de2">
<input type="hidden" name="project[files][public/site.webmanifest]" value="{
  &quot;name&quot;: &quot;&quot;,
  &quot;short_name&quot;: &quot;&quot;,
  &quot;icons&quot;: [
    {
      &quot;src&quot;: &quot;/android-chrome-192x192.png&quot;,
      &quot;sizes&quot;: &quot;192x192&quot;,
      &quot;type&quot;: &quot;image/png&quot;
    },
    {
      &quot;src&quot;: &quot;/android-chrome-512x512.png&quot;,
      &quot;sizes&quot;: &quot;512x512&quot;,
      &quot;type&quot;: &quot;image/png&quot;
    }
  ],
  &quot;theme_color&quot;: &quot;#ffffff&quot;,
  &quot;background_color&quot;: &quot;#ffffff&quot;,
  &quot;display&quot;: &quot;standalone&quot;
}
">
<input type="hidden" name="project[files][src/components/DefaultCatchBoundary.tsx]" value="import {
  ErrorComponent,
  Link,
  rootRouteId,
  useMatch,
  useRouter,
} from &#39;@tanstack/solid-router&#39;
import type { ErrorComponentProps } from &#39;@tanstack/solid-router&#39;

export function DefaultCatchBoundary({ error }: ErrorComponentProps) {
  const router = useRouter()
  const isRoot = useMatch({
    strict: false,
    select: (state) =&gt; state.id === rootRouteId,
  })

  console.error(&#39;DefaultCatchBoundary Error:&#39;, error)

  return (
    &lt;div class=&quot;min-w-0 flex-1 p-4 flex flex-col items-center justify-center gap-6&quot;&gt;
      &lt;ErrorComponent error={error} /&gt;
      &lt;div class=&quot;flex gap-2 items-center flex-wrap&quot;&gt;
        &lt;button
          onClick={() =&gt; {
            router.invalidate()
          }}
          class={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded-sm text-white uppercase font-extrabold`}
        &gt;
          Try Again
        &lt;/button&gt;
        {isRoot() ? (
          &lt;Link
            to=&quot;/&quot;
            class={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded-sm text-white uppercase font-extrabold`}
          &gt;
            Home
          &lt;/Link&gt;
        ) : (
          &lt;Link
            to=&quot;/&quot;
            class={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded-sm text-white uppercase font-extrabold`}
            onClick={(e) =&gt; {
              e.preventDefault()
              window.history.back()
            }}
          &gt;
            Go Back
          &lt;/Link&gt;
        )}
      &lt;/div&gt;
    &lt;/div&gt;
  )
}
">
<input type="hidden" name="project[files][src/components/NotFound.tsx]" value="import { Link } from &#39;@tanstack/solid-router&#39;

export function NotFound({ children }: { children?: any }) {
  return (
    &lt;div class=&quot;space-y-2 p-2&quot;&gt;
      &lt;div class=&quot;text-gray-600 dark:text-gray-400&quot;&gt;
        {children || &lt;p&gt;The page you are looking for does not exist.&lt;/p&gt;}
      &lt;/div&gt;
      &lt;p class=&quot;flex items-center gap-2 flex-wrap&quot;&gt;
        &lt;button
          onClick={() =&gt; window.history.back()}
          class=&quot;bg-emerald-500 text-white px-2 py-1 rounded-sm uppercase font-black text-sm&quot;
        &gt;
          Go back
        &lt;/button&gt;
        &lt;Link
          to=&quot;/&quot;
          class=&quot;bg-cyan-600 text-white px-2 py-1 rounded-sm uppercase font-black text-sm&quot;
        &gt;
          Start Over
        &lt;/Link&gt;
      &lt;/p&gt;
    &lt;/div&gt;
  )
}
">
<input type="hidden" name="project[files][src/components/PostError.tsx]" value="import { ErrorComponent } from &#39;@tanstack/solid-router&#39;
import type { ErrorComponentProps } from &#39;@tanstack/solid-router&#39;

export function PostErrorComponent({ error }: ErrorComponentProps) {
  return &lt;ErrorComponent error={error} /&gt;
}
">
<input type="hidden" name="project[files][src/components/UserError.tsx]" value="import { ErrorComponent } from &#39;@tanstack/solid-router&#39;
import type { ErrorComponentProps } from &#39;@tanstack/solid-router&#39;

export function UserErrorComponent({ error }: ErrorComponentProps) {
  return &lt;ErrorComponent error={error} /&gt;
}
">
<input type="hidden" name="project[files][src/utils/loggingMiddleware.tsx]" value="import { createMiddleware } from &#39;@tanstack/solid-start&#39;

const preLogMiddleware = createMiddleware({ type: &#39;function&#39; })
  .client(async (ctx) =&gt; {
    const clientTime = new Date()

    return ctx.next({
      context: {
        clientTime,
      },
      sendContext: {
        clientTime,
      },
    })
  })
  .server(async (ctx) =&gt; {
    const serverTime = new Date()

    return ctx.next({
      sendContext: {
        serverTime,
        durationToServer:
          serverTime.getTime() - ctx.context.clientTime.getTime(),
      },
    })
  })

export const logMiddleware = createMiddleware({ type: &#39;function&#39; })
  .middleware([preLogMiddleware])
  .client(async (ctx) =&gt; {
    const res = await ctx.next()

    const now = new Date()
    console.log(&#39;Client Req/Res:&#39;, {
      duration: now.getTime() - res.context.clientTime.getTime(),
      durationToServer: res.context.durationToServer,
      durationFromServer: now.getTime() - res.context.serverTime.getTime(),
    })

    return res
  })
">
<input type="hidden" name="project[files][src/utils/posts.tsx]" value="import { notFound } from &#39;@tanstack/solid-router&#39;
import { createServerFn } from &#39;@tanstack/solid-start&#39;

export type PostType = {
  id: number
  title: string
  body: string
}

export const fetchPost = createServerFn({ method: &#39;POST&#39; })
  .inputValidator((d: string) =&gt; d)
  .handler(async ({ data }) =&gt; {
    console.info(`Fetching post with id ${data}...`)
    const res = await fetch(
      `https://jsonplaceholder.typicode.com/posts/${data}`,
    )
    if (!res.ok) {
      if (res.status === 404) {
        throw notFound()
      }

      throw new Error(&#39;Failed to fetch post&#39;)
    }

    const post = await res.json()

    return post as PostType
  })

export const fetchPosts = createServerFn().handler(async () =&gt; {
  console.info(&#39;Fetching posts...&#39;)
  const res = await fetch(&#39;https://jsonplaceholder.typicode.com/posts&#39;)
  if (!res.ok) {
    throw new Error(&#39;Failed to fetch posts&#39;)
  }

  const posts = await res.json()

  return (posts as Array&lt;PostType&gt;).slice(0, 10)
})
">
<input type="hidden" name="project[files][src/utils/seo.ts]" value="export const seo = ({
  title,
  description,
  keywords,
  image,
}: {
  title: string
  description?: string
  image?: string
  keywords?: string
}) =&gt; {
  const tags = [
    { title },
    { name: &#39;description&#39;, content: description },
    { name: &#39;keywords&#39;, content: keywords },
    { name: &#39;twitter:title&#39;, content: title },
    { name: &#39;twitter:description&#39;, content: description },
    { name: &#39;twitter:creator&#39;, content: &#39;@tannerlinsley&#39; },
    { name: &#39;twitter:site&#39;, content: &#39;@tannerlinsley&#39; },
    { name: &#39;og:type&#39;, content: &#39;website&#39; },
    { name: &#39;og:title&#39;, content: title },
    { name: &#39;og:description&#39;, content: description },
    ...(image
      ? [
          { name: &#39;twitter:image&#39;, content: image },
          { name: &#39;twitter:card&#39;, content: &#39;summary_large_image&#39; },
          { name: &#39;og:image&#39;, content: image },
        ]
      : []),
  ]

  return tags
}
">
<input type="hidden" name="project[files][src/utils/users.tsx]" value="export type User = {
  id: number
  name: string
  email: string
}
">
<input type="hidden" name="project[files][src/routes/__root.tsx]" value="/// &lt;reference types=&quot;vite/client&quot; /&gt;
import {
  HeadContent,
  Link,
  Scripts,
  createRootRoute,
} from &#39;@tanstack/solid-router&#39;
import { TanStackRouterDevtools } from &#39;@tanstack/solid-router-devtools&#39;
import { HydrationScript } from &#39;solid-js/web&#39;
import type * as Solid from &#39;solid-js&#39;
import { DefaultCatchBoundary } from &#39;~/components/DefaultCatchBoundary&#39;
import { NotFound } from &#39;~/components/NotFound&#39;
import appCss from &#39;~/styles/app.css?url&#39;
import { seo } from &#39;~/utils/seo&#39;

export const Route = createRootRoute({
  head: () =&gt; ({
    meta: [
      {
        charset: &#39;utf-8&#39;,
      },
      {
        name: &#39;viewport&#39;,
        content: &#39;width=device-width, initial-scale=1&#39;,
      },
      ...seo({
        title:
          &#39;TanStack Start | Type-Safe, Client-First, Full-Stack React Framework&#39;,
        description: `TanStack Start is a type-safe, client-first, full-stack React framework. `,
      }),
    ],
    links: [
      { rel: &#39;stylesheet&#39;, href: appCss },
      {
        rel: &#39;apple-touch-icon&#39;,
        sizes: &#39;180x180&#39;,
        href: &#39;/apple-touch-icon.png&#39;,
      },
      {
        rel: &#39;icon&#39;,
        type: &#39;image/png&#39;,
        sizes: &#39;32x32&#39;,
        href: &#39;/favicon-32x32.png&#39;,
      },
      {
        rel: &#39;icon&#39;,
        type: &#39;image/png&#39;,
        sizes: &#39;16x16&#39;,
        href: &#39;/favicon-16x16.png&#39;,
      },
      { rel: &#39;manifest&#39;, href: &#39;/site.webmanifest&#39;, color: &#39;#fffff&#39; },
      { rel: &#39;icon&#39;, href: &#39;/favicon.ico&#39; },
    ],
    scripts: [
      {
        src: &#39;/customScript.js&#39;,
        type: &#39;text/javascript&#39;,
      },
    ],
  }),
  errorComponent: DefaultCatchBoundary,
  notFoundComponent: () =&gt; &lt;NotFound /&gt;,
  shellComponent: RootDocument,
})

function RootDocument({ children }: { children: Solid.JSX.Element }) {
  return (
    &lt;html&gt;
      &lt;head&gt;
        &lt;HydrationScript /&gt;
      &lt;/head&gt;
      &lt;body&gt;
        &lt;HeadContent /&gt;
        &lt;div class=&quot;p-2 flex gap-2 text-lg&quot;&gt;
          &lt;Link
            to=&quot;/&quot;
            activeProps={{
              class: &#39;font-bold&#39;,
            }}
            activeOptions={{ exact: true }}
          &gt;
            Home
          &lt;/Link&gt;{&#39; &#39;}
          &lt;Link
            to=&quot;/posts&quot;
            activeProps={{
              class: &#39;font-bold&#39;,
            }}
          &gt;
            Posts
          &lt;/Link&gt;{&#39; &#39;}
          &lt;Link
            to=&quot;/users&quot;
            activeProps={{
              class: &#39;font-bold&#39;,
            }}
          &gt;
            Users
          &lt;/Link&gt;{&#39; &#39;}
          &lt;Link
            to=&quot;/route-a&quot;
            activeProps={{
              class: &#39;font-bold&#39;,
            }}
          &gt;
            Pathless Layout
          &lt;/Link&gt;{&#39; &#39;}
          &lt;Link
            to=&quot;/deferred&quot;
            activeProps={{
              class: &#39;font-bold&#39;,
            }}
          &gt;
            Deferred
          &lt;/Link&gt;{&#39; &#39;}
          &lt;Link
            // @ts-expect-error
            to=&quot;/this-route-does-not-exist&quot;
            activeProps={{
              class: &#39;font-bold&#39;,
            }}
          &gt;
            This Route Does Not Exist
          &lt;/Link&gt;
        &lt;/div&gt;
        &lt;hr /&gt;
        {children}
        &lt;TanStackRouterDevtools position=&quot;bottom-right&quot; /&gt;
        &lt;Scripts /&gt;
      &lt;/body&gt;
    &lt;/html&gt;
  )
}
">
<input type="hidden" name="project[files][src/routes/_pathlessLayout.tsx]" value="import { Outlet, createFileRoute } from &#39;@tanstack/solid-router&#39;

export const Route = createFileRoute(&#39;/_pathlessLayout&#39;)({
  component: LayoutComponent,
})

function LayoutComponent() {
  return (
    &lt;div class=&quot;p-2&quot;&gt;
      &lt;div class=&quot;border-b&quot;&gt;I&#39;m a layout&lt;/div&gt;
      &lt;div&gt;
        &lt;Outlet /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  )
}
">
<input type="hidden" name="project[files][src/routes/customScript%5B.%5Djs.ts]" value="import { createFileRoute } from &#39;@tanstack/solid-router&#39;

export const Route = createFileRoute(&#39;/customScript.js&#39;)({
  server: {
    handlers: {
      GET: () =&gt; {
        return new Response(&#39;console.log(&quot;Hello from customScript.js!&quot;)&#39;, {
          headers: {
            &#39;Content-Type&#39;: &#39;application/javascript&#39;,
          },
        })
      },
    },
  },
})
">
<input type="hidden" name="project[files][src/routes/deferred.tsx]" value="import { Await, createFileRoute } from &#39;@tanstack/solid-router&#39;
import { createServerFn } from &#39;@tanstack/solid-start&#39;
import { Suspense, createSignal } from &#39;solid-js&#39;

const personServerFn = createServerFn({ method: &#39;GET&#39; })
  .inputValidator((d: string) =&gt; d)
  .handler(({ data: name }) =&gt; {
    return { name, randomNumber: Math.floor(Math.random() * 100) }
  })

const slowServerFn = createServerFn({ method: &#39;GET&#39; })
  .inputValidator((d: string) =&gt; d)
  .handler(async ({ data: name }) =&gt; {
    await new Promise((r) =&gt; setTimeout(r, 1000))
    return { name, randomNumber: Math.floor(Math.random() * 100) }
  })

export const Route = createFileRoute(&#39;/deferred&#39;)({
  loader: async () =&gt; {
    return {
      deferredStuff: new Promise&lt;string&gt;((r) =&gt;
        setTimeout(() =&gt; r(&#39;Hello deferred!&#39;), 2000),
      ),
      deferredPerson: slowServerFn({ data: &#39;Tanner Linsley&#39; }),
      person: await personServerFn({ data: &#39;John Doe&#39; }),
    }
  },
  component: Deferred,
})

function Deferred() {
  const [count, setCount] = createSignal(0)
  const loaderData = Route.useLoaderData()

  return (
    &lt;div class=&quot;p-2&quot;&gt;
      &lt;div data-testid=&quot;regular-person&quot;&gt;
        {loaderData().person.name} - {loaderData().person.randomNumber}
      &lt;/div&gt;
      &lt;Suspense fallback={&lt;div&gt;Loading person...&lt;/div&gt;}&gt;
        &lt;Await
          promise={loaderData().deferredPerson}
          children={(data) =&gt; (
            &lt;div data-testid=&quot;deferred-person&quot;&gt;
              {data.name} - {data.randomNumber}
            &lt;/div&gt;
          )}
        /&gt;
      &lt;/Suspense&gt;
      &lt;Suspense fallback={&lt;div&gt;Loading stuff...&lt;/div&gt;}&gt;
        &lt;Await
          promise={loaderData().deferredStuff}
          children={(data) =&gt; &lt;h3 data-testid=&quot;deferred-stuff&quot;&gt;{data}&lt;/h3&gt;}
        /&gt;
      &lt;/Suspense&gt;
      &lt;div&gt;Count: {count()}&lt;/div&gt;
      &lt;div&gt;
        &lt;button onClick={() =&gt; setCount(count() + 1)}&gt;Increment&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  )
}
">
<input type="hidden" name="project[files][src/routes/index.tsx]" value="import { createFileRoute } from &#39;@tanstack/solid-router&#39;
import { createServerFn } from &#39;@tanstack/solid-start&#39;

export const Route = createFileRoute(&#39;/&#39;)({
  loader: () =&gt; getData(),
  component: Home,
})

const getData = createServerFn().handler(() =&gt; {
  return {
    message: `Running in ${navigator.userAgent}`,
  }
})

function Home() {
  const data = Route.useLoaderData()

  return (
    &lt;div class=&quot;p-2&quot;&gt;
      &lt;h3&gt;Welcome Home!!!&lt;/h3&gt;
      &lt;p&gt;{data().message}&lt;/p&gt;
    &lt;/div&gt;
  )
}
">
<input type="hidden" name="project[files][src/routes/posts.$postId.tsx]" value="import { Link, createFileRoute } from &#39;@tanstack/solid-router&#39;
import { fetchPost } from &#39;../utils/posts&#39;
import { NotFound } from &#39;~/components/NotFound&#39;
import { PostErrorComponent } from &#39;~/components/PostError&#39;

export const Route = createFileRoute(&#39;/posts/$postId&#39;)({
  loader: ({ params: { postId } }) =&gt; fetchPost({ data: postId }),
  errorComponent: PostErrorComponent,
  component: PostComponent,
  notFoundComponent: () =&gt; {
    return &lt;NotFound&gt;Post not found&lt;/NotFound&gt;
  },
})

function PostComponent() {
  const post = Route.useLoaderData()

  return (
    &lt;div class=&quot;space-y-2&quot;&gt;
      &lt;h4 class=&quot;text-xl font-bold underline&quot;&gt;{post().title}&lt;/h4&gt;
      &lt;div class=&quot;text-sm&quot;&gt;{post().body}&lt;/div&gt;
      &lt;Link
        to=&quot;/posts/$postId/deep&quot;
        params={{
          postId: String(post().id),
        }}
        activeProps={{ class: &#39;text-black font-bold&#39; }}
        class=&quot;inline-block py-1 text-blue-800 hover:text-blue-600&quot;
      &gt;
        Deep View
      &lt;/Link&gt;
    &lt;/div&gt;
  )
}
">
<input type="hidden" name="project[files][src/routes/posts.index.tsx]" value="import { createFileRoute } from &#39;@tanstack/solid-router&#39;

export const Route = createFileRoute(&#39;/posts/&#39;)({
  component: PostsIndexComponent,
})

function PostsIndexComponent() {
  return &lt;div&gt;Select a post.&lt;/div&gt;
}
">
<input type="hidden" name="project[files][src/routes/posts.tsx]" value="import { Link, Outlet, createFileRoute } from &#39;@tanstack/solid-router&#39;
import { fetchPosts } from &#39;../utils/posts&#39;

export const Route = createFileRoute(&#39;/posts&#39;)({
  loader: async () =&gt; fetchPosts(),
  component: PostsComponent,
})

function PostsComponent() {
  const posts = Route.useLoaderData()

  return (
    &lt;div class=&quot;p-2 flex gap-2&quot;&gt;
      &lt;ul class=&quot;list-disc pl-4&quot;&gt;
        {[...posts(), { id: &#39;i-do-not-exist&#39;, title: &#39;Non-existent Post&#39; }].map(
          (post) =&gt; {
            return (
              &lt;li class=&quot;whitespace-nowrap&quot;&gt;
                &lt;Link
                  to=&quot;/posts/$postId&quot;
                  params={{
                    postId: String(post.id),
                  }}
                  class=&quot;block py-1 text-blue-800 hover:text-blue-600&quot;
                  activeProps={{ class: &#39;text-black font-bold&#39; }}
                &gt;
                  &lt;div&gt;{post.title.substring(0, 20)}&lt;/div&gt;
                &lt;/Link&gt;
              &lt;/li&gt;
            )
          },
        )}
      &lt;/ul&gt;
      &lt;hr /&gt;
      &lt;Outlet /&gt;
    &lt;/div&gt;
  )
}
">
<input type="hidden" name="project[files][src/routes/posts_.$postId.deep.tsx]" value="import { Link, createFileRoute } from &#39;@tanstack/solid-router&#39;
import { fetchPost } from &#39;../utils/posts&#39;
import { PostErrorComponent } from &#39;~/components/PostError&#39;

export const Route = createFileRoute(&#39;/posts_/$postId/deep&#39;)({
  loader: async ({ params: { postId } }) =&gt;
    fetchPost({
      data: postId,
    }),
  errorComponent: PostErrorComponent,
  component: PostDeepComponent,
})

function PostDeepComponent() {
  const post = Route.useLoaderData()

  return (
    &lt;div class=&quot;p-2 space-y-2&quot;&gt;
      &lt;Link to=&quot;/posts&quot; class=&quot;block py-1 text-blue-800 hover:text-blue-600&quot;&gt;
        ← All Posts
      &lt;/Link&gt;
      &lt;h4 class=&quot;text-xl font-bold underline&quot;&gt;{post().title}&lt;/h4&gt;
      &lt;div class=&quot;text-sm&quot;&gt;{post().body}&lt;/div&gt;
    &lt;/div&gt;
  )
}
">
<input type="hidden" name="project[files][src/routes/redirect.tsx]" value="import { createFileRoute, redirect } from &#39;@tanstack/solid-router&#39;

export const Route = createFileRoute(&#39;/redirect&#39;)({
  beforeLoad: () =&gt; {
    throw redirect({
      to: &#39;/posts&#39;,
    })
  },
})
">
<input type="hidden" name="project[files][src/routes/users.$userId.tsx]" value="import { createFileRoute } from &#39;@tanstack/solid-router&#39;
import { NotFound } from &#39;src/components/NotFound&#39;
import { UserErrorComponent } from &#39;src/components/UserError&#39;
import type { User } from &#39;../utils/users&#39;

export const Route = createFileRoute(&#39;/users/$userId&#39;)({
  loader: async ({ params: { userId } }) =&gt; {
    try {
      const res = await fetch(&#39;/api/users/&#39; + userId)
      if (!res.ok) {
        throw new Error(&#39;Unexpected status code&#39;)
      }

      const data = await res.json()

      return data as User
    } catch {
      throw new Error(&#39;Failed to fetch user&#39;)
    }
  },
  errorComponent: UserErrorComponent,
  component: UserComponent,
  notFoundComponent: () =&gt; {
    return &lt;NotFound&gt;User not found&lt;/NotFound&gt;
  },
})

function UserComponent() {
  const user = Route.useLoaderData()

  return (
    &lt;div class=&quot;space-y-2&quot;&gt;
      &lt;h4 class=&quot;text-xl font-bold underline&quot;&gt;{user().name}&lt;/h4&gt;
      &lt;div class=&quot;text-sm&quot;&gt;{user().email}&lt;/div&gt;
      &lt;div&gt;
        &lt;a
          href={`/api/users/${user().id}`}
          class=&quot;text-blue-800 hover:text-blue-600 underline&quot;
        &gt;
          View as JSON
        &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  )
}
">
<input type="hidden" name="project[files][src/routes/users.index.tsx]" value="import { createFileRoute } from &#39;@tanstack/solid-router&#39;

export const Route = createFileRoute(&#39;/users/&#39;)({
  component: UsersIndexComponent,
})

function UsersIndexComponent() {
  return (
    &lt;div&gt;
      Select a user or{&#39; &#39;}
      &lt;a href=&quot;/api/users&quot; class=&quot;text-blue-800 hover:text-blue-600 underline&quot;&gt;
        view as JSON
      &lt;/a&gt;
    &lt;/div&gt;
  )
}
">
<input type="hidden" name="project[files][src/routes/users.tsx]" value="import { Link, Outlet, createFileRoute } from &#39;@tanstack/solid-router&#39;
import type { User } from &#39;../utils/users&#39;

export const Route = createFileRoute(&#39;/users&#39;)({
  loader: async () =&gt; {
    const res = await fetch(&#39;/api/users&#39;)

    if (!res.ok) {
      throw new Error(&#39;Unexpected status code&#39;)
    }

    const data = await res.json()

    return data as Array&lt;User&gt;
  },
  component: UsersComponent,
})

function UsersComponent() {
  const users = Route.useLoaderData()

  return (
    &lt;div class=&quot;p-2 flex gap-2&quot;&gt;
      &lt;ul class=&quot;list-disc pl-4&quot;&gt;
        {[
          ...users(),
          { id: &#39;i-do-not-exist&#39;, name: &#39;Non-existent User&#39;, email: &#39;&#39; },
        ].map((user) =&gt; {
          return (
            &lt;li class=&quot;whitespace-nowrap&quot;&gt;
              &lt;Link
                to=&quot;/users/$userId&quot;
                params={{
                  userId: String(user.id),
                }}
                class=&quot;block py-1 text-blue-800 hover:text-blue-600&quot;
                activeProps={{ class: &#39;text-black font-bold&#39; }}
              &gt;
                &lt;div&gt;{user.name}&lt;/div&gt;
              &lt;/Link&gt;
            &lt;/li&gt;
          )
        })}
      &lt;/ul&gt;
      &lt;hr /&gt;
      &lt;Outlet /&gt;
    &lt;/div&gt;
  )
}
">
<input type="hidden" name="project[files][src/styles/app.css]" value="@import &#39;tailwindcss&#39;;

@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentcolor);
  }
}

@layer base {
  html {
    color-scheme: light dark;
  }

  * {
    @apply border-gray-200 dark:border-gray-800;
  }

  html,
  body {
    @apply text-gray-900 bg-gray-50 dark:bg-gray-950 dark:text-gray-200;
  }

  .using-mouse * {
    outline: none !important;
  }
}
">
<input type="hidden" name="project[files][src/routes/_pathlessLayout/_nested-layout.tsx]" value="import { Link, Outlet, createFileRoute } from &#39;@tanstack/solid-router&#39;

export const Route = createFileRoute(&#39;/_pathlessLayout/_nested-layout&#39;)({
  component: LayoutComponent,
})

function LayoutComponent() {
  return (
    &lt;div&gt;
      &lt;div&gt;I&#39;m a nested layout&lt;/div&gt;
      &lt;div class=&quot;flex gap-2 border-b&quot;&gt;
        &lt;Link
          to=&quot;/route-a&quot;
          activeProps={{
            class: &#39;font-bold&#39;,
          }}
        &gt;
          Go to route A
        &lt;/Link&gt;
        &lt;Link
          to=&quot;/route-b&quot;
          activeProps={{
            class: &#39;font-bold&#39;,
          }}
        &gt;
          Go to route B
        &lt;/Link&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;Outlet /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  )
}
">
<input type="hidden" name="project[files][src/routes/api/users.$userId.ts]" value="import { createFileRoute } from &#39;@tanstack/solid-router&#39;
import { json } from &#39;@tanstack/solid-start&#39;
import type { User } from &#39;~/utils/users&#39;

export const Route = createFileRoute(&#39;/api/users/$userId&#39;)({
  server: {
    handlers: {
      GET: async ({ params, request }) =&gt; {
        console.info(`Fetching users by id=${params.userId}... @`, request.url)
        try {
          const res = await fetch(
            &#39;https://jsonplaceholder.typicode.com/users/&#39; + params.userId,
          )
          if (!res.ok) {
            throw new Error(&#39;Failed to fetch user&#39;)
          }

          // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
          const user = (await res.json()) as User

          return json({
            id: user.id,
            name: user.name,
            email: user.email,
          })
        } catch (e) {
          console.error(e)
          return json({ error: &#39;User not found&#39; }, { status: 404 })
        }
      },
    },
  },
})
">
<input type="hidden" name="project[files][src/routes/api/users.ts]" value="import { createFileRoute } from &#39;@tanstack/solid-router&#39;
import { getRequestHeaders } from &#39;@tanstack/solid-start/server&#39;
import { createMiddleware, json } from &#39;@tanstack/solid-start&#39;
import type { User } from &#39;~/utils/users&#39;

const userLoggerMiddleware = createMiddleware().server(async ({ next }) =&gt; {
  console.info(&#39;In: /users&#39;)
  console.info(&#39;Request Headers:&#39;, getRequestHeaders())
  const result = await next()
  result.response.headers.set(&#39;x-users&#39;, &#39;true&#39;)
  console.info(&#39;Out: /users&#39;)
  return result
})

const testParentMiddleware = createMiddleware().server(async ({ next }) =&gt; {
  console.info(&#39;In: testParentMiddleware&#39;)
  const result = await next()
  result.response.headers.set(&#39;x-test-parent&#39;, &#39;true&#39;)
  console.info(&#39;Out: testParentMiddleware&#39;)
  return result
})

const testMiddleware = createMiddleware()
  .middleware([testParentMiddleware])
  .server(async ({ next }) =&gt; {
    console.info(&#39;In: testMiddleware&#39;)
    const result = await next()
    result.response.headers.set(&#39;x-test&#39;, &#39;true&#39;)

    // if (Math.random() &gt; 0.5) {
    //   throw new Response(null, {
    //     status: 302,
    //     headers: { Location: &#39;https://www.google.com&#39; },
    //   })
    // }

    console.info(&#39;Out: testMiddleware&#39;)
    return result
  })

export const Route = createFileRoute(&#39;/api/users&#39;)({
  server: {
    middleware: [testMiddleware, userLoggerMiddleware],
    handlers: {
      GET: async ({ request }) =&gt; {
        console.info(&#39;GET /api/users @&#39;, request.url)
        console.info(&#39;Fetching users... @&#39;, request.url)
        const res = await fetch(&#39;https://jsonplaceholder.typicode.com/users&#39;)
        if (!res.ok) {
          throw new Error(&#39;Failed to fetch users&#39;)
        }

        // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
        const data = (await res.json()) as Array&lt;User&gt;

        const list = data.slice(0, 10)

        return json(
          list.map((u) =&gt; ({ id: u.id, name: u.name, email: u.email })),
        )
      },
    },
  },
})
">
<input type="hidden" name="project[files][src/routes/_pathlessLayout/_nested-layout/route-a.tsx]" value="import { createFileRoute } from &#39;@tanstack/solid-router&#39;

export const Route = createFileRoute(&#39;/_pathlessLayout/_nested-layout/route-a&#39;)(
  {
    component: LayoutAComponent,
  },
)

function LayoutAComponent() {
  return &lt;div&gt;I&#39;m A!&lt;/div&gt;
}
">
<input type="hidden" name="project[files][src/routes/_pathlessLayout/_nested-layout/route-b.tsx]" value="import { createFileRoute } from &#39;@tanstack/solid-router&#39;

export const Route = createFileRoute(&#39;/_pathlessLayout/_nested-layout/route-b&#39;)(
  {
    component: LayoutBComponent,
  },
)

function LayoutBComponent() {
  return &lt;div&gt;I&#39;m B!&lt;/div&gt;
}
">
<input type="hidden" name="project[description]" value="generated by https://pkg.pr.new">
<input type="hidden" name="project[template]" value="node">
<input type="hidden" name="project[title]" value="tanstack-solid-start-example-basic-netlify">
</form>
<script>document.getElementById("mainForm").submit();</script>

</body></html>