📄 tanstack/start/latest/docs/framework/solid/examples/start-basic-static

File: start-basic-static.md | Updated: 11/15/2025

Source: https://tanstack.com/start/latest/docs/framework/solid/examples/start-basic-static



TanStack

Start v0v0

Search...

+ K

Auto

Log In

TanStack StartRC

Docs Examples GitHub Contributors

TanStack Router

Docs Examples GitHub Contributors

TanStack Query

Docs Examples GitHub Contributors

TanStack Table

Docs Examples Github Contributors

TanStack Formnew

Docs Examples Github Contributors

TanStack DBbeta

Docs Github Contributors

TanStack Virtual

Docs Examples Github Contributors

TanStack Paceralpha

Docs Examples Github Contributors

TanStack Storealpha

Docs Examples Github Contributors

TanStack Devtoolsalpha

Docs Github Contributors

More Libraries

Maintainers Partners Support Learn StatsBETA Discord Merch Blog GitHub Ethos Brand Guide

Documentation

Framework

Solid logo

Solid

Version

Latest

Search...

+ K

Menu

Getting Started

Guides

Examples

Framework

Solid logo

Solid

Version

Latest

Menu

Getting Started

Guides

Examples

Solid Example: Start Basic Static

Deploy to Cloudflare Deploy with Netlify Github CodeSandbox

===================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================

Code ExplorerCode

Interactive SandboxSandbox

  • public

  • src

    • components

    • routes

      • _pathlessLayout

      • __root.tsx file icon__root.tsx

      • _pathlessLayout.tsx file icon_pathlessLayout.tsx

      • deferred.tsx file icondeferred.tsx

      • index.tsx file iconindex.tsx

      • posts.$postId.tsx file iconposts.$postId.tsx

      • posts.index.tsx file iconposts.index.tsx

      • posts.tsx file iconposts.tsx

      • posts_.$postId.deep.tsx file iconposts_.$postId.deep.tsx

      • redirect.tsx file iconredirect.tsx

      • users.$userId.tsx file iconusers.$userId.tsx

      • users.index.tsx file iconusers.index.tsx

      • users.tsx file iconusers.tsx

    • styles

    • utils

    • routeTree.gen.ts file iconrouteTree.gen.ts

    • router.tsx file iconrouter.tsx

  • .gitignore file icon.gitignore

  • .prettierignore file icon.prettierignore

  • README.md file iconREADME.md

  • package.json file iconpackage.json

  • postcss.config.cjs file iconpostcss.config.cjs

  • tailwind.config.cjs file icontailwind.config.cjs

  • tsconfig.json file icontsconfig.json

  • vite.config.ts file iconvite.config.ts

tsx

/// <reference types="vite/client" />
import {
  HeadContent,
  Link,
  Outlet,
  Scripts,
  createRootRoute,
} from '@tanstack/solid-router'
import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'
import { HydrationScript } from 'solid-js/web'
import type * as Solid from 'solid-js'
import { DefaultCatchBoundary } from '~/components/DefaultCatchBoundary'
import { NotFound } from '~/components/NotFound'
import appCss from '~/styles/app.css?url'
import { seo } from '~/utils/seo'

export const Route = createRootRoute({
  head: () => ({
    meta: [\
      {\
        charset: 'utf-8',\
      },\
      {\
        name: 'viewport',\
        content: 'width=device-width, initial-scale=1',\
      },\
      ...seo({\
        title:\
          'TanStack Start | Type-Safe, Client-First, Full-Stack React Framework',\
        description: `TanStack Start is a type-safe, client-first, full-stack React framework. `,\
      }),\
    ],
    links: [\
      { rel: 'stylesheet', href: appCss },\
      {\
        rel: 'apple-touch-icon',\
        sizes: '180x180',\
        href: '/apple-touch-icon.png',\
      },\
      {\
        rel: 'icon',\
        type: 'image/png',\
        sizes: '32x32',\
        href: '/favicon-32x32.png',\
      },\
      {\
        rel: 'icon',\
        type: 'image/png',\
        sizes: '16x16',\
        href: '/favicon-16x16.png',\
      },\
      { rel: 'manifest', href: '/site.webmanifest', color: '#fffff' },\
      { rel: 'icon', href: '/favicon.ico' },\
    ],
  }),
  errorComponent: (props) => {
    return (
      <RootLayout>
        <DefaultCatchBoundary {...props} />
      </RootLayout>
    )
  },
  notFoundComponent: () => <NotFound />,
  component: RootComponent,
})

function RootComponent() {
  return (
    <RootLayout>
      <Outlet />
    </RootLayout>
  )
}

function RootLayout({ children }: { children: Solid.JSX.Element }) {
  return (
    <html>
      <head>
        <HydrationScript />
      </head>
      <body>
        <HeadContent />
        <div class="p-2 flex gap-2 text-lg">
          <Link
            to="/"
            activeProps={{
              class: 'font-bold',
            }}
            activeOptions={{ exact: true }}
          >
            Home
          </Link>{' '}
          <Link
            to="/posts"
            activeProps={{
              class: 'font-bold',
            }}
          >
            Posts
          </Link>{' '}
          <Link
            to="/users"
            activeProps={{
              class: 'font-bold',
            }}
          >
            Users
          </Link>{' '}
          <Link
            to="/route-a"
            activeProps={{
              class: 'font-bold',
            }}
          >
            Pathless Layout
          </Link>{' '}
          <Link
            to="/deferred"
            activeProps={{
              class: 'font-bold',
            }}
          >
            Deferred
          </Link>{' '}
          <Link
            // @ts-expect-error
            to="/this-route-does-not-exist"
            activeProps={{
              class: 'font-bold',
            }}
          >
            This Route Does Not Exist
          </Link>
        </div>
        <hr />
        {children}
        <TanStackRouterDevtools position="bottom-right" />
        <Scripts />
      </body>
    </html>
  )
}


/// <reference types="vite/client" />
import {
  HeadContent,
  Link,
  Outlet,
  Scripts,
  createRootRoute,
} from '@tanstack/solid-router'
import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'
import { HydrationScript } from 'solid-js/web'
import type * as Solid from 'solid-js'
import { DefaultCatchBoundary } from '~/components/DefaultCatchBoundary'
import { NotFound } from '~/components/NotFound'
import appCss from '~/styles/app.css?url'
import { seo } from '~/utils/seo'

export const Route = createRootRoute({
  head: () => ({
    meta: [\
      {\
        charset: 'utf-8',\
      },\
      {\
        name: 'viewport',\
        content: 'width=device-width, initial-scale=1',\
      },\
      ...seo({\
        title:\
          'TanStack Start | Type-Safe, Client-First, Full-Stack React Framework',\
        description: `TanStack Start is a type-safe, client-first, full-stack React framework. `,\
      }),\
    ],
    links: [\
      { rel: 'stylesheet', href: appCss },\
      {\
        rel: 'apple-touch-icon',\
        sizes: '180x180',\
        href: '/apple-touch-icon.png',\
      },\
      {\
        rel: 'icon',\
        type: 'image/png',\
        sizes: '32x32',\
        href: '/favicon-32x32.png',\
      },\
      {\
        rel: 'icon',\
        type: 'image/png',\
        sizes: '16x16',\
        href: '/favicon-16x16.png',\
      },\
      { rel: 'manifest', href: '/site.webmanifest', color: '#fffff' },\
      { rel: 'icon', href: '/favicon.ico' },\
    ],
  }),
  errorComponent: (props) => {
    return (
      <RootLayout>
        <DefaultCatchBoundary {...props} />
      </RootLayout>
    )
  },
  notFoundComponent: () => <NotFound />,
  component: RootComponent,
})

function RootComponent() {
  return (
    <RootLayout>
      <Outlet />
    </RootLayout>
  )
}

function RootLayout({ children }: { children: Solid.JSX.Element }) {
  return (
    <html>
      <head>
        <HydrationScript />
      </head>
      <body>
        <HeadContent />
        <div class="p-2 flex gap-2 text-lg">
          <Link
            to="/"
            activeProps={{
              class: 'font-bold',
            }}
            activeOptions={{ exact: true }}
          >
            Home
          </Link>{' '}
          <Link
            to="/posts"
            activeProps={{
              class: 'font-bold',
            }}
          >
            Posts
          </Link>{' '}
          <Link
            to="/users"
            activeProps={{
              class: 'font-bold',
            }}
          >
            Users
          </Link>{' '}
          <Link
            to="/route-a"
            activeProps={{
              class: 'font-bold',
            }}
          >
            Pathless Layout
          </Link>{' '}
          <Link
            to="/deferred"
            activeProps={{
              class: 'font-bold',
            }}
          >
            Deferred
          </Link>{' '}
          <Link
            // @ts-expect-error
            to="/this-route-does-not-exist"
            activeProps={{
              class: 'font-bold',
            }}
          >
            This Route Does Not Exist
          </Link>
        </div>
        <hr />
        {children}
        <TanStackRouterDevtools position="bottom-right" />
        <Scripts />
      </body>
    </html>
  )
}

Bare + Convex + Better Auth

Cloudflare Vite Plugin

Partners Become a Partner

Code RabbitCode Rabbit CloudflareCloudflare AG GridAG Grid NetlifyNetlify NeonNeon WorkOSWorkOS ClerkClerk ConvexConvex ElectricElectric SentrySentry PrismaPrisma StrapiStrapi UnkeyUnkey

scarf analytics