Skip to content

docs(start): update hosting docs to reflect vite migration #4575

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jul 6, 2025
Merged

docs(start): update hosting docs to reflect vite migration #4575

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 19 additions & 40 deletions docs/start/framework/react/hosting.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,36 +74,25 @@ export default defineConfig({

Deploy your application to Vercel using their one-click deployment process, and you're ready to go!

### Cloudflare Pages
### Cloudflare Workers

When deploying to Cloudflare Pages, you'll need to complete a few extra steps before your users can start using your app.
When deploying to Cloudflare Workers, you'll need to complete a few extra steps before your users can start using your app.

1. Installation
1. Update `vite.config.ts`

First you will need to install `unenv`

```sh
npm install unenv
```

2. Update `app.config.ts`

Set the `server.preset` value to `cloudflare-pages` and the `server.unenv` value to the `cloudflare` from `unenv` in your `app.config.ts` file.
Set the `target` value to `cloudflare-pages` in your `vite.config.ts` file.

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

export default defineConfig({
server: {
preset: 'cloudflare-pages',
unenv: cloudflare,
},
plugins: [tanstackStart({ target: 'cloudflare-module' })],
})
```

3. Add a `wrangler.toml` config file
2. Add a `wrangler.toml` config file

```toml
# wrangler.toml
Expand All @@ -117,21 +106,16 @@ Deploy your application to Cloudflare Pages using their one-click deployment pro

### Node.js

Set the `server.preset` value to `node-server` in your `app.config.ts` file.
Set the `target` value to `node-server` in your `vite.config.ts` file.

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

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

// Or you can use the --preset flag with the build command
// to specify the deployment target when building the application:
// npm run build --preset node-server
```

Then you can run the following command to build and start your application:
Expand All @@ -157,21 +141,16 @@ Make sure that your `react` and `react-dom` packages are set to version 19.0.0 o
npm install react@rc react-dom@rc
```

Set the `server.preset` value to `bun` in your `app.config.ts` file.
Set the `target` value to `bun` in your `vite.config.ts` file.

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

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

// Or you can use the --preset flag with the build command
// to specify the deployment target when building the application:
// npm run build --preset bun
```

Then you can run the following command to build and start your application:
Expand Down
91 changes: 28 additions & 63 deletions docs/start/framework/solid/hosting.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ Netlify is a leading hosting platform that provides a fast, secure, and reliable
> [!WARNING]
> The page is still a work in progress. We'll keep updating this page with guides on deployment to different hosting providers soon!

When a TanStack Start application is being deployed, the `server.preset` value in the `app.config.ts` file determines the deployment target. The deployment target can be set to one of the following values:
When a TanStack Start application is being deployed, the `target` value in the `vite.config.ts` file determines the deployment target. The deployment target can be set to one of the following values:

- [`netlify`](#netlify): Deploy to Netlify
- [`vercel`](#vercel): Deploy to Vercel
Expand All @@ -44,80 +44,55 @@ Once you've chosen a deployment target, you can follow the deployment guidelines

### Netlify

Set the `server.preset` value to `netlify` in your `app.config.ts` file.
Set the `target` value to `netlify` in your `vite.config.ts` file.

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

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

Or you can use the `--preset` flag with the `build` command to specify the deployment target when building the application:

```sh
npm run build --preset netlify
```

Deploy your application to Netlify using their one-click deployment process, and you're ready to go!

### Vercel

Deploying your TanStack Start application to Vercel is easy and straightforward. Just set the `server.preset` value to `vercel` in your `app.config.ts` file, and you're ready to deploy your application to Vercel.
Deploying your TanStack Start application to Vercel is easy and straightforward. Just set the `target` value to `vercel` in your `vite.config.ts` file, and you're ready to deploy your application to Vercel.

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

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

Or you can use the `--preset` flag with the `build` command to specify the deployment target when building the application:

```sh
npm run build --preset vercel
```

Deploy you application to Vercel using their one-click deployment process, and you're ready to go!

### Cloudflare Pages

When deploying to Cloudflare Pages, you'll need to complete a few extra steps before your users can start using your app.

1. Installation
1. Update `vite.config.ts`

First you will need to install `unenv`

```sh
npm install unenv
```

2. Update `app.config.ts`

Set the `server.preset` value to `cloudflare-pages` and the `server.unenv` value to the `cloudflare` from `unenv` in your `app.config.ts` file.
Set the `target` value to `cloudflare-pages` in your `vite.config.ts` file.

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

export default defineConfig({
server: {
preset: 'cloudflare-pages',
unenv: cloudflare,
},
plugins: [tanstackStart({ target: 'cloudflare-module' })],
})
```

3. Add a `wrangler.toml` config file
2. Add a `wrangler.toml` config file

```toml
# wrangler.toml
Expand All @@ -131,21 +106,16 @@ Deploy you application to Cloudflare Pages using their one-click deployment proc

### Node.js

Set the `server.preset` value to `node-server` in your `app.config.ts` file.
Set the `target` value to `node-server` in your `vite.config.ts` file.

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

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

// Or you can use the --preset flag with the build command
// to specify the deployment target when building the application:
// npm run build --preset node-server
```

Then you can run the following command to build and start your application:
Expand All @@ -168,21 +138,16 @@ Make sure that your `solid-js` in your `package.json` file. If not, run the foll
npm install solid-js
```

Set the `server.preset` value to `bun` in your `app.config.ts` file.
Set the `target` value to `bun` in your `vite.config.ts` file.

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

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

// Or you can use the --preset flag with the build command
// to specify the deployment target when building the application:
// npm run build --preset bun
```

Then you can run the following command to build and start your application:
Expand Down