diff --git a/docs/docs.json b/docs/docs.json index 0eca2a6fe7..38fd681f92 100644 --- a/docs/docs.json +++ b/docs/docs.json @@ -369,6 +369,7 @@ "/guides/ecosystem/qwik", "/guides/ecosystem/react", "/guides/ecosystem/remix", + "/guides/ecosystem/tanstack-start", "/guides/ecosystem/sentry", "/guides/ecosystem/solidstart", "/guides/ecosystem/ssr-react", diff --git a/docs/guides/ecosystem/tanstack-start.mdx b/docs/guides/ecosystem/tanstack-start.mdx new file mode 100644 index 0000000000..27d6c01255 --- /dev/null +++ b/docs/guides/ecosystem/tanstack-start.mdx @@ -0,0 +1,154 @@ +--- +title: Use TanStack Start with Bun +sidebarTitle: TanStack Start with Bun +mode: center +--- + +[TanStack Start](https://tanstack.com/start/latest) is a full-stack framework powered by TanStack Router. It supports full-document SSR, streaming, server functions, bundling and more, powered by TanStack Router and [Vite](https://vite.dev/). + +--- + + + + Use the interactive CLI to create a new TanStack Start app. + + ```sh terminal icon="terminal" + bun create @tanstack/start@latest my-tanstack-app + ``` + + + + Change to the project directory and run the dev server with Bun. + + ```sh terminal icon="terminal" + cd my-tanstack-app + bun --bun run dev + ``` + + This starts the Vite dev server with Bun. + + + + Modify the scripts field in your `package.json` by prefixing the Vite CLI commands with `bun --bun`. This ensures that Bun executes the Vite CLI for common tasks like `dev`, `build`, and `preview`. + + ```json package.json icon="file-json" + { + "scripts": { + "dev": "bun --bun vite dev", // [!code ++] + "build": "bun --bun vite build", // [!code ++] + "serve": "bun --bun vite preview" // [!code ++] + } + } + ``` + + + + +--- + +## Hosting + + + + Add [Nitro](https://nitro.build/) to your project. This tool allows you to deploy your TanStack Start app to different platforms. + + ```sh terminal icon="terminal" + bun add nitro + ``` + + + Update your vite.config.ts file}> + Update your `vite.config.ts` file to include the necessary plugins for TanStack Start with Bun. + + ```ts vite.config.ts icon="/icons/typescript.svg" + // other imports... + import { nitro } from "nitro/vite"; // [!code ++] + + const config = defineConfig({ + plugins: [ + tanstackStart(), + nitro({ preset: "bun" }), // [!code ++] + // other plugins... + ], + }); + + export default config; + ``` + + + The `bun` preset is optional, but it configures the build output specifically for Bun's runtime. + + + + + Make sure `build` and `start` scripts are present in your `package.json` file: + + ```json package.json icon="file-json" + { + "scripts": { + "build": "bun --bun vite build", // [!code ++] + // The .output files are created by Nitro when you run `bun run build`. + // Not necessary when deploying to Vercel. + "start": "bun run .output/server/index.mjs" // [!code ++] + } + } + ``` + + + + You do **not** need the custom `start` script when deploying to Vercel. + + + + + Check out one of our guides to deploy your app to a hosting provider. + + + When deploying to Vercel, you can either add the `"bunVersion": "1.x"` to your `vercel.json` file, or add it to the `nitro` config in your `vite.config.ts` file: + + + Do **not** use the `bun` Nitro preset when deploying to Vercel. + + + ```ts vite.config.ts icon="/icons/typescript.svg" + export default defineConfig({ + plugins: [ + tanstackStart(), + nitro({ + preset: "bun", // [!code --] + vercel: { // [!code ++] + functions: { // [!code ++] + runtime: "bun1.x", // [!code ++] + }, // [!code ++] + }, // [!code ++] + }), + ], + }); + ``` + + + + + Deploy on Vercel + + + Deploy on Render + + + Deploy on Railway + + + Deploy on DigitalOcean + + + Deploy on AWS Lambda + + + Deploy on Google Cloud Run + + + + + + +[→ See TanStack Start's official documentation](https://tanstack.com/start/latest/docs/framework/react/guide/hosting) for more information on hosting. diff --git a/docs/icons/ecosystem/aws.svg b/docs/icons/ecosystem/aws.svg new file mode 100644 index 0000000000..8b0caacf3b --- /dev/null +++ b/docs/icons/ecosystem/aws.svg @@ -0,0 +1,13 @@ + + + + + + + + + + diff --git a/docs/icons/ecosystem/digitalocean.svg b/docs/icons/ecosystem/digitalocean.svg new file mode 100644 index 0000000000..5e72d032c5 --- /dev/null +++ b/docs/icons/ecosystem/digitalocean.svg @@ -0,0 +1 @@ + diff --git a/docs/icons/ecosystem/gcp.svg b/docs/icons/ecosystem/gcp.svg new file mode 100644 index 0000000000..b0cc7b828c --- /dev/null +++ b/docs/icons/ecosystem/gcp.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/docs/icons/ecosystem/railway.svg b/docs/icons/ecosystem/railway.svg new file mode 100644 index 0000000000..016df185d7 --- /dev/null +++ b/docs/icons/ecosystem/railway.svg @@ -0,0 +1,17 @@ + + + + + \ No newline at end of file diff --git a/docs/icons/ecosystem/render.svg b/docs/icons/ecosystem/render.svg new file mode 100644 index 0000000000..e64f7459d0 --- /dev/null +++ b/docs/icons/ecosystem/render.svg @@ -0,0 +1,16 @@ + + + + diff --git a/docs/icons/ecosystem/vercel.svg b/docs/icons/ecosystem/vercel.svg new file mode 100644 index 0000000000..1906d5979b --- /dev/null +++ b/docs/icons/ecosystem/vercel.svg @@ -0,0 +1,16 @@ + + + + \ No newline at end of file