<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
dist
dist-ssr
*.local
">
<input type="hidden" name="project[files][README.md]" value="# TanStack Router - esbuild File-Based Quickstart

A quickstart example using esbuild as the bundler with file-based routing.

- [TanStack Router Docs](https://tanstack.com/router)
- [esbuild Documentation](https://esbuild.github.io/)

## Start a new project based on this example

To start a new project based on this example, run:

```sh
npx gitpick TanStack/router/tree/main/examples/react/quickstart-esbuild-file-based quickstart-esbuild-file-based
```

## Getting Started

Install dependencies:

```sh
pnpm install
```

Start the development server:

```sh
pnpm dev
```

## Build

Build for production:

```sh
pnpm build
```

## About This Example

This example demonstrates:

- esbuild bundler integration
- File-based routing
- Fast build times
- Minimal configuration
">
<input type="hidden" name="project[files][esbuild.config.js]" value="import { tanstackRouter } from &#39;@tanstack/router-plugin/esbuild&#39;

export default {
  jsx: &#39;transform&#39;,
  minify: true,
  sourcemap: true,
  bundle: true,
  format: &#39;esm&#39;,
  target: [&#39;esnext&#39;],
  plugins: [tanstackRouter({ target: &#39;react&#39;, autoCodeSplitting: true })],
}
">
<input type="hidden" name="project[files][index.html]" value="&lt;!doctype html&gt;
&lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot; /&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;
    &lt;title&gt;Vite App&lt;/title&gt;
    &lt;script src=&quot;https://unpkg.com/@tailwindcss/browser@4&quot;&gt;&lt;/script&gt;
    &lt;style type=&quot;text/tailwindcss&quot;&gt;
      html {
        color-scheme: light dark;
      }
      * {
        @apply border-gray-200 dark:border-gray-800;
      }
      body {
        @apply bg-gray-50 text-gray-950 dark:bg-gray-900 dark:text-gray-200;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id=&quot;app&quot;&gt;&lt;/div&gt;
    &lt;script type=&quot;module&quot; src=&quot;/dist/main.js&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;
">
<input type="hidden" name="project[files][package.json]" value="{&quot;name&quot;:&quot;tanstack-router-react-example-quickstart-esbuild-file-based&quot;,&quot;private&quot;:true,&quot;type&quot;:&quot;module&quot;,&quot;scripts&quot;:{&quot;dev&quot;:&quot;esbuild src/main.tsx --serve=3001 --bundle --outfile=dist/main.js --watch --servedir=.&quot;,&quot;build&quot;:&quot;esbuild src/main.tsx --bundle --outfile=dist/main.js&quot;,&quot;serve&quot;:&quot;esbuild src/main.tsx --bundle --outfile=dist/main.js --servedir=.&quot;,&quot;start&quot;:&quot;dev&quot;},&quot;dependencies&quot;:{&quot;@tanstack/react-router&quot;:&quot;https://pkg.pr.new/TanStack/router/@tanstack/react-router@1e68341&quot;,&quot;@tanstack/react-router-devtools&quot;:&quot;https://pkg.pr.new/TanStack/router/@tanstack/react-router-devtools@1e68341&quot;,&quot;@tanstack/router-plugin&quot;:&quot;https://pkg.pr.new/TanStack/router/@tanstack/router-plugin@1e68341&quot;,&quot;react&quot;:&quot;^19.0.0&quot;,&quot;react-dom&quot;:&quot;^19.0.0&quot;,&quot;redaxios&quot;:&quot;^0.5.1&quot;,&quot;zod&quot;:&quot;^3.24.2&quot;},&quot;devDependencies&quot;:{&quot;@types/react&quot;:&quot;^19.0.8&quot;,&quot;@types/react-dom&quot;:&quot;^19.0.3&quot;,&quot;esbuild&quot;:&quot;^0.27.4&quot;}}">
<input type="hidden" name="project[files][tsconfig.json]" value="{
  &quot;compilerOptions&quot;: {
    &quot;strict&quot;: true,
    &quot;esModuleInterop&quot;: true,
    &quot;jsx&quot;: &quot;react-jsx&quot;,
    &quot;lib&quot;: [&quot;DOM&quot;, &quot;DOM.Iterable&quot;, &quot;ES2022&quot;],
    &quot;skipLibCheck&quot;: true
  }
}
">
<input type="hidden" name="project[files][.devcontainer/devcontainer.json]" value="{
  &quot;image&quot;: &quot;mcr.microsoft.com/devcontainers/typescript-node:24&quot;
}
">
<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/main.tsx]" value="import React from &#39;react&#39;
import ReactDOM from &#39;react-dom/client&#39;
import { RouterProvider, createRouter } from &#39;@tanstack/react-router&#39;
import { routeTree } from &#39;./routeTree.gen&#39;

// Set up a Router instance
const router = createRouter({
  routeTree,
  defaultPreload: &#39;intent&#39;,
  scrollRestoration: true,
})

// Register things for typesafety
declare module &#39;@tanstack/react-router&#39; {
  interface Register {
    router: typeof router
  }
}

const rootElement = document.getElementById(&#39;app&#39;)!

if (!rootElement.innerHTML) {
  const root = ReactDOM.createRoot(rootElement)
  root.render(&lt;RouterProvider router={router} /&gt;)
}
">
<input type="hidden" name="project[files][src/posts.tsx]" value="import axios from &#39;redaxios&#39;

export type PostType = {
  id: string
  title: string
  body: string
}

export class PostNotFoundError extends Error {}

export const fetchPost = async (postId: string) =&gt; {
  console.info(`Fetching post with id ${postId}...`)
  await new Promise((r) =&gt; setTimeout(r, 500))
  const post = await axios
    .get&lt;PostType&gt;(`https://jsonplaceholder.typicode.com/posts/${postId}`)
    .then((r) =&gt; r.data)
    .catch((err) =&gt; {
      if (err.status === 404) {
        throw new PostNotFoundError(`Post with id &quot;${postId}&quot; not found!`)
      }
      throw err
    })

  return post
}

export const fetchPosts = async () =&gt; {
  console.info(&#39;Fetching posts...&#39;)
  await new Promise((r) =&gt; setTimeout(r, 500))
  return axios
    .get&lt;PostType[]&gt;(&#39;https://jsonplaceholder.typicode.com/posts&#39;)
    .then((r) =&gt; r.data.slice(0, 10))
}
">
<input type="hidden" name="project[files][src/routeTree.gen.ts]" value="/* prettier-ignore-start */

/* eslint-disable */

// @ts-nocheck

// noinspection JSUnusedGlobalSymbols

// This file is auto-generated by TanStack Router

// Import Routes

import { Route as rootRoute } from &#39;./routes/__root&#39;
import { Route as AboutImport } from &#39;./routes/about&#39;
import { Route as IndexImport } from &#39;./routes/index&#39;

// Create/Update Routes

const AboutRoute = AboutImport.update({
  path: &#39;/about&#39;,
  getParentRoute: () =&gt; rootRoute,
} as any)

const IndexRoute = IndexImport.update({
  path: &#39;/&#39;,
  getParentRoute: () =&gt; rootRoute,
} as any)

// Populate the FileRoutesByPath interface

declare module &#39;@tanstack/react-router&#39; {
  interface FileRoutesByPath {
    &#39;/&#39;: {
      id: &#39;/&#39;
      path: &#39;/&#39;
      fullPath: &#39;/&#39;
      preLoaderRoute: typeof IndexImport
      parentRoute: typeof rootRoute
    }
    &#39;/about&#39;: {
      id: &#39;/about&#39;
      path: &#39;/about&#39;
      fullPath: &#39;/about&#39;
      preLoaderRoute: typeof AboutImport
      parentRoute: typeof rootRoute
    }
  }
}

// Create and export the route tree

export interface FileRoutesByFullPath {
  &#39;/&#39;: typeof IndexRoute
  &#39;/about&#39;: typeof AboutRoute
}

export interface FileRoutesByTo {
  &#39;/&#39;: typeof IndexRoute
  &#39;/about&#39;: typeof AboutRoute
}

export interface FileRoutesById {
  __root__: typeof rootRoute
  &#39;/&#39;: typeof IndexRoute
  &#39;/about&#39;: typeof AboutRoute
}

export interface FileRouteTypes {
  fileRoutesByFullPath: FileRoutesByFullPath
  fullPaths: &#39;/&#39; | &#39;/about&#39;
  fileRoutesByTo: FileRoutesByTo
  to: &#39;/&#39; | &#39;/about&#39;
  id: &#39;__root__&#39; | &#39;/&#39; | &#39;/about&#39;
  fileRoutesById: FileRoutesById
}

export interface RootRouteChildren {
  IndexRoute: typeof IndexRoute
  AboutRoute: typeof AboutRoute
}

const rootRouteChildren: RootRouteChildren = {
  IndexRoute: IndexRoute,
  AboutRoute: AboutRoute,
}

export const routeTree = rootRoute
  ._addFileChildren(rootRouteChildren)
  ._addFileTypes&lt;FileRouteTypes&gt;()

/* prettier-ignore-end */

/* ROUTE_MANIFEST_START
{
  &quot;routes&quot;: {
    &quot;__root__&quot;: {
      &quot;filePath&quot;: &quot;__root.tsx&quot;,
      &quot;children&quot;: [
        &quot;/&quot;,
        &quot;/about&quot;
      ]
    },
    &quot;/&quot;: {
      &quot;filePath&quot;: &quot;index.tsx&quot;
    },
    &quot;/about&quot;: {
      &quot;filePath&quot;: &quot;about.tsx&quot;
    }
  }
}
ROUTE_MANIFEST_END */
">
<input type="hidden" name="project[files][src/routes/__root.tsx]" value="import * as React from &#39;react&#39;
import { Link, Outlet, createRootRoute } from &#39;@tanstack/react-router&#39;
import { TanStackRouterDevtools } from &#39;@tanstack/react-router-devtools&#39;

export const Route = createRootRoute({
  component: RootComponent,
})

function RootComponent() {
  return (
    &lt;&gt;
      &lt;div className=&quot;p-2 flex gap-2 text-lg&quot;&gt;
        &lt;Link
          to=&quot;/&quot;
          activeProps={{
            className: &#39;font-bold&#39;,
          }}
          activeOptions={{ exact: true }}
        &gt;
          Home
        &lt;/Link&gt;{&#39; &#39;}
        &lt;Link
          to=&quot;/about&quot;
          activeProps={{
            className: &#39;font-bold&#39;,
          }}
        &gt;
          About
        &lt;/Link&gt;
      &lt;/div&gt;
      &lt;hr /&gt;
      &lt;Outlet /&gt;
      &lt;TanStackRouterDevtools position=&quot;bottom-right&quot; /&gt;
    &lt;/&gt;
  )
}
">
<input type="hidden" name="project[files][src/routes/about.tsx]" value="import * as React from &#39;react&#39;
import { createFileRoute } from &#39;@tanstack/react-router&#39;

export const Route = createFileRoute(&#39;/about&#39;)({
  component: AboutComponent,
})

function AboutComponent() {
  return (
    &lt;div className=&quot;p-2&quot;&gt;
      &lt;h3&gt;About&lt;/h3&gt;
    &lt;/div&gt;
  )
}
">
<input type="hidden" name="project[files][src/routes/index.tsx]" value="import * as React from &#39;react&#39;
import { createFileRoute } from &#39;@tanstack/react-router&#39;

export const Route = createFileRoute(&#39;/&#39;)({
  component: HomeComponent,
})

function HomeComponent() {
  return (
    &lt;div className=&quot;p-2&quot;&gt;
      &lt;h3&gt;Welcome Home!&lt;/h3&gt;
    &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-router-react-example-quickstart-esbuild-file-based">
</form>
<script>document.getElementById("mainForm").submit();</script>

</body></html>