Ein Projekt von Grund auf neu erstellen

Hinweis

Wenn Sie sich entschieden haben, schnell mit einem Beispiel oder einem geklonten Projekt zu starten, können Sie diese Anleitung überspringen und mit der Anleitung Grundlagen lernen fortfahren.

Sie möchten also ein TanStack Start-Projekt von Grund auf neu erstellen?

Diese Anleitung hilft Ihnen beim Erstellen einer **sehr** einfachen TanStack Start-Webanwendung. Gemeinsam werden wir TanStack Start verwenden, um

eine Indexseite zu servieren...
die einen Zähler anzeigt...
mit einer Schaltfläche, um den Zähler persistent zu erhöhen.

So wird das aussehen

Lassen Sie uns ein neues Projektverzeichnis erstellen und es initialisieren.

Shell

mkdir myApp
cd myApp
npm init -y

mkdir myApp
cd myApp
npm init -y

Hinweis

> Wir verwenden in all diesen Beispielen npm, aber Sie können stattdessen Ihren bevorzugten Paketmanager verwenden.

TypeScript-Konfiguration

Wir empfehlen dringend die Verwendung von TypeScript mit TanStack Start. Erstellen Sie eine Datei tsconfig.json mit mindestens den folgenden Einstellungen

json

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "moduleResolution": "Bundler",
    "module": "ESNext",
    "target": "ES2022",
    "skipLibCheck": true,
    "strictNullChecks": true
  }
}

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "moduleResolution": "Bundler",
    "module": "ESNext",
    "target": "ES2022",
    "skipLibCheck": true,
    "strictNullChecks": true
  }
}

Hinweis

> Das Aktivieren von verbatimModuleSyntax kann dazu führen, dass Server-Bundles in Client-Bundles gelangen. Es wird empfohlen, diese Option deaktiviert zu lassen.

Abhängigkeiten installieren

TanStack Start wird von Vite und TanStack Router angetrieben und benötigt diese als Abhängigkeiten.

Um sie zu installieren, führen Sie Folgendes aus:

Shell

npm i @tanstack/react-start @tanstack/react-router vite

npm i @tanstack/react-start @tanstack/react-router vite

Sie benötigen außerdem React

Shell

npm i react react-dom

npm i react react-dom

und etwas TypeScript

Shell

npm i -D typescript @types/react @types/react-dom vite-tsconfig-paths @vitejs/plugin-react

npm i -D typescript @types/react @types/react-dom vite-tsconfig-paths @vitejs/plugin-react

Konfigurationsdateien aktualisieren

Wir werden dann unser package.json aktualisieren, um die Vite CLI zu verwenden und "type": "module" festzulegen

json

{
  // ...
  "type": "module",
  "scripts": {
    "dev": "vite dev",
    "build": "vite build"
  }
}

{
  // ...
  "type": "module",
  "scripts": {
    "dev": "vite dev",
    "build": "vite build"
  }
}

Konfigurieren Sie dann das Vite-Plugin von TanStack Start in vite.config.ts

Hinweis

TanStack Start wird die automatische Konfiguration von React/Solid Vite-Plugins einstellen. Sie haben die volle Kontrolle – wählen Sie @vitejs/plugin-react, @vitejs/plugin-react-oxc usw. Setzen Sie customViteReactPlugin: true, um diese Funktion sofort zu nutzen!

// vite.config.ts
import { defineConfig } from 'vite'
import tsConfigPaths from 'vite-tsconfig-paths'
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import viteReact from '@vitejs/plugin-react'

export default defineConfig({
  server: {
    port: 3000,
  },
  plugins: [
    tsConfigPaths(),
    tanstackStart({ customViteReactPlugin: true }),
    viteReact(),
  ],
})

// vite.config.ts
import { defineConfig } from 'vite'
import tsConfigPaths from 'vite-tsconfig-paths'
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import viteReact from '@vitejs/plugin-react'

export default defineConfig({
  server: {
    port: 3000,
  },
  plugins: [
    tsConfigPaths(),
    tanstackStart({ customViteReactPlugin: true }),
    viteReact(),
  ],
})

Die grundlegende Vorlage hinzufügen

Es gibt 2 erforderliche Dateien für die Verwendung von TanStack Start

Die Router-Konfiguration
Die Wurzel Ihrer Anwendung

Sobald die Konfiguration abgeschlossen ist, haben wir einen Dateistruktur, der wie folgt aussieht:

.
├── src/
│   ├── routes/
│   │   └── `__root.tsx`
│   ├── `router.tsx`
│   ├── `routeTree.gen.ts`
├── `.gitignore`
├── `vite.config.ts`
├── `package.json`
└── `tsconfig.json`

.
├── src/
│   ├── routes/
│   │   └── `__root.tsx`
│   ├── `router.tsx`
│   ├── `routeTree.gen.ts`
├── `.gitignore`
├── `vite.config.ts`
├── `package.json`
└── `tsconfig.json`

Die Router-Konfiguration

Dies ist die Datei, die das Verhalten des in Start verwendeten TanStack Routers bestimmt. Hier können Sie alles konfigurieren, von der Standard- Vorabladungsfunktionalität bis hin zur Aktualität des Cachings.

Hinweis

Sie werden noch keine Datei routeTree.gen.ts haben. Diese Datei wird generiert, wenn Sie TanStack Start zum ersten Mal ausführen.

tsx

// src/router.tsx
import { createRouter as createTanStackRouter } from '@tanstack/react-router'
import { routeTree } from './routeTree.gen'

export function createRouter() {
  const router = createTanStackRouter({
    routeTree,
    scrollRestoration: true,
  })

  return router
}

declare module '@tanstack/react-router' {
  interface Register {
    router: ReturnType<typeof createRouter>
  }
}

// src/router.tsx
import { createRouter as createTanStackRouter } from '@tanstack/react-router'
import { routeTree } from './routeTree.gen'

export function createRouter() {
  const router = createTanStackRouter({
    routeTree,
    scrollRestoration: true,
  })

  return router
}

declare module '@tanstack/react-router' {
  interface Register {
    router: ReturnType<typeof createRouter>
  }
}

Die Wurzel Ihrer Anwendung

Schließlich müssen wir die Wurzel unserer Anwendung erstellen. Dies ist der Einstiegspunkt für alle anderen Routen. Der Code in dieser Datei wird alle anderen Routen in der Anwendung umschließen.

tsx

// src/routes/__root.tsx
/// <reference types="vite/client" />
import type { ReactNode } from 'react'
import {
  Outlet,
  createRootRoute,
  HeadContent,
  Scripts,
} from '@tanstack/react-router'

export const Route = createRootRoute({
  head: () => ({
    meta: [
      {
        charSet: 'utf-8',
      },
      {
        name: 'viewport',
        content: 'width=device-width, initial-scale=1',
      },
      {
        title: 'TanStack Start Starter',
      },
    ],
  }),
  component: RootComponent,
})

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

function RootDocument({ children }: Readonly<{ children: ReactNode }>) {
  return (
    <html>
      <head>
        <HeadContent />
      </head>
      <body>
        {children}
        <Scripts />
      </body>
    </html>
  )
}

// src/routes/__root.tsx
/// <reference types="vite/client" />
import type { ReactNode } from 'react'
import {
  Outlet,
  createRootRoute,
  HeadContent,
  Scripts,
} from '@tanstack/react-router'

export const Route = createRootRoute({
  head: () => ({
    meta: [
      {
        charSet: 'utf-8',
      },
      {
        name: 'viewport',
        content: 'width=device-width, initial-scale=1',
      },
      {
        title: 'TanStack Start Starter',
      },
    ],
  }),
  component: RootComponent,
})

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

function RootDocument({ children }: Readonly<{ children: ReactNode }>) {
  return (
    <html>
      <head>
        <HeadContent />
      </head>
      <body>
        {children}
        <Scripts />
      </body>
    </html>
  )
}

Ihre erste Route schreiben

Nachdem wir nun die grundlegende Vorlage eingerichtet haben, können wir unsere erste Route schreiben. Dies geschieht durch Erstellen einer neuen Datei im Verzeichnis src/routes.

tsx

// src/routes/index.tsx
import * as fs from 'node:fs'
import { createFileRoute, useRouter } from '@tanstack/react-router'
import { createServerFn } from '@tanstack/react-start'

const filePath = 'count.txt'

async function readCount() {
  return parseInt(
    await fs.promises.readFile(filePath, 'utf-8').catch(() => '0'),
  )
}

const getCount = createServerFn({
  method: 'GET',
}).handler(() => {
  return readCount()
})

const updateCount = createServerFn({ method: 'POST' })
  .validator((d: number) => d)
  .handler(async ({ data }) => {
    const count = await readCount()
    await fs.promises.writeFile(filePath, `${count + data}`)
  })

export const Route = createFileRoute('/')({
  component: Home,
  loader: async () => await getCount(),
})

function Home() {
  const router = useRouter()
  const state = Route.useLoaderData()

  return (
    <button
      type="button"
      onClick={() => {
        updateCount({ data: 1 }).then(() => {
          router.invalidate()
        })
      }}
    >
      Add 1 to {state}?
    </button>
  )
}

// src/routes/index.tsx
import * as fs from 'node:fs'
import { createFileRoute, useRouter } from '@tanstack/react-router'
import { createServerFn } from '@tanstack/react-start'

const filePath = 'count.txt'

async function readCount() {
  return parseInt(
    await fs.promises.readFile(filePath, 'utf-8').catch(() => '0'),
  )
}

const getCount = createServerFn({
  method: 'GET',
}).handler(() => {
  return readCount()
})

const updateCount = createServerFn({ method: 'POST' })
  .validator((d: number) => d)
  .handler(async ({ data }) => {
    const count = await readCount()
    await fs.promises.writeFile(filePath, `${count + data}`)
  })

export const Route = createFileRoute('/')({
  component: Home,
  loader: async () => await getCount(),
})

function Home() {
  const router = useRouter()
  const state = Route.useLoaderData()

  return (
    <button
      type="button"
      onClick={() => {
        updateCount({ data: 1 }).then(() => {
          router.invalidate()
        })
      }}
    >
      Add 1 to {state}?
    </button>
  )
}

Das war's! 🤯 Sie haben jetzt ein TanStack Start-Projekt eingerichtet und Ihre erste Route geschrieben. 🎉

Sie können jetzt npm run dev ausführen, um Ihren Server zu starten und zu https://:3000 zu navigieren, um Ihre Route in Aktion zu sehen.

Möchten Sie Ihre Anwendung bereitstellen? Schauen Sie sich die Hosting-Anleitung an.

TypeScript-Konfiguration

Abhängigkeiten installieren

Konfigurationsdateien aktualisieren

Die grundlegende Vorlage hinzufügen

Die Router-Konfiguration

Die Wurzel Ihrer Anwendung

Ihre erste Route schreiben

Bytes abonnieren

Bytes abonnieren