Hosting

Hosting ist der Prozess der Bereitstellung Ihrer Anwendung im Internet, damit Benutzer darauf zugreifen können. Dies ist ein entscheidender Teil jedes Webentwicklungsprojekts, der sicherstellt, dass Ihre Anwendung für die Welt verfügbar ist. TanStack Start basiert auf Nitro, einem leistungsstarken Server-Toolkit für die Bereitstellung von Webanwendungen überall. Nitro ermöglicht es TanStack Start, eine einheitliche API für SSR, Streaming und Hydration bei jedem Hosting-Anbieter bereitzustellen.

TanStack Start ist mit jedem Hosting-Anbieter kompatibel. Wenn Sie also 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 der Leistung, Zuverlässigkeit und Skalierbarkeit Ihrer Anwendung ist, empfehlen wir dringend die Nutzung unseres offiziellen Hosting-Partners Netlify.

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 vom lokalen Entwickeln bis zur Produktionsbereitstellung so reibungslos wie möglich zu gestalten.

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

Bei der Bereitstellung einer TanStack Start-Anwendung bestimmt der Wert target 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
• node-server: Bereitstellung auf einem Node.js-Server
• bun: Bereitstellung auf einem Bun-Server
• ... und weitere sind in Planung!

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

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

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

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

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

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

Stellen Sie Ihre Anwendung mit dem Ein-Klick-Bereitstellungsprozess von Netlify bereit, und Sie sind startklar!

Die Bereitstellung Ihrer TanStack Start-Anwendung auf Vercel ist einfach und unkompliziert. Setzen Sie einfach den Wert target in Ihrer Datei vite.config.ts auf vercel und Sie sind bereit, Ihre Anwendung auf Vercel bereitzustellen.

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

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

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

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

Stellen Sie Ihre Anwendung mit dem Ein-Klick-Bereitstellungsprozess von Vercel bereit, und Sie sind startklar!

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

1. Aktualisieren Sie vite.config.ts

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

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

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

// vite.config.ts
import { tanstackStart } from '@tanstack/solid-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"
pages_build_output_dir = "./dist"
compatibility_flags = ["nodejs_compat"]
compatibility_date = "2024-11-13"

# wrangler.toml
name = "your-cloudflare-project-name"
pages_build_output_dir = "./dist"
compatibility_flags = ["nodejs_compat"]
compatibility_date = "2024-11-13"

Stellen Sie Ihre Anwendung mit dem Ein-Klick-Bereitstellungsprozess von Cloudflare Pages bereit, und Sie sind startklar!

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

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

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

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

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

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

npm run build

npm run build

Sie sind jetzt 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 Ihr solid-js in Ihrer Datei package.json auf dem neuesten Stand ist. Wenn nicht, führen Sie den folgenden Befehl aus, um die Pakete zu aktualisieren

npm install solid-js

npm install solid-js

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

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

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

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

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

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

bun run build

bun run build

Sie sind jetzt 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