Projekt von Grund auf neu erstellen

Hinweis

Wenn Sie sich für den Schnellstart mit einem Beispiel oder einem geklonten Projekt entschieden haben, können Sie diese Anleitung überspringen und zur Anleitung Grundlagen lernen übergehen.

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 bereitstellen...
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 Paketmanager Ihrer Wahl verwenden.

TypeScript-Konfiguration

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

json

{
  "compilerOptions": {
    "jsx": "preserve",
    "jsxImportSource": "solid-js",
    "moduleResolution": "Bundler",
    "module": "ESNext",
    "target": "ES2022",
    "skipLibCheck": true,
    "strictNullChecks": true
  }
}

{
  "compilerOptions": {
    "jsx": "preserve",
    "jsxImportSource": "solid-js",
    "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 durchsickern. 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/solid-start @tanstack/solid-router vite

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

Sie benötigen auch Solid

Shell

npm i solid-js

npm i solid-js

und etwas TypeScript

Shell

npm i -D typescript vite-tsconfig-paths

npm i -D typescript vite-tsconfig-paths

Konfigurationsdateien aktualisieren

Anschließend aktualisieren wir unsere package.json, um die Vite-CLI zu verwenden, und setzen "type": "module"

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 vite-plugin-solid. Setzen Sie customViteSolidPlugin: true, um sich sofort für diese Funktion anzumelden!

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

export default defineConfig({
  server: {
    port: 3000,
  },
  plugins: [
    tsConfigPaths(),
    tanstackStart({ customViteSolidPlugin: true }),
    viteSolid({ ssr: true }),
  ],
})

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

export default defineConfig({
  server: {
    port: 3000,
  },
  plugins: [
    tsConfigPaths(),
    tanstackStart({ customViteSolidPlugin: true }),
    viteSolid({ ssr: true }),
  ],
})

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 Dateibaum, 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 von TanStack Router innerhalb von Start bestimmt. Hier können Sie alles von der Standard- Vorabladungsfunktionalität bis zur Zwischenspeicherungs-Staleness konfigurieren.

Hinweis

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

tsx

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

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

  return router
}

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

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

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

  return router
}

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

Hinweis

TanStack Start bietet standardmäßige Server- und Client-Einstiegspunkte zur Verarbeitung von Anfragen und Client-Einstiegspunkten + Hydrierung. Sie können diese Einstiegspunkte anpassen, indem Sie eine server.ts- und/oder client.tsx-Datei im Stammverzeichnis Ihres Projekts hinzufügen, aber im Moment werden wir die Standardwerte verwenden.

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
import {
  Outlet,
  createRootRoute,
  HeadContent,
  Scripts,
} from '@tanstack/solid-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 <Outlet />
}

// src/routes/__root.tsx
import {
  Outlet,
  createRootRoute,
  HeadContent,
  Scripts,
} from '@tanstack/solid-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 <Outlet />
}

Ihre erste Route schreiben

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

tsx

// src/routes/index.tsx
import * as fs from 'node:fs'
import { createFileRoute, useRouter } from '@tanstack/solid-router'
import { createServerFn } from '@tanstack/solid-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/solid-router'
import { createServerFn } from '@tanstack/solid-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 ist alles! 🤯 Sie haben jetzt ein TanStack Start-Projekt eingerichtet und Ihre erste Route geschrieben. 🎉

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

Sie möchten 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