Hosting

Hosting ist der Prozess der Bereitstellung Ihrer Anwendung im Internet, damit Benutzer darauf zugreifen können. Dies ist ein kritischer Teil jedes Webentwicklungsprojekts und stellt sicher, dass Ihre Anwendung für die Welt verfügbar ist. TanStack Start basiert auf Vite, einer leistungsstarken Entwicklungs-/Build-Plattform, die es uns ermöglicht, Ihre Anwendung auf jedem Hosting-Anbieter bereitzustellen.

TanStack Start ist **für die Zusammenarbeit mit jedem Hosting-Anbieter konzipiert**. Wenn Sie bereits einen Hosting-Anbieter im Auge haben, können Sie Ihre Anwendung dort mit den von TanStack Start bereitgestellten Full-Stack-APIs bereitstellen.

Da Hosting jedoch einer der wichtigsten Aspekte für Leistung, Zuverlässigkeit und Skalierbarkeit Ihrer Anwendung ist, empfehlen wir dringend, unseren offiziellen Hosting-Partner Netlify zu nutzen.

Netlify ist eine führende Hosting-Plattform, die eine schnelle, sichere und zuverlässige Umgebung für die Bereitstellung Ihrer Webanwendungen bietet. Mit Netlify können Sie Ihre TanStack Start-Anwendung mit nur wenigen Klicks bereitstellen und von Funktionen wie einem globalen Edge-Netzwerk, automatischer Skalierung und nahtlosen Integrationen mit GitHub und GitLab profitieren. Netlify wurde entwickelt, um Ihren Entwicklungsprozess so reibungslos wie möglich zu gestalten, von der lokalen Entwicklung bis zur Produktionsbereitstellung.

• Weitere Informationen zu Netlify finden Sie auf der Netlify-Website
• Um sich anzumelden, besuchen Sie das Netlify-Dashboard

Wenn eine TanStack Start-Anwendung bereitgestellt wird, bestimmt der target-Wert im TanStack Start Vite-Plugin in der Datei vite.config.ts das Bereitstellungsziel. Das Bereitstellungsziel kann auf einen der folgenden Werte gesetzt werden:

• netlify: Bereitstellung auf Netlify
• vercel: Bereitstellung auf Vercel
• cloudflare-pages: Bereitstellung auf Cloudflare Pages
• railway: Bereitstellung auf Railway
• node-server: Bereitstellung auf einem Node.js-Server
• bun: Bereitstellung auf einem Bun-Server
• ... und mehr folgt!

Sobald Sie ein Bereitstellungsziel ausgewählt haben, können Sie die folgenden Anleitungen zur Bereitstellung befolgen, um Ihre TanStack Start-Anwendung auf dem Hosting-Anbieter Ihrer Wahl bereitzustellen.

Setzen Sie den target-Wert in der TanStack Start Vite-Plugin in der Datei vite.config.ts auf 'netlify'.

// vite.config.ts
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [tanstackStart({ target: 'netlify' })],
})

// vite.config.ts
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [tanstackStart({ target: 'netlify' })],
})

Stellen Sie Ihre Anwendung mit dem One-Click-Bereitstellungsprozess von Netlify bereit, und Sie sind fertig!

Setzen Sie den target-Wert in der TanStack Start Vite-Plugin in der Datei vite.config.ts auf 'vercel'.

// vite.config.ts
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [tanstackStart({ target: 'vercel' })],
})

// vite.config.ts
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [tanstackStart({ target: 'vercel' })],
})

Stellen Sie Ihre Anwendung mit dem One-Click-Bereitstellungsprozess von Vercel bereit, und Sie sind fertig!

Bei der Bereitstellung auf Cloudflare Workers müssen Sie einige zusätzliche Schritte ausführen, bevor Ihre Benutzer Ihre App nutzen können.

1. Aktualisieren Sie vite.config.ts

Setzen Sie in Ihrer Datei vite.config.ts den target-Wert auf cloudflare-module.

// vite.config.ts
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [tanstackStart({ target: 'cloudflare-module' })],
})

// vite.config.ts
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [tanstackStart({ target: 'cloudflare-module' })],
})

2. Fügen Sie eine Konfigurationsdatei wrangler.toml hinzu

# wrangler.toml
name = "your-cloudflare-project-name"
main = "./.output/server/index.mjs"
compatibility_date = "2025-04-01"
compatibility_flags = ["nodejs_compat"]

[assets]
binding = "ASSETS"
directory = "./.output/public"

# wrangler.toml
name = "your-cloudflare-project-name"
main = "./.output/server/index.mjs"
compatibility_date = "2025-04-01"
compatibility_flags = ["nodejs_compat"]

[assets]
binding = "ASSETS"
directory = "./.output/public"

Stellen Sie Ihre Anwendung mit dem One-Click-Bereitstellungsprozess von Cloudflare Workers bereit, und Sie sind fertig!

Railway erkennt Build- und Startbefehle automatisch beim Erstellen und Bereitstellen in einem Dienst.

Setzen Sie in Ihrer Datei vite.config.ts den target-Wert auf node-server.

// vite.config.ts
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [tanstackStart({ target: 'node-server' })],
})

// vite.config.ts
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [tanstackStart({ target: 'node-server' })],
})

Stellen Sie sicher, dass die npm-Skripte build und start in Ihrer Datei package.json vorhanden sind.

    "build": "vite build",
    "start": "node .output/server/index.mjs"

    "build": "vite build",
    "start": "node .output/server/index.mjs"

Dann können Sie den folgenden Befehl ausführen, um Ihre Anwendung zu erstellen

npm run build

npm run build

Sie können Ihre Anwendung starten, indem Sie

npm run start

npm run start

Setzen Sie in Ihrer Datei vite.config.ts den target-Wert auf node-server.

// vite.config.ts
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [tanstackStart({ target: 'node-server' })],
})

// vite.config.ts
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [tanstackStart({ target: 'node-server' })],
})

Dann können Sie den folgenden Befehl ausführen, um Ihre Anwendung zu erstellen und zu starten

npm run build

npm run build

Sie sind nun bereit, Ihre Anwendung auf einem Node.js-Server bereitzustellen. Sie können Ihre Anwendung starten, indem Sie

node .output/server/index.mjs

node .output/server/index.mjs

Stellen Sie sicher, dass Ihre Pakete react und react-dom in Ihrer Datei package.json auf Version 19.0.0 oder höher gesetzt sind. Wenn nicht, führen Sie den folgenden Befehl aus, um die Pakete zu aktualisieren

npm install react@rc react-dom@rc

npm install react@rc react-dom@rc

Setzen Sie in Ihrer Datei vite.config.ts den target-Wert auf bun.

// vite.config.ts
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [tanstackStart({ target: 'bun' })],
})

// vite.config.ts
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [tanstackStart({ target: 'bun' })],
})

Dann können Sie den folgenden Befehl ausführen, um Ihre Anwendung zu erstellen und zu starten

bun run build

bun run build

Sie sind nun bereit, Ihre Anwendung auf einem Bun-Server bereitzustellen. Sie können Ihre Anwendung starten, indem Sie

bun run .output/server/index.mjs

bun run .output/server/index.mjs