From 10a5130f82a146e792966349831f98ef55c0f8c2 Mon Sep 17 00:00:00 2001 From: Ender Bonnet Date: Tue, 2 Dec 2025 16:02:55 -0300 Subject: [PATCH 01/65] add start project command --- examples/react/start-basic/README.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/examples/react/start-basic/README.md b/examples/react/start-basic/README.md index 90cba4aac1e..22122df0c09 100644 --- a/examples/react/start-basic/README.md +++ b/examples/react/start-basic/README.md @@ -8,6 +8,14 @@ It's deployed automagically with Netlify! - [Netlify](https://netlify.com/) +## Start a new project + +To start a new project, run: + +```sh +npx gitpick TanStack/router/tree/main/examples/react/start-basic start-basic +``` + ## Development From your terminal: From 7f7370bd52f0c16ab6ef285bb7be21e9a568873f Mon Sep 17 00:00:00 2001 From: Ender Bonnet Date: Tue, 2 Dec 2025 18:36:54 -0300 Subject: [PATCH 02/65] add readme to example authenticated-routes --- examples/react/authenticated-routes/README.md | 48 +++++++++++++++++-- 1 file changed, 44 insertions(+), 4 deletions(-) diff --git a/examples/react/authenticated-routes/README.md b/examples/react/authenticated-routes/README.md index 115199d292c..7fb13ac47ca 100644 --- a/examples/react/authenticated-routes/README.md +++ b/examples/react/authenticated-routes/README.md @@ -1,6 +1,46 @@ -# Example +# TanStack Router - Authenticated Routes Example -To run this example: +An example demonstrating authentication and protected routes. -- `npm install` or `yarn` -- `npm start` or `yarn start` +- [TanStack Router Docs](https://tanstack.com/router) + +## Start a new project based on this example + +To start a new project based on this example, run: + +```sh +npx gitpick TanStack/router/tree/main/examples/react/authenticated-routes authenticated-routes +``` + +## Getting Started + +Install dependencies: + +```sh +pnpm install +``` + +Start the development server: + +```sh +pnpm dev +``` + +## Build + +Build for production: + +```sh +pnpm build +``` + +## About This Example + +This example demonstrates: + +- Authentication flow +- Protected routes +- Route guards +- Login/logout functionality +- Redirect after authentication +- Public vs private routes From 24608dbbcfe972d8f0a46c23a273a364b3e3b8ba Mon Sep 17 00:00:00 2001 From: Ender Bonnet Date: Tue, 2 Dec 2025 18:37:09 -0300 Subject: [PATCH 03/65] add readme to example start-bare --- examples/react/start-bare/README.md | 32 +++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 examples/react/start-bare/README.md diff --git a/examples/react/start-bare/README.md b/examples/react/start-bare/README.md new file mode 100644 index 00000000000..6478d7160b6 --- /dev/null +++ b/examples/react/start-bare/README.md @@ -0,0 +1,32 @@ +# TanStack Start - Bare Example + +A minimal TanStack Start example demonstrating the bare essentials. + +- [TanStack Router Docs](https://tanstack.com/router) + +## Start a new project + +To start a new project based on this example, run: + +```sh +npx gitpick TanStack/router/tree/main/examples/react/start-bare start-bare +``` + +## Development + +From your terminal: + +```sh +pnpm install +pnpm dev +``` + +This starts your app in development mode, rebuilding assets on file changes. + +## Build + +To build the app for production: + +```sh +pnpm build +``` From 37c99eaa02314e6bc7b64b16f9359a64faf43691 Mon Sep 17 00:00:00 2001 From: Ender Bonnet Date: Tue, 2 Dec 2025 18:37:23 -0300 Subject: [PATCH 04/65] add readme to example start-basic-authjs --- examples/react/start-basic-authjs/README.md | 51 +++++++++++++++++++++ 1 file changed, 51 insertions(+) create mode 100644 examples/react/start-basic-authjs/README.md diff --git a/examples/react/start-basic-authjs/README.md b/examples/react/start-basic-authjs/README.md new file mode 100644 index 00000000000..29d7a7bfe2e --- /dev/null +++ b/examples/react/start-basic-authjs/README.md @@ -0,0 +1,51 @@ +# TanStack Start - Auth.js Example + +A TanStack Start example demonstrating authentication with Auth.js (NextAuth.js). + +- [TanStack Router Docs](https://tanstack.com/router) +- [Auth.js Documentation](https://authjs.dev/) + +## Start a new project + +To start a new project based on this example, run: + +```sh +npx gitpick TanStack/router/tree/main/examples/react/start-basic-authjs start-basic-authjs +``` + +## Setup + +This example requires environment variables for Auth.js configuration. Copy the `.env.example` file to `.env` and fill in your authentication provider credentials: + +```sh +cp .env.example .env +``` + +Edit `.env` and add your authentication provider credentials. + +## Development + +From your terminal: + +```sh +pnpm install +pnpm dev +``` + +This starts your app in development mode, rebuilding assets on file changes. + +## Build + +To build the app for production: + +```sh +pnpm build +``` + +## Authentication Configuration + +This example demonstrates how to integrate Auth.js with TanStack Start. Check the source code for examples of: + +- Configuring authentication providers +- Protecting routes with authentication +- Accessing session data in server functions From 0cbc3782d4a9fc0be4232ac5f3609d1dc73b9eb2 Mon Sep 17 00:00:00 2001 From: Ender Bonnet Date: Tue, 2 Dec 2025 18:37:39 -0300 Subject: [PATCH 05/65] add readme to example start-large --- examples/react/start-large/README.md | 36 ++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) create mode 100644 examples/react/start-large/README.md diff --git a/examples/react/start-large/README.md b/examples/react/start-large/README.md new file mode 100644 index 00000000000..d5f4966c21c --- /dev/null +++ b/examples/react/start-large/README.md @@ -0,0 +1,36 @@ +# TanStack Start - Large Example + +A large-scale TanStack Start example demonstrating performance with many routes. + +- [TanStack Router Docs](https://tanstack.com/router) + +## Start a new project + +To start a new project based on this example, run: + +```sh +npx gitpick TanStack/router/tree/main/examples/react/start-large start-large +``` + +## Development + +From your terminal: + +```sh +pnpm install +pnpm dev +``` + +This starts your app in development mode, rebuilding assets on file changes. + +## Build + +To build the app for production: + +```sh +pnpm build +``` + +## About This Example + +This example contains a large number of routes to demonstrate TanStack Router's performance and scalability with large applications. From 0ec57ebdc4be789edf6ea7720c70159bc94ca3ce Mon Sep 17 00:00:00 2001 From: Ender Bonnet Date: Tue, 2 Dec 2025 18:37:54 -0300 Subject: [PATCH 06/65] add readme to example start-material-ui --- examples/react/start-material-ui/README.md | 41 ++++++++++++++++++++++ 1 file changed, 41 insertions(+) create mode 100644 examples/react/start-material-ui/README.md diff --git a/examples/react/start-material-ui/README.md b/examples/react/start-material-ui/README.md new file mode 100644 index 00000000000..97e706fdc22 --- /dev/null +++ b/examples/react/start-material-ui/README.md @@ -0,0 +1,41 @@ +# TanStack Start - Material UI Example + +A TanStack Start example demonstrating integration with Material UI (MUI). + +- [TanStack Router Docs](https://tanstack.com/router) +- [Material UI Documentation](https://mui.com/) + +## Start a new project + +To start a new project based on this example, run: + +```sh +npx gitpick TanStack/router/tree/main/examples/react/start-material-ui start-material-ui +``` + +## Development + +From your terminal: + +```sh +pnpm install +pnpm dev +``` + +This starts your app in development mode, rebuilding assets on file changes. + +## Build + +To build the app for production: + +```sh +pnpm build +``` + +## Material UI Integration + +This example demonstrates how to integrate Material UI components with TanStack Start, including: + +- Theme configuration +- Server-side rendering with MUI +- Using MUI components in your routes From 3a6237710b291511cf30c6a188f7d1a09195898f Mon Sep 17 00:00:00 2001 From: Ender Bonnet Date: Tue, 2 Dec 2025 18:38:08 -0300 Subject: [PATCH 07/65] add readme to example start-streaming-data-from-server-functions --- .../README.md | 40 +++++++++++++++++++ 1 file changed, 40 insertions(+) create mode 100644 examples/react/start-streaming-data-from-server-functions/README.md diff --git a/examples/react/start-streaming-data-from-server-functions/README.md b/examples/react/start-streaming-data-from-server-functions/README.md new file mode 100644 index 00000000000..09cc04ca83a --- /dev/null +++ b/examples/react/start-streaming-data-from-server-functions/README.md @@ -0,0 +1,40 @@ +# TanStack Start - Streaming Data Example + +A TanStack Start example demonstrating streaming data from server functions. + +- [TanStack Router Docs](https://tanstack.com/router) + +## Start a new project + +To start a new project based on this example, run: + +```sh +npx gitpick TanStack/router/tree/main/examples/react/start-streaming-data-from-server-functions start-streaming-data-from-server-functions +``` + +## Development + +From your terminal: + +```sh +pnpm install +pnpm dev +``` + +This starts your app in development mode, rebuilding assets on file changes. + +## Build + +To build the app for production: + +```sh +pnpm build +``` + +## Streaming Data + +This example demonstrates how to stream data from server functions to the client, enabling: + +- Progressive data loading +- Real-time updates +- Improved perceived performance From 8673bc0fd197917bbd9369701ac8cd8fbc9144b2 Mon Sep 17 00:00:00 2001 From: Ender Bonnet Date: Tue, 2 Dec 2025 18:38:26 -0300 Subject: [PATCH 08/65] add readme to example start-supabase-basic --- examples/react/start-supabase-basic/README.md | 57 +++++++++++++++++++ 1 file changed, 57 insertions(+) create mode 100644 examples/react/start-supabase-basic/README.md diff --git a/examples/react/start-supabase-basic/README.md b/examples/react/start-supabase-basic/README.md new file mode 100644 index 00000000000..ba1e9d7772a --- /dev/null +++ b/examples/react/start-supabase-basic/README.md @@ -0,0 +1,57 @@ +# TanStack Start - Supabase Example + +A TanStack Start example demonstrating integration with Supabase for authentication and database. + +- [TanStack Router Docs](https://tanstack.com/router) +- [Supabase Documentation](https://supabase.com/docs) + +## Start a new project + +To start a new project based on this example, run: + +```sh +npx gitpick TanStack/router/tree/main/examples/react/start-supabase-basic start-supabase-basic +``` + +## Setup + +This example requires Supabase configuration. The `.env` file contains the necessary environment variables: + +```env +VITE_SUPABASE_URL=your-project-url +VITE_SUPABASE_ANON_KEY=your-anon-key +``` + +You'll need to: + +1. Create a Supabase project at [supabase.com](https://supabase.com) +2. Get your project URL and anon key from the project settings +3. Update the `.env` file with your credentials + +## Development + +From your terminal: + +```sh +pnpm install +pnpm dev +``` + +This starts your app in development mode, rebuilding assets on file changes. + +## Build + +To build the app for production: + +```sh +pnpm build +``` + +## Supabase Integration + +This example demonstrates: + +- Authentication with Supabase Auth +- Database queries with Supabase client +- Real-time subscriptions +- Server-side data fetching From 858d14eb493ca74cbc865ad241e89a72cfcc88b2 Mon Sep 17 00:00:00 2001 From: Ender Bonnet Date: Tue, 2 Dec 2025 18:43:24 -0300 Subject: [PATCH 09/65] add readme to example basic --- examples/react/basic/README.md | 47 +++++++++++++++++++++++++++++++--- 1 file changed, 43 insertions(+), 4 deletions(-) diff --git a/examples/react/basic/README.md b/examples/react/basic/README.md index 115199d292c..a58d907bf87 100644 --- a/examples/react/basic/README.md +++ b/examples/react/basic/README.md @@ -1,6 +1,45 @@ -# Example +# TanStack Router - Basic Example -To run this example: +A basic example demonstrating the fundamentals of TanStack Router. -- `npm install` or `yarn` -- `npm start` or `yarn start` +- [TanStack Router Docs](https://tanstack.com/router) + +## Start a new project based on this example + +To start a new project based on this example, run: + +```sh +npx gitpick TanStack/router/tree/main/examples/react/basic basic +``` + +## Getting Started + +Install dependencies: + +```sh +pnpm install +``` + +Start the development server: + +```sh +pnpm dev +``` + +## Build + +Build for production: + +```sh +pnpm build +``` + +## About This Example + +This example demonstrates: + +- Basic routing setup +- Route configuration +- Navigation +- Route parameters +- TanStack Router DevTools From 8eb65c01605708e265f0465946fbb82cb2aa3abc Mon Sep 17 00:00:00 2001 From: Ender Bonnet Date: Tue, 2 Dec 2025 18:43:41 -0300 Subject: [PATCH 10/65] add readme to example basic-default-search-params --- .../basic-default-search-params/README.md | 46 +++++++++++++++++-- 1 file changed, 42 insertions(+), 4 deletions(-) diff --git a/examples/react/basic-default-search-params/README.md b/examples/react/basic-default-search-params/README.md index 115199d292c..1082b6a53da 100644 --- a/examples/react/basic-default-search-params/README.md +++ b/examples/react/basic-default-search-params/README.md @@ -1,6 +1,44 @@ -# Example +# TanStack Router - Default Search Params Example -To run this example: +An example demonstrating default search parameters. -- `npm install` or `yarn` -- `npm start` or `yarn start` +- [TanStack Router Docs](https://tanstack.com/router) + +## Start a new project based on this example + +To start a new project based on this example, run: + +```sh +npx gitpick TanStack/router/tree/main/examples/react/basic-default-search-params basic-default-search-params +``` + +## Getting Started + +Install dependencies: + +```sh +pnpm install +``` + +Start the development server: + +```sh +pnpm dev +``` + +## Build + +Build for production: + +```sh +pnpm build +``` + +## About This Example + +This example demonstrates: + +- Default search parameter values +- Type-safe search params +- Search param validation +- URL state management From f1d6797cb874d75bbf1016c47a6379eac6fbfbef Mon Sep 17 00:00:00 2001 From: Ender Bonnet Date: Tue, 2 Dec 2025 18:43:58 -0300 Subject: [PATCH 11/65] add readme to example basic-devtools-panel --- examples/react/basic-devtools-panel/README.md | 46 +++++++++++++++++-- 1 file changed, 42 insertions(+), 4 deletions(-) diff --git a/examples/react/basic-devtools-panel/README.md b/examples/react/basic-devtools-panel/README.md index 115199d292c..3057aa4a279 100644 --- a/examples/react/basic-devtools-panel/README.md +++ b/examples/react/basic-devtools-panel/README.md @@ -1,6 +1,44 @@ -# Example +# TanStack Router - DevTools Panel Example -To run this example: +An example demonstrating the TanStack Router DevTools panel. -- `npm install` or `yarn` -- `npm start` or `yarn start` +- [TanStack Router Docs](https://tanstack.com/router) + +## Start a new project based on this example + +To start a new project based on this example, run: + +```sh +npx gitpick TanStack/router/tree/main/examples/react/basic-devtools-panel basic-devtools-panel +``` + +## Getting Started + +Install dependencies: + +```sh +pnpm install +``` + +Start the development server: + +```sh +pnpm dev +``` + +## Build + +Build for production: + +```sh +pnpm build +``` + +## About This Example + +This example demonstrates: + +- TanStack Router DevTools integration +- DevTools panel configuration +- Route debugging +- State inspection From aa66a0cb2bf7a0bf81aa9599225fc894bfbbdb33 Mon Sep 17 00:00:00 2001 From: Ender Bonnet Date: Tue, 2 Dec 2025 18:44:10 -0300 Subject: [PATCH 12/65] add readme to example basic-file-based --- examples/react/basic-file-based/README.md | 46 +++++++++++++++++++++-- 1 file changed, 42 insertions(+), 4 deletions(-) diff --git a/examples/react/basic-file-based/README.md b/examples/react/basic-file-based/README.md index 115199d292c..a52e31ecbcd 100644 --- a/examples/react/basic-file-based/README.md +++ b/examples/react/basic-file-based/README.md @@ -1,6 +1,44 @@ -# Example +# TanStack Router - File-Based Routing Example -To run this example: +An example demonstrating file-based routing with TanStack Router. -- `npm install` or `yarn` -- `npm start` or `yarn start` +- [TanStack Router Docs](https://tanstack.com/router) + +## Start a new project based on this example + +To start a new project based on this example, run: + +```sh +npx gitpick TanStack/router/tree/main/examples/react/basic-file-based basic-file-based +``` + +## Getting Started + +Install dependencies: + +```sh +pnpm install +``` + +Start the development server: + +```sh +pnpm dev +``` + +## Build + +Build for production: + +```sh +pnpm build +``` + +## About This Example + +This example demonstrates: + +- File-based route generation +- Automatic route tree creation +- Route file conventions +- Type-safe routing with file-based routes From 0b7d36ef494f1a6ea49262241ae3c010bb89b8ff Mon Sep 17 00:00:00 2001 From: Ender Bonnet Date: Tue, 2 Dec 2025 18:44:30 -0300 Subject: [PATCH 13/65] add readme to example basic-non-nested-devtools --- .../react/basic-non-nested-devtools/README.md | 46 +++++++++++++++++-- 1 file changed, 42 insertions(+), 4 deletions(-) diff --git a/examples/react/basic-non-nested-devtools/README.md b/examples/react/basic-non-nested-devtools/README.md index 115199d292c..3e4fb639c6d 100644 --- a/examples/react/basic-non-nested-devtools/README.md +++ b/examples/react/basic-non-nested-devtools/README.md @@ -1,6 +1,44 @@ -# Example +# TanStack Router - Non-Nested DevTools Example -To run this example: +An example demonstrating TanStack Router DevTools in a non-nested configuration. -- `npm install` or `yarn` -- `npm start` or `yarn start` +- [TanStack Router Docs](https://tanstack.com/router) + +## Start a new project based on this example + +To start a new project based on this example, run: + +```sh +npx gitpick TanStack/router/tree/main/examples/react/basic-non-nested-devtools basic-non-nested-devtools +``` + +## Getting Started + +Install dependencies: + +```sh +pnpm install +``` + +Start the development server: + +```sh +pnpm dev +``` + +## Build + +Build for production: + +```sh +pnpm build +``` + +## About This Example + +This example demonstrates: + +- TanStack Router DevTools +- Non-nested DevTools configuration +- Alternative DevTools placement +- DevTools customization From 42aaf1cec3ca7d148e9f530abbb5bfb3b3a46030 Mon Sep 17 00:00:00 2001 From: Ender Bonnet Date: Tue, 2 Dec 2025 18:44:43 -0300 Subject: [PATCH 14/65] add readme to example basic-react-query --- examples/react/basic-react-query/README.md | 48 ++++++++++++++++++++-- 1 file changed, 44 insertions(+), 4 deletions(-) diff --git a/examples/react/basic-react-query/README.md b/examples/react/basic-react-query/README.md index 115199d292c..25f28f6e208 100644 --- a/examples/react/basic-react-query/README.md +++ b/examples/react/basic-react-query/README.md @@ -1,6 +1,46 @@ -# Example +# TanStack Router - React Query Example -To run this example: +An example demonstrating integration between TanStack Router and TanStack Query. -- `npm install` or `yarn` -- `npm start` or `yarn start` +- [TanStack Router Docs](https://tanstack.com/router) +- [TanStack Query Docs](https://tanstack.com/query) + +## Start a new project based on this example + +To start a new project based on this example, run: + +```sh +npx gitpick TanStack/router/tree/main/examples/react/basic-react-query basic-react-query +``` + +## Getting Started + +Install dependencies: + +```sh +pnpm install +``` + +Start the development server: + +```sh +pnpm dev +``` + +## Build + +Build for production: + +```sh +pnpm build +``` + +## About This Example + +This example demonstrates: + +- Integrating TanStack Query with TanStack Router +- Data fetching with queries +- Route-level data loading +- Cache management +- Prefetching data on route navigation From 8d192df664b6cdcb476d28dc670aaf59318f1442 Mon Sep 17 00:00:00 2001 From: Ender Bonnet Date: Tue, 2 Dec 2025 18:45:08 -0300 Subject: [PATCH 15/65] add readme to example basic-react-query-file-based --- .../basic-react-query-file-based/README.md | 48 +++++++++++++++++-- 1 file changed, 44 insertions(+), 4 deletions(-) diff --git a/examples/react/basic-react-query-file-based/README.md b/examples/react/basic-react-query-file-based/README.md index 115199d292c..7bfb44418bb 100644 --- a/examples/react/basic-react-query-file-based/README.md +++ b/examples/react/basic-react-query-file-based/README.md @@ -1,6 +1,46 @@ -# Example +# TanStack Router - React Query File-Based Example -To run this example: +An example combining file-based routing with TanStack Query integration. -- `npm install` or `yarn` -- `npm start` or `yarn start` +- [TanStack Router Docs](https://tanstack.com/router) +- [TanStack Query Docs](https://tanstack.com/query) + +## Start a new project based on this example + +To start a new project based on this example, run: + +```sh +npx gitpick TanStack/router/tree/main/examples/react/basic-react-query-file-based basic-react-query-file-based +``` + +## Getting Started + +Install dependencies: + +```sh +pnpm install +``` + +Start the development server: + +```sh +pnpm dev +``` + +## Build + +Build for production: + +```sh +pnpm build +``` + +## About This Example + +This example demonstrates: + +- File-based routing with TanStack Router +- TanStack Query integration +- Type-safe data fetching +- Automatic route generation +- Query-based data loading per route From 9369e593833481a534248496d5516e55696525ca Mon Sep 17 00:00:00 2001 From: Ender Bonnet Date: Tue, 2 Dec 2025 18:45:21 -0300 Subject: [PATCH 16/65] add readme to example basic-ssr-file-based --- examples/react/basic-ssr-file-based/README.md | 47 +++++++++++++++++-- 1 file changed, 43 insertions(+), 4 deletions(-) diff --git a/examples/react/basic-ssr-file-based/README.md b/examples/react/basic-ssr-file-based/README.md index 115199d292c..63600fc3df9 100644 --- a/examples/react/basic-ssr-file-based/README.md +++ b/examples/react/basic-ssr-file-based/README.md @@ -1,6 +1,45 @@ -# Example +# TanStack Router - SSR File-Based Example -To run this example: +An example demonstrating server-side rendering (SSR) with file-based routing. -- `npm install` or `yarn` -- `npm start` or `yarn start` +- [TanStack Router Docs](https://tanstack.com/router) + +## Start a new project based on this example + +To start a new project based on this example, run: + +```sh +npx gitpick TanStack/router/tree/main/examples/react/basic-ssr-file-based basic-ssr-file-based +``` + +## Getting Started + +Install dependencies: + +```sh +pnpm install +``` + +Start the development server: + +```sh +pnpm dev +``` + +## Build + +Build for production: + +```sh +pnpm build +``` + +## About This Example + +This example demonstrates: + +- Server-side rendering with TanStack Router +- File-based routing +- SSR data loading +- Hydration +- SEO-friendly routing From c3299d49cd62f057a2e4096fab85e77aa742c89d Mon Sep 17 00:00:00 2001 From: Ender Bonnet Date: Tue, 2 Dec 2025 18:45:36 -0300 Subject: [PATCH 17/65] add readme to example basic-ssr-streaming-file-based --- .../basic-ssr-streaming-file-based/README.md | 47 +++++++++++++++++-- 1 file changed, 43 insertions(+), 4 deletions(-) diff --git a/examples/react/basic-ssr-streaming-file-based/README.md b/examples/react/basic-ssr-streaming-file-based/README.md index 115199d292c..2d14162be2a 100644 --- a/examples/react/basic-ssr-streaming-file-based/README.md +++ b/examples/react/basic-ssr-streaming-file-based/README.md @@ -1,6 +1,45 @@ -# Example +# TanStack Router - SSR Streaming File-Based Example -To run this example: +An example demonstrating server-side rendering with streaming and file-based routing. -- `npm install` or `yarn` -- `npm start` or `yarn start` +- [TanStack Router Docs](https://tanstack.com/router) + +## Start a new project based on this example + +To start a new project based on this example, run: + +```sh +npx gitpick TanStack/router/tree/main/examples/react/basic-ssr-streaming-file-based basic-ssr-streaming-file-based +``` + +## Getting Started + +Install dependencies: + +```sh +pnpm install +``` + +Start the development server: + +```sh +pnpm dev +``` + +## Build + +Build for production: + +```sh +pnpm build +``` + +## About This Example + +This example demonstrates: + +- Server-side rendering with streaming +- File-based routing +- Progressive rendering +- Suspense boundaries +- Optimized time-to-first-byte From d2d680ef447d53aef9737c70729eb77389874e07 Mon Sep 17 00:00:00 2001 From: Ender Bonnet Date: Tue, 2 Dec 2025 18:45:51 -0300 Subject: [PATCH 18/65] add readme to example basic-virtual-file-based --- .../react/basic-virtual-file-based/README.md | 46 +++++++++++++++++-- 1 file changed, 42 insertions(+), 4 deletions(-) diff --git a/examples/react/basic-virtual-file-based/README.md b/examples/react/basic-virtual-file-based/README.md index 115199d292c..1f3dc093baf 100644 --- a/examples/react/basic-virtual-file-based/README.md +++ b/examples/react/basic-virtual-file-based/README.md @@ -1,6 +1,44 @@ -# Example +# TanStack Router - Virtual File-Based Routing Example -To run this example: +An example demonstrating virtual file-based routing. -- `npm install` or `yarn` -- `npm start` or `yarn start` +- [TanStack Router Docs](https://tanstack.com/router) + +## Start a new project based on this example + +To start a new project based on this example, run: + +```sh +npx gitpick TanStack/router/tree/main/examples/react/basic-virtual-file-based basic-virtual-file-based +``` + +## Getting Started + +Install dependencies: + +```sh +pnpm install +``` + +Start the development server: + +```sh +pnpm dev +``` + +## Build + +Build for production: + +```sh +pnpm build +``` + +## About This Example + +This example demonstrates: + +- Virtual file-based routing +- Dynamic route generation +- Programmatic route creation +- Type-safe virtual routes From 687637346c6b8560c64bfed45c228e59c95681e5 Mon Sep 17 00:00:00 2001 From: Ender Bonnet Date: Tue, 2 Dec 2025 18:46:13 -0300 Subject: [PATCH 19/65] add readme to example basic-virtual-inside-file-based --- .../basic-virtual-inside-file-based/README.md | 46 +++++++++++++++++-- 1 file changed, 42 insertions(+), 4 deletions(-) diff --git a/examples/react/basic-virtual-inside-file-based/README.md b/examples/react/basic-virtual-inside-file-based/README.md index 115199d292c..f97d41c9b85 100644 --- a/examples/react/basic-virtual-inside-file-based/README.md +++ b/examples/react/basic-virtual-inside-file-based/README.md @@ -1,6 +1,44 @@ -# Example +# TanStack Router - Virtual Inside File-Based Routing Example -To run this example: +An example demonstrating virtual routes within a file-based routing structure. -- `npm install` or `yarn` -- `npm start` or `yarn start` +- [TanStack Router Docs](https://tanstack.com/router) + +## Start a new project based on this example + +To start a new project based on this example, run: + +```sh +npx gitpick TanStack/router/tree/main/examples/react/basic-virtual-inside-file-based basic-virtual-inside-file-based +``` + +## Getting Started + +Install dependencies: + +```sh +pnpm install +``` + +Start the development server: + +```sh +pnpm dev +``` + +## Build + +Build for production: + +```sh +pnpm build +``` + +## About This Example + +This example demonstrates: + +- Combining virtual and file-based routing +- Hybrid routing approach +- Dynamic route generation within file-based structure +- Flexible route configuration From bf4e28228fe4a71724238e339c119034782a491e Mon Sep 17 00:00:00 2001 From: Ender Bonnet Date: Tue, 2 Dec 2025 18:46:23 -0300 Subject: [PATCH 20/65] add readme to example deferred-data --- examples/react/deferred-data/README.md | 47 +++++++++++++++++++++++--- 1 file changed, 43 insertions(+), 4 deletions(-) diff --git a/examples/react/deferred-data/README.md b/examples/react/deferred-data/README.md index 115199d292c..591f45790ed 100644 --- a/examples/react/deferred-data/README.md +++ b/examples/react/deferred-data/README.md @@ -1,6 +1,45 @@ -# Example +# TanStack Router - Deferred Data Example -To run this example: +An example demonstrating deferred data loading. -- `npm install` or `yarn` -- `npm start` or `yarn start` +- [TanStack Router Docs](https://tanstack.com/router) + +## Start a new project based on this example + +To start a new project based on this example, run: + +```sh +npx gitpick TanStack/router/tree/main/examples/react/deferred-data deferred-data +``` + +## Getting Started + +Install dependencies: + +```sh +pnpm install +``` + +Start the development server: + +```sh +pnpm dev +``` + +## Build + +Build for production: + +```sh +pnpm build +``` + +## About This Example + +This example demonstrates: + +- Deferred data loading +- Progressive enhancement +- Streaming data +- Suspense boundaries +- Optimized loading states From 6fe4fd67a61c0552a6394d971ec09eb9ef8af300 Mon Sep 17 00:00:00 2001 From: Ender Bonnet Date: Tue, 2 Dec 2025 18:46:44 -0300 Subject: [PATCH 21/65] add readme to example kitchen-sink --- examples/react/kitchen-sink/README.md | 49 ++++++++++++++++++++++++--- 1 file changed, 45 insertions(+), 4 deletions(-) diff --git a/examples/react/kitchen-sink/README.md b/examples/react/kitchen-sink/README.md index 115199d292c..59e96903b91 100644 --- a/examples/react/kitchen-sink/README.md +++ b/examples/react/kitchen-sink/README.md @@ -1,6 +1,47 @@ -# Example +# TanStack Router - Kitchen Sink Example -To run this example: +A comprehensive example demonstrating many TanStack Router features. -- `npm install` or `yarn` -- `npm start` or `yarn start` +- [TanStack Router Docs](https://tanstack.com/router) + +## Start a new project based on this example + +To start a new project based on this example, run: + +```sh +npx gitpick TanStack/router/tree/main/examples/react/kitchen-sink kitchen-sink +``` + +## Getting Started + +Install dependencies: + +```sh +pnpm install +``` + +Start the development server: + +```sh +pnpm dev +``` + +## Build + +Build for production: + +```sh +pnpm build +``` + +## About This Example + +This "kitchen sink" example demonstrates: + +- Advanced routing patterns +- Nested routes +- Route parameters and search params +- Data loading +- Error handling +- Route guards +- And many more TanStack Router features From f0e3d280454eb5218844dabe6dcfd7bc49e1864c Mon Sep 17 00:00:00 2001 From: Ender Bonnet Date: Tue, 2 Dec 2025 18:48:48 -0300 Subject: [PATCH 22/65] add readme to example kitchen-sink-file-based --- .../react/kitchen-sink-file-based/README.md | 50 +++++++++++++++++-- 1 file changed, 46 insertions(+), 4 deletions(-) diff --git a/examples/react/kitchen-sink-file-based/README.md b/examples/react/kitchen-sink-file-based/README.md index 115199d292c..6bc9af04556 100644 --- a/examples/react/kitchen-sink-file-based/README.md +++ b/examples/react/kitchen-sink-file-based/README.md @@ -1,6 +1,48 @@ -# Example +# TanStack Router - Kitchen Sink File-Based Example -To run this example: +A comprehensive file-based routing example demonstrating many TanStack Router features. -- `npm install` or `yarn` -- `npm start` or `yarn start` +- [TanStack Router Docs](https://tanstack.com/router) + +## Start a new project based on this example + +To start a new project based on this example, run: + +```sh +npx gitpick TanStack/router/tree/main/examples/react/kitchen-sink-file-based kitchen-sink-file-based +``` + +## Getting Started + +Install dependencies: + +```sh +pnpm install +``` + +Start the development server: + +```sh +pnpm dev +``` + +## Build + +Build for production: + +```sh +pnpm build +``` + +## About This Example + +This "kitchen sink" example with file-based routing demonstrates: + +- File-based route generation +- Advanced routing patterns +- Nested routes +- Route parameters and search params +- Data loading +- Error handling +- Route guards +- Type-safe file-based routes From 61c24ff95cbc1048c8631c18d0d3018f8e37581b Mon Sep 17 00:00:00 2001 From: Ender Bonnet Date: Tue, 2 Dec 2025 18:49:57 -0300 Subject: [PATCH 23/65] add readme to example kitchen-sink-react-query --- .../react/kitchen-sink-react-query/README.md | 50 +++++++++++++++++-- 1 file changed, 46 insertions(+), 4 deletions(-) diff --git a/examples/react/kitchen-sink-react-query/README.md b/examples/react/kitchen-sink-react-query/README.md index 115199d292c..37343cffc2e 100644 --- a/examples/react/kitchen-sink-react-query/README.md +++ b/examples/react/kitchen-sink-react-query/README.md @@ -1,6 +1,48 @@ -# Example +# TanStack Router - Kitchen Sink React Query Example -To run this example: +A comprehensive example combining TanStack Router with TanStack Query. -- `npm install` or `yarn` -- `npm start` or `yarn start` +- [TanStack Router Docs](https://tanstack.com/router) +- [TanStack Query Docs](https://tanstack.com/query) + +## Start a new project based on this example + +To start a new project based on this example, run: + +```sh +npx gitpick TanStack/router/tree/main/examples/react/kitchen-sink-react-query kitchen-sink-react-query +``` + +## Getting Started + +Install dependencies: + +```sh +pnpm install +``` + +Start the development server: + +```sh +pnpm dev +``` + +## Build + +Build for production: + +```sh +pnpm build +``` + +## About This Example + +This "kitchen sink" example demonstrates: + +- Advanced routing patterns with TanStack Router +- TanStack Query integration +- Complex data fetching scenarios +- Cache management +- Optimistic updates +- Error handling +- Loading states From 5419e348ca40b5cc31fd5edb9710ee37ca050dda Mon Sep 17 00:00:00 2001 From: Ender Bonnet Date: Tue, 2 Dec 2025 18:50:08 -0300 Subject: [PATCH 24/65] add readme to example kitchen-sink-react-query-file-based --- .../README.md | 50 +++++++++++++++++-- 1 file changed, 46 insertions(+), 4 deletions(-) diff --git a/examples/react/kitchen-sink-react-query-file-based/README.md b/examples/react/kitchen-sink-react-query-file-based/README.md index 115199d292c..a466640b3a2 100644 --- a/examples/react/kitchen-sink-react-query-file-based/README.md +++ b/examples/react/kitchen-sink-react-query-file-based/README.md @@ -1,6 +1,48 @@ -# Example +# TanStack Router - Kitchen Sink React Query File-Based Example -To run this example: +A comprehensive file-based routing example with TanStack Query integration. -- `npm install` or `yarn` -- `npm start` or `yarn start` +- [TanStack Router Docs](https://tanstack.com/router) +- [TanStack Query Docs](https://tanstack.com/query) + +## Start a new project based on this example + +To start a new project based on this example, run: + +```sh +npx gitpick TanStack/router/tree/main/examples/react/kitchen-sink-react-query-file-based kitchen-sink-react-query-file-based +``` + +## Getting Started + +Install dependencies: + +```sh +pnpm install +``` + +Start the development server: + +```sh +pnpm dev +``` + +## Build + +Build for production: + +```sh +pnpm build +``` + +## About This Example + +This "kitchen sink" example demonstrates: + +- File-based routing with TanStack Router +- TanStack Query integration +- Advanced routing patterns +- Type-safe data fetching +- Complex data loading scenarios +- Cache management +- Automatic route generation From ff585474f21f98d6d1585ca39c5ca41994b850ba Mon Sep 17 00:00:00 2001 From: Ender Bonnet Date: Tue, 2 Dec 2025 18:50:20 -0300 Subject: [PATCH 25/65] add readme to example large-file-based --- examples/react/large-file-based/README.md | 49 +++++++++++++++++++---- 1 file changed, 42 insertions(+), 7 deletions(-) diff --git a/examples/react/large-file-based/README.md b/examples/react/large-file-based/README.md index 74a499c5cef..8a212ccf5cb 100644 --- a/examples/react/large-file-based/README.md +++ b/examples/react/large-file-based/README.md @@ -1,10 +1,45 @@ -# Example +# TanStack Router - Large File-Based Example -This example generates a large amount file based routes to diagnose typescript performance issues +A large-scale file-based routing example demonstrating performance with many routes. -To run this example: +- [TanStack Router Docs](https://tanstack.com/router) -- `pnpm install` -- `pnpm gen` to generate routes -- `pnpm build` to update route tree -- `pnpm test:types` to type check and run diagnostics +## Start a new project based on this example + +To start a new project based on this example, run: + +```sh +npx gitpick TanStack/router/tree/main/examples/react/large-file-based large-file-based +``` + +## Getting Started + +Install dependencies: + +```sh +pnpm install +``` + +Start the development server: + +```sh +pnpm dev +``` + +## Build + +Build for production: + +```sh +pnpm build +``` + +## About This Example + +This example demonstrates: + +- Large-scale file-based routing +- Performance with many routes +- Code splitting +- Lazy loading +- Scalability patterns From 54c39eadd376e32dc5d69d56f0362d61deec8c6f Mon Sep 17 00:00:00 2001 From: Ender Bonnet Date: Tue, 2 Dec 2025 18:50:31 -0300 Subject: [PATCH 26/65] add readme to example location-masking --- examples/react/location-masking/README.md | 47 +++++++++++++++++++++-- 1 file changed, 43 insertions(+), 4 deletions(-) diff --git a/examples/react/location-masking/README.md b/examples/react/location-masking/README.md index 115199d292c..51ac8ac6adf 100644 --- a/examples/react/location-masking/README.md +++ b/examples/react/location-masking/README.md @@ -1,6 +1,45 @@ -# Example +# TanStack Router - Location Masking Example -To run this example: +An example demonstrating location masking for URL privacy. -- `npm install` or `yarn` -- `npm start` or `yarn start` +- [TanStack Router Docs](https://tanstack.com/router) + +## Start a new project based on this example + +To start a new project based on this example, run: + +```sh +npx gitpick TanStack/router/tree/main/examples/react/location-masking location-masking +``` + +## Getting Started + +Install dependencies: + +```sh +pnpm install +``` + +Start the development server: + +```sh +pnpm dev +``` + +## Build + +Build for production: + +```sh +pnpm build +``` + +## About This Example + +This example demonstrates: + +- Location masking +- URL privacy +- Hiding sensitive route information +- Custom URL display +- Security patterns From 31fa352513a6d1db358724b98fde811526413e3c Mon Sep 17 00:00:00 2001 From: Ender Bonnet Date: Tue, 2 Dec 2025 18:50:45 -0300 Subject: [PATCH 27/65] add readme to example navigation-blocking --- examples/react/navigation-blocking/README.md | 47 ++++++++++++++++++-- 1 file changed, 43 insertions(+), 4 deletions(-) diff --git a/examples/react/navigation-blocking/README.md b/examples/react/navigation-blocking/README.md index 115199d292c..dd63b7a8488 100644 --- a/examples/react/navigation-blocking/README.md +++ b/examples/react/navigation-blocking/README.md @@ -1,6 +1,45 @@ -# Example +# TanStack Router - Navigation Blocking Example -To run this example: +An example demonstrating navigation blocking and confirmation. -- `npm install` or `yarn` -- `npm start` or `yarn start` +- [TanStack Router Docs](https://tanstack.com/router) + +## Start a new project based on this example + +To start a new project based on this example, run: + +```sh +npx gitpick TanStack/router/tree/main/examples/react/navigation-blocking navigation-blocking +``` + +## Getting Started + +Install dependencies: + +```sh +pnpm install +``` + +Start the development server: + +```sh +pnpm dev +``` + +## Build + +Build for production: + +```sh +pnpm build +``` + +## About This Example + +This example demonstrates: + +- Navigation blocking +- Unsaved changes detection +- Navigation confirmation dialogs +- Form protection +- User experience patterns From 916877650b8ba74594da668d2a5965ebcbd70c1f Mon Sep 17 00:00:00 2001 From: Ender Bonnet Date: Tue, 2 Dec 2025 18:50:55 -0300 Subject: [PATCH 28/65] add readme to example quickstart --- examples/react/quickstart/README.md | 46 ++++++++++++++++++++++++++--- 1 file changed, 42 insertions(+), 4 deletions(-) diff --git a/examples/react/quickstart/README.md b/examples/react/quickstart/README.md index 115199d292c..34d2fc19406 100644 --- a/examples/react/quickstart/README.md +++ b/examples/react/quickstart/README.md @@ -1,6 +1,44 @@ -# Example +# TanStack Router - Quickstart Example -To run this example: +A quickstart example to get started with TanStack Router quickly. -- `npm install` or `yarn` -- `npm start` or `yarn start` +- [TanStack Router Docs](https://tanstack.com/router) + +## Start a new project based on this example + +To start a new project based on this example, run: + +```sh +npx gitpick TanStack/router/tree/main/examples/react/quickstart quickstart +``` + +## Getting Started + +Install dependencies: + +```sh +pnpm install +``` + +Start the development server: + +```sh +pnpm dev +``` + +## Build + +Build for production: + +```sh +pnpm build +``` + +## About This Example + +A minimal example demonstrating: + +- Quick setup of TanStack Router +- Basic routing configuration +- Simple navigation +- Getting started guide From 59c19512e1389d823ab40441913d77edd1fdcb6f Mon Sep 17 00:00:00 2001 From: Ender Bonnet Date: Tue, 2 Dec 2025 18:51:19 -0300 Subject: [PATCH 29/65] add readme to example quickstart-esbuild-file-based --- .../quickstart-esbuild-file-based/README.md | 47 +++++++++++++++++-- 1 file changed, 43 insertions(+), 4 deletions(-) diff --git a/examples/react/quickstart-esbuild-file-based/README.md b/examples/react/quickstart-esbuild-file-based/README.md index 115199d292c..8e22224f8d7 100644 --- a/examples/react/quickstart-esbuild-file-based/README.md +++ b/examples/react/quickstart-esbuild-file-based/README.md @@ -1,6 +1,45 @@ -# Example +# TanStack Router - esbuild File-Based Quickstart -To run this example: +A quickstart example using esbuild as the bundler with file-based routing. -- `npm install` or `yarn` -- `npm start` or `yarn start` +- [TanStack Router Docs](https://tanstack.com/router) +- [esbuild Documentation](https://esbuild.github.io/) + +## Start a new project based on this example + +To start a new project based on this example, run: + +```sh +npx gitpick TanStack/router/tree/main/examples/react/quickstart-esbuild-file-based quickstart-esbuild-file-based +``` + +## Getting Started + +Install dependencies: + +```sh +pnpm install +``` + +Start the development server: + +```sh +pnpm dev +``` + +## Build + +Build for production: + +```sh +pnpm build +``` + +## About This Example + +This example demonstrates: + +- esbuild bundler integration +- File-based routing +- Fast build times +- Minimal configuration From 115886e8e5c2b72b28ce112532f0636f52e337e7 Mon Sep 17 00:00:00 2001 From: Ender Bonnet Date: Tue, 2 Dec 2025 18:51:29 -0300 Subject: [PATCH 30/65] add readme to example quickstart-file-based --- .../react/quickstart-file-based/README.md | 46 +++++++++++++++++-- 1 file changed, 42 insertions(+), 4 deletions(-) diff --git a/examples/react/quickstart-file-based/README.md b/examples/react/quickstart-file-based/README.md index 115199d292c..1581d2ac793 100644 --- a/examples/react/quickstart-file-based/README.md +++ b/examples/react/quickstart-file-based/README.md @@ -1,6 +1,44 @@ -# Example +# TanStack Router - File-Based Quickstart Example -To run this example: +A quickstart example using file-based routing. -- `npm install` or `yarn` -- `npm start` or `yarn start` +- [TanStack Router Docs](https://tanstack.com/router) + +## Start a new project based on this example + +To start a new project based on this example, run: + +```sh +npx gitpick TanStack/router/tree/main/examples/react/quickstart-file-based quickstart-file-based +``` + +## Getting Started + +Install dependencies: + +```sh +pnpm install +``` + +Start the development server: + +```sh +pnpm dev +``` + +## Build + +Build for production: + +```sh +pnpm build +``` + +## About This Example + +This example demonstrates: + +- Quick setup with file-based routing +- Automatic route generation +- Minimal configuration +- Type-safe routes From 7287c6aad0b89b727cc55e128804fdf4dc6dc727 Mon Sep 17 00:00:00 2001 From: Ender Bonnet Date: Tue, 2 Dec 2025 18:51:43 -0300 Subject: [PATCH 31/65] add readme to example quickstart-rspack-file-based --- .../quickstart-rspack-file-based/README.md | 47 +++++++++++++++++-- 1 file changed, 43 insertions(+), 4 deletions(-) diff --git a/examples/react/quickstart-rspack-file-based/README.md b/examples/react/quickstart-rspack-file-based/README.md index 115199d292c..b8183e5b9a3 100644 --- a/examples/react/quickstart-rspack-file-based/README.md +++ b/examples/react/quickstart-rspack-file-based/README.md @@ -1,6 +1,45 @@ -# Example +# TanStack Router - Rspack File-Based Quickstart -To run this example: +A quickstart example using Rspack as the bundler with file-based routing. -- `npm install` or `yarn` -- `npm start` or `yarn start` +- [TanStack Router Docs](https://tanstack.com/router) +- [Rspack Documentation](https://www.rspack.dev/) + +## Start a new project based on this example + +To start a new project based on this example, run: + +```sh +npx gitpick TanStack/router/tree/main/examples/react/quickstart-rspack-file-based quickstart-rspack-file-based +``` + +## Getting Started + +Install dependencies: + +```sh +pnpm install +``` + +Start the development server: + +```sh +pnpm dev +``` + +## Build + +Build for production: + +```sh +pnpm build +``` + +## About This Example + +This example demonstrates: + +- Rspack bundler integration +- File-based routing +- Fast build times with Rust-based tooling +- Webpack-compatible configuration From 9d30b20c26ee3e50e09ba31efa1b28b7f0132319 Mon Sep 17 00:00:00 2001 From: Ender Bonnet Date: Tue, 2 Dec 2025 18:52:07 -0300 Subject: [PATCH 32/65] add readme to example quickstart-webpack-file-based --- .../quickstart-webpack-file-based/README.md | 47 +++++++++++++++++-- 1 file changed, 43 insertions(+), 4 deletions(-) diff --git a/examples/react/quickstart-webpack-file-based/README.md b/examples/react/quickstart-webpack-file-based/README.md index 115199d292c..b09453b74dc 100644 --- a/examples/react/quickstart-webpack-file-based/README.md +++ b/examples/react/quickstart-webpack-file-based/README.md @@ -1,6 +1,45 @@ -# Example +# TanStack Router - Webpack File-Based Quickstart -To run this example: +A quickstart example using Webpack as the bundler with file-based routing. -- `npm install` or `yarn` -- `npm start` or `yarn start` +- [TanStack Router Docs](https://tanstack.com/router) +- [Webpack Documentation](https://webpack.js.org/) + +## Start a new project based on this example + +To start a new project based on this example, run: + +```sh +npx gitpick TanStack/router/tree/main/examples/react/quickstart-webpack-file-based quickstart-webpack-file-based +``` + +## Getting Started + +Install dependencies: + +```sh +pnpm install +``` + +Start the development server: + +```sh +pnpm dev +``` + +## Build + +Build for production: + +```sh +pnpm build +``` + +## About This Example + +This example demonstrates: + +- Webpack bundler integration +- File-based routing +- Traditional bundler setup +- Webpack configuration for TanStack Router From 9b65df3e81160ef5493e181002bbe7721006e0f8 Mon Sep 17 00:00:00 2001 From: Ender Bonnet Date: Tue, 2 Dec 2025 18:52:34 -0300 Subject: [PATCH 33/65] add readme to example scroll-restoration --- examples/react/scroll-restoration/README.md | 46 +++++++++++++++++++-- 1 file changed, 42 insertions(+), 4 deletions(-) diff --git a/examples/react/scroll-restoration/README.md b/examples/react/scroll-restoration/README.md index 115199d292c..c73b8d3dbf8 100644 --- a/examples/react/scroll-restoration/README.md +++ b/examples/react/scroll-restoration/README.md @@ -1,6 +1,44 @@ -# Example +# TanStack Router - Scroll Restoration Example -To run this example: +An example demonstrating scroll position restoration. -- `npm install` or `yarn` -- `npm start` or `yarn start` +- [TanStack Router Docs](https://tanstack.com/router) + +## Start a new project based on this example + +To start a new project based on this example, run: + +```sh +npx gitpick TanStack/router/tree/main/examples/react/scroll-restoration scroll-restoration +``` + +## Getting Started + +Install dependencies: + +```sh +pnpm install +``` + +Start the development server: + +```sh +pnpm dev +``` + +## Build + +Build for production: + +```sh +pnpm build +``` + +## About This Example + +This example demonstrates: + +- Scroll position restoration +- Browser back/forward scroll behavior +- Custom scroll restoration logic +- User experience optimization From a9fea145800a3290a5de04ba620ef7506d190015 Mon Sep 17 00:00:00 2001 From: Ender Bonnet Date: Tue, 2 Dec 2025 18:52:47 -0300 Subject: [PATCH 34/65] add readme to example search-validator-adapters --- .../react/search-validator-adapters/README.md | 47 +++++++++++++++++-- 1 file changed, 43 insertions(+), 4 deletions(-) diff --git a/examples/react/search-validator-adapters/README.md b/examples/react/search-validator-adapters/README.md index 115199d292c..f7c762190ff 100644 --- a/examples/react/search-validator-adapters/README.md +++ b/examples/react/search-validator-adapters/README.md @@ -1,6 +1,45 @@ -# Example +# TanStack Router - Search Validator Adapters Example -To run this example: +An example demonstrating search parameter validation with various adapters. -- `npm install` or `yarn` -- `npm start` or `yarn start` +- [TanStack Router Docs](https://tanstack.com/router) + +## Start a new project based on this example + +To start a new project based on this example, run: + +```sh +npx gitpick TanStack/router/tree/main/examples/react/search-validator-adapters search-validator-adapters +``` + +## Getting Started + +Install dependencies: + +```sh +pnpm install +``` + +Start the development server: + +```sh +pnpm dev +``` + +## Build + +Build for production: + +```sh +pnpm build +``` + +## About This Example + +This example demonstrates: + +- Search parameter validation +- Multiple validator adapters (Zod, Valibot, etc.) +- Type-safe search params +- Schema validation +- URL state management From b3aa439c3a28178a884a718389b451cfd2c638f0 Mon Sep 17 00:00:00 2001 From: Ender Bonnet Date: Tue, 2 Dec 2025 18:53:03 -0300 Subject: [PATCH 35/65] add readme to example start-basic --- examples/react/start-basic/README.md | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/examples/react/start-basic/README.md b/examples/react/start-basic/README.md index 22122df0c09..b2d7a1729ba 100644 --- a/examples/react/start-basic/README.md +++ b/examples/react/start-basic/README.md @@ -1,6 +1,6 @@ -# Welcome to TanStack.com! +# TanStack Start - Basic Example -This site is built with TanStack Router! +This is the basic TanStack Start example, demonstrating the fundamentals of building applications with TanStack Router and TanStack Start. - [TanStack Router Docs](https://tanstack.com/router) @@ -8,9 +8,9 @@ It's deployed automagically with Netlify! - [Netlify](https://netlify.com/) -## Start a new project +## Start a new project based on this example -To start a new project, run: +To start a new project based on this example, run: ```sh npx gitpick TanStack/router/tree/main/examples/react/start-basic start-basic @@ -27,6 +27,14 @@ pnpm dev This starts your app in development mode, rebuilding assets on file changes. +## Build + +To build the app for production: + +```sh +pnpm build +``` + ## Editing and previewing the docs of TanStack projects locally The documentations for all TanStack projects except for `React Charts` are hosted on [https://tanstack.com](https://tanstack.com), powered by this TanStack Router app. From fa9809423c720421a25444c1299f4af349e8c520 Mon Sep 17 00:00:00 2001 From: Ender Bonnet Date: Tue, 2 Dec 2025 18:53:13 -0300 Subject: [PATCH 36/65] add readme to example start-basic-auth --- examples/react/start-basic-auth/README.md | 30 ++++++++++++++++++++--- 1 file changed, 26 insertions(+), 4 deletions(-) diff --git a/examples/react/start-basic-auth/README.md b/examples/react/start-basic-auth/README.md index 90cba4aac1e..35e9e240e19 100644 --- a/examples/react/start-basic-auth/README.md +++ b/examples/react/start-basic-auth/README.md @@ -1,12 +1,16 @@ -# Welcome to TanStack.com! +# TanStack Start - Basic Auth Example -This site is built with TanStack Router! +A TanStack Start example demonstrating authentication patterns and protected routes. - [TanStack Router Docs](https://tanstack.com/router) -It's deployed automagically with Netlify! +## Start a new project -- [Netlify](https://netlify.com/) +To start a new project based on this example, run: + +```sh +npx gitpick TanStack/router/tree/main/examples/react/start-basic-auth start-basic-auth +``` ## Development @@ -19,6 +23,24 @@ pnpm dev This starts your app in development mode, rebuilding assets on file changes. +## Build + +To build the app for production: + +```sh +pnpm build +``` + +## Authentication Features + +This example demonstrates: + +- User authentication flow +- Protected routes +- Login/logout functionality +- Session management +- Redirect after authentication + ## Editing and previewing the docs of TanStack projects locally The documentations for all TanStack projects except for `React Charts` are hosted on [https://tanstack.com](https://tanstack.com), powered by this TanStack Router app. From e9b6c49c076e5b6579488ffc86c32d44311a9f1f Mon Sep 17 00:00:00 2001 From: Ender Bonnet Date: Tue, 2 Dec 2025 18:53:30 -0300 Subject: [PATCH 37/65] add readme to example start-basic-cloudflare --- .../react/start-basic-cloudflare/README.md | 59 +++++++++++++++---- 1 file changed, 46 insertions(+), 13 deletions(-) diff --git a/examples/react/start-basic-cloudflare/README.md b/examples/react/start-basic-cloudflare/README.md index be34d008fcd..23e34804e8f 100644 --- a/examples/react/start-basic-cloudflare/README.md +++ b/examples/react/start-basic-cloudflare/README.md @@ -1,38 +1,62 @@ -# Start Basic Cloudflare +# TanStack Start - Cloudflare Example -## Getting Started +A TanStack Start example demonstrating deployment to Cloudflare Workers. -### Install the dependencies +- [TanStack Router Docs](https://tanstack.com/router) +- [Cloudflare Workers Documentation](https://developers.cloudflare.com/workers/) -```bash -pnpm i +## Start a new project based on this example + +To start a new project based on this example, run: + +```sh +npx gitpick TanStack/router/tree/main/examples/react/start-basic-cloudflare start-basic-cloudflare +``` + +## Start a new project + +To start a new project based on this example, run: + +```sh +npx gitpick TanStack/router/tree/main/examples/react/start-basic-cloudflare start-basic-cloudflare ``` -### Start the development server +## Development -```bash +From your terminal: + +```sh +pnpm install pnpm dev ``` -### Build for Production +This starts your app in development mode, rebuilding assets on file changes. -```bash +## Build + +To build the app for production: + +```sh pnpm build ``` -### Preview the production build +## Preview -```bash +To preview the production build locally: + +```sh pnpm preview ``` -### Deploy to Cloudflare +## Deploy to Cloudflare + +To deploy your app to Cloudflare Workers: ```sh pnpm run deploy ``` -## Accessing bindings +## Accessing Cloudflare Bindings You can access Cloudflare bindings in server functions by using importable `env`: @@ -41,3 +65,12 @@ import { env } from 'cloudflare:workers' ``` See `src/routes/index.tsx` for an example. + +## Cloudflare Configuration + +This example includes: + +- Wrangler configuration for Cloudflare Workers +- Type generation for Cloudflare bindings +- Server-side rendering on the edge +- Access to Cloudflare platform features (KV, D1, R2, etc.) From a68e93555066c8d239f77935fbc10d5d8ee5a252 Mon Sep 17 00:00:00 2001 From: Ender Bonnet Date: Tue, 2 Dec 2025 18:53:47 -0300 Subject: [PATCH 38/65] add readme to example start-basic-react-query --- .../react/start-basic-react-query/README.md | 66 +++++-------------- 1 file changed, 18 insertions(+), 48 deletions(-) diff --git a/examples/react/start-basic-react-query/README.md b/examples/react/start-basic-react-query/README.md index 90cba4aac1e..87ca06f91c7 100644 --- a/examples/react/start-basic-react-query/README.md +++ b/examples/react/start-basic-react-query/README.md @@ -1,12 +1,17 @@ -# Welcome to TanStack.com! +# TanStack Start - Basic React Query Example -This site is built with TanStack Router! +A TanStack Start example demonstrating integration with TanStack Query (React Query). - [TanStack Router Docs](https://tanstack.com/router) +- [TanStack Query Docs](https://tanstack.com/query) -It's deployed automagically with Netlify! +## Start a new project based on this example -- [Netlify](https://netlify.com/) +To start a new project based on this example, run: + +```sh +npx gitpick TanStack/router/tree/main/examples/react/start-basic-react-query start-basic-react-query +``` ## Development @@ -19,54 +24,19 @@ pnpm dev This starts your app in development mode, rebuilding assets on file changes. -## Editing and previewing the docs of TanStack projects locally - -The documentations for all TanStack projects except for `React Charts` are hosted on [https://tanstack.com](https://tanstack.com), powered by this TanStack Router app. -In production, the markdown doc pages are fetched from the GitHub repos of the projects, but in development they are read from the local file system. - -Follow these steps if you want to edit the doc pages of a project (in these steps we'll assume it's [`TanStack/form`](https://github.com/tanstack/form)) and preview them locally : - -1. Create a new directory called `tanstack`. - -```sh -mkdir tanstack -``` - -2. Enter the directory and clone this repo and the repo of the project there. - -```sh -cd tanstack -git clone git@github.com:TanStack/tanstack.com.git -git clone git@github.com:TanStack/form.git -``` - -> [!NOTE] -> Your `tanstack` directory should look like this: -> -> ``` -> tanstack/ -> | -> +-- form/ -> | -> +-- tanstack.com/ -> ``` +## Build -> [!WARNING] -> Make sure the name of the directory in your local file system matches the name of the project's repo. For example, `tanstack/form` must be cloned into `form` (this is the default) instead of `some-other-name`, because that way, the doc pages won't be found. - -3. Enter the `tanstack/tanstack.com` directory, install the dependencies and run the app in dev mode: +To build the app for production: ```sh -cd tanstack.com -pnpm i -# The app will run on https://localhost:3000 by default -pnpm dev +pnpm build ``` -4. Now you can visit http://localhost:3000/form/latest/docs/overview in the browser and see the changes you make in `tanstack/form/docs`. +## TanStack Query Integration -> [!NOTE] -> The updated pages need to be manually reloaded in the browser. +This example demonstrates how to use TanStack Query with TanStack Start for: -> [!WARNING] -> You will need to update the `docs/config.json` file (in the project's repo) if you add a new doc page! +- Server-side data fetching +- Client-side caching and synchronization +- Optimistic updates +- Automatic refetching From bd2da79c92b567dce1c842cbe065f09e2eaa5ab9 Mon Sep 17 00:00:00 2001 From: Ender Bonnet Date: Tue, 2 Dec 2025 18:54:49 -0300 Subject: [PATCH 39/65] add readme to example start-trellaux --- examples/react/start-trellaux/README.md | 38 +++++++++++++++++++++++-- 1 file changed, 36 insertions(+), 2 deletions(-) diff --git a/examples/react/start-trellaux/README.md b/examples/react/start-trellaux/README.md index d95778ee4e4..215cae4ae44 100644 --- a/examples/react/start-trellaux/README.md +++ b/examples/react/start-trellaux/README.md @@ -1,8 +1,42 @@ -# Trello-like example +# TanStack Start - Trellaux Example -To run this example: +A TanStack Start example demonstrating a Trello-like kanban board application. + +- [TanStack Router Docs](https://tanstack.com/router) + +## Start a new project + +To start a new project based on this example, run: + +```sh +npx gitpick TanStack/router/tree/main/examples/react/start-trellaux start-trellaux +``` + +## Development + +From your terminal: ```sh pnpm install pnpm dev ``` + +This starts your app in development mode, rebuilding assets on file changes. + +## Build + +To build the app for production: + +```sh +pnpm build +``` + +## About This Example + +A full-featured Trello-like application demonstrating: + +- Drag and drop functionality +- Complex state management +- Real-time updates +- Board, list, and card management +- Server functions for data persistence From f43661692916347aee7a4249ade9736299290613 Mon Sep 17 00:00:00 2001 From: Ender Bonnet Date: Tue, 2 Dec 2025 18:55:10 -0300 Subject: [PATCH 40/65] add readme to example view-transitions --- examples/react/view-transitions/README.md | 46 +++++++++++++++++++++-- 1 file changed, 42 insertions(+), 4 deletions(-) diff --git a/examples/react/view-transitions/README.md b/examples/react/view-transitions/README.md index 115199d292c..6323b976904 100644 --- a/examples/react/view-transitions/README.md +++ b/examples/react/view-transitions/README.md @@ -1,6 +1,44 @@ -# Example +# TanStack Router - View Transitions Example -To run this example: +An example demonstrating view transitions for smooth page transitions. -- `npm install` or `yarn` -- `npm start` or `yarn start` +- [TanStack Router Docs](https://tanstack.com/router) + +## Start a new project based on this example + +To start a new project based on this example, run: + +```sh +npx gitpick TanStack/router/tree/main/examples/react/view-transitions view-transitions +``` + +## Getting Started + +Install dependencies: + +```sh +pnpm install +``` + +Start the development server: + +```sh +pnpm dev +``` + +## Build + +Build for production: + +```sh +pnpm build +``` + +## About This Example + +This example demonstrates: + +- View Transitions API integration +- Smooth page transitions +- Animated route changes +- Enhanced user experience From 44c7a7563eaeafa51d2c1ee514d1c101ffc556a2 Mon Sep 17 00:00:00 2001 From: Ender Bonnet Date: Tue, 2 Dec 2025 18:55:29 -0300 Subject: [PATCH 41/65] add readme to example with-framer-motion --- examples/react/with-framer-motion/README.md | 48 +++++++++++++++++++-- 1 file changed, 44 insertions(+), 4 deletions(-) diff --git a/examples/react/with-framer-motion/README.md b/examples/react/with-framer-motion/README.md index 115199d292c..327c1dbd783 100644 --- a/examples/react/with-framer-motion/README.md +++ b/examples/react/with-framer-motion/README.md @@ -1,6 +1,46 @@ -# Example +# TanStack Router - Framer Motion Integration Example -To run this example: +An example demonstrating integration with Framer Motion for animations. -- `npm install` or `yarn` -- `npm start` or `yarn start` +- [TanStack Router Docs](https://tanstack.com/router) +- [Framer Motion Documentation](https://www.framer.com/motion/) + +## Start a new project based on this example + +To start a new project based on this example, run: + +```sh +npx gitpick TanStack/router/tree/main/examples/react/with-framer-motion with-framer-motion +``` + +## Getting Started + +Install dependencies: + +```sh +pnpm install +``` + +Start the development server: + +```sh +pnpm dev +``` + +## Build + +Build for production: + +```sh +pnpm build +``` + +## About This Example + +This example demonstrates: + +- Framer Motion integration +- Animated route transitions +- Page animations +- Gesture-based navigation +- Advanced animation patterns From 865b47b140ddee11b59d0957933f351e5571bf2a Mon Sep 17 00:00:00 2001 From: Ender Bonnet Date: Tue, 2 Dec 2025 18:55:38 -0300 Subject: [PATCH 42/65] add readme to example with-trpc --- examples/react/with-trpc/README.md | 48 +++++++++++++++++++++++++++--- 1 file changed, 44 insertions(+), 4 deletions(-) diff --git a/examples/react/with-trpc/README.md b/examples/react/with-trpc/README.md index 115199d292c..a2ca539d44e 100644 --- a/examples/react/with-trpc/README.md +++ b/examples/react/with-trpc/README.md @@ -1,6 +1,46 @@ -# Example +# TanStack Router - tRPC Integration Example -To run this example: +An example demonstrating integration with tRPC for type-safe APIs. -- `npm install` or `yarn` -- `npm start` or `yarn start` +- [TanStack Router Docs](https://tanstack.com/router) +- [tRPC Documentation](https://trpc.io) + +## Start a new project based on this example + +To start a new project based on this example, run: + +```sh +npx gitpick TanStack/router/tree/main/examples/react/with-trpc with-trpc +``` + +## Getting Started + +Install dependencies: + +```sh +pnpm install +``` + +Start the development server: + +```sh +pnpm dev +``` + +## Build + +Build for production: + +```sh +pnpm build +``` + +## About This Example + +This example demonstrates: + +- tRPC integration with TanStack Router +- Type-safe API calls +- End-to-end type safety +- Server and client setup +- Procedure definitions From 02c3654dd9f208049e21c0adedd192dfdc338b7d Mon Sep 17 00:00:00 2001 From: Ender Bonnet Date: Tue, 2 Dec 2025 18:57:44 -0300 Subject: [PATCH 43/65] add readme to example with-trpc-react-query --- .../react/with-trpc-react-query/README.md | 49 +++++++++++++++++-- 1 file changed, 45 insertions(+), 4 deletions(-) diff --git a/examples/react/with-trpc-react-query/README.md b/examples/react/with-trpc-react-query/README.md index 115199d292c..cf848872735 100644 --- a/examples/react/with-trpc-react-query/README.md +++ b/examples/react/with-trpc-react-query/README.md @@ -1,6 +1,47 @@ -# Example +# TanStack Router - tRPC with React Query Example -To run this example: +An example demonstrating integration of tRPC with TanStack Query. -- `npm install` or `yarn` -- `npm start` or `yarn start` +- [TanStack Router Docs](https://tanstack.com/router) +- [tRPC Documentation](https://trpc.io) +- [TanStack Query Docs](https://tanstack.com/query) + +## Start a new project based on this example + +To start a new project based on this example, run: + +```sh +npx gitpick TanStack/router/tree/main/examples/react/with-trpc-react-query with-trpc-react-query +``` + +## Getting Started + +Install dependencies: + +```sh +pnpm install +``` + +Start the development server: + +```sh +pnpm dev +``` + +## Build + +Build for production: + +```sh +pnpm build +``` + +## About This Example + +This example demonstrates: + +- tRPC integration with TanStack Router +- TanStack Query for data fetching +- Type-safe API calls with caching +- End-to-end type safety +- Optimistic updates From 69b64258784894c48cff5ab4e225959c65b19df0 Mon Sep 17 00:00:00 2001 From: Ender Bonnet Date: Tue, 2 Dec 2025 19:05:16 -0300 Subject: [PATCH 44/65] add data to readme example authenticated-routes-firebase --- .../authenticated-routes-firebase/README.md | 60 ++++++++++++++++--- 1 file changed, 51 insertions(+), 9 deletions(-) diff --git a/examples/react/authenticated-routes-firebase/README.md b/examples/react/authenticated-routes-firebase/README.md index 893ae83165e..02b731680fc 100644 --- a/examples/react/authenticated-routes-firebase/README.md +++ b/examples/react/authenticated-routes-firebase/README.md @@ -1,4 +1,19 @@ -# Firebase Setup +# TanStack Router - Authenticated Routes with Firebase Example + +An example demonstrating authentication with Firebase and protected routes. + +- [TanStack Router Docs](https://tanstack.com/router) +- [Firebase Documentation](https://firebase.google.com/docs) + +## Start a new project based on this example + +To start a new project based on this example, run: + +```sh +npx gitpick TanStack/router/tree/main/examples/react/authenticated-routes-firebase authenticated-routes-firebase +``` + +## Firebase Setup 1. Create a [Firebase project](https://console.firebase.google.com/) 1. By default, firebase will configure an accepted domain for localhost...update if necessary! @@ -22,19 +37,46 @@ ## Setup .env.local -Copy the .env.example provided and configure with your firebase credentials +Copy the .env.example provided and configure with your firebase credentials: -````VITE_FIREBASE_API_KEY= +``` +VITE_FIREBASE_API_KEY= VITE_FIREBASE_AUTH_DOMAIN= VITE_FIREBASE_PROJECT_ID= VITE_FIREBASE_STORAGE_BUCKET= VITE_FIREBASE_MESSAGING_SENDER_ID= -VITE_FIREBASE_APP_ID=``` +VITE_FIREBASE_APP_ID= +``` + +## Getting Started + +Install dependencies: + +```sh +pnpm install +``` + +Start the development server: + +```sh +pnpm dev +``` + +## Build + +Build for production: + +```sh +pnpm build +``` -## Run the app +## About This Example -To run this example: +This example demonstrates: -- `npm install` or `yarn` -- `npm start` or `yarn start` -```` +- Firebase authentication integration +- Protected routes with Firebase Auth +- Route guards +- Login/logout with Firebase +- User session management +- Public vs private routes From a80b5720131939e5f1db50a85149014d25d93206 Mon Sep 17 00:00:00 2001 From: Ender Bonnet Date: Tue, 2 Dec 2025 19:06:49 -0300 Subject: [PATCH 45/65] edit start project section example start-basic-cloudflare --- examples/react/start-basic-cloudflare/README.md | 8 -------- 1 file changed, 8 deletions(-) diff --git a/examples/react/start-basic-cloudflare/README.md b/examples/react/start-basic-cloudflare/README.md index 23e34804e8f..7a9a453317f 100644 --- a/examples/react/start-basic-cloudflare/README.md +++ b/examples/react/start-basic-cloudflare/README.md @@ -13,14 +13,6 @@ To start a new project based on this example, run: npx gitpick TanStack/router/tree/main/examples/react/start-basic-cloudflare start-basic-cloudflare ``` -## Start a new project - -To start a new project based on this example, run: - -```sh -npx gitpick TanStack/router/tree/main/examples/react/start-basic-cloudflare start-basic-cloudflare -``` - ## Development From your terminal: From 4cfd929ff15437c2161a154ea2472e0b2c687138 Mon Sep 17 00:00:00 2001 From: Ender Bonnet Date: Tue, 2 Dec 2025 19:13:12 -0300 Subject: [PATCH 46/65] update readme i18n-paraglide --- examples/react/i18n-paraglide/README.md | 87 ++++++++++++++++++++++--- 1 file changed, 78 insertions(+), 9 deletions(-) diff --git a/examples/react/i18n-paraglide/README.md b/examples/react/i18n-paraglide/README.md index 34227c5d468..7ec9d47bf6e 100644 --- a/examples/react/i18n-paraglide/README.md +++ b/examples/react/i18n-paraglide/README.md @@ -1,7 +1,18 @@ -# TanStack Router example +# TanStack Router - i18n with Paraglide Example This example shows how to use Paraglide with TanStack Router. The source code can be found [here](https://github.com/opral/monorepo/tree/main/inlang/packages/paraglide/paraglide-js/examples/tanstack-router). +- [TanStack Router Docs](https://tanstack.com/router) +- [Paraglide Documentation](https://inlang.com/m/gerre34r/library-inlang-paraglideJs) + +## Start a new project based on this example + +To start a new project based on this example, run: + +```sh +npx gitpick TanStack/router/tree/main/examples/react/i18n-paraglide i18n-paraglide +``` + ## Getting started 1. Init Paraglide JS @@ -19,14 +30,14 @@ import { tanstackRouter } from '@tanstack/router-plugin/vite' +import { paraglideVitePlugin } from "@inlang/paraglide-js"; export default defineConfig({ - plugins: [ + plugins: [ tanstackRouter({ target: 'react', autoCodeSplitting: true }), react(), -+ paraglideVitePlugin({ -+ project: "./project.inlang", -+ outdir: "./app/paraglide", -+ }), - ], ++ paraglideVitePlugin({ ++ project: "./project.inlang", ++ outdir: "./app/paraglide", ++ }), + ], }); ``` @@ -54,13 +65,47 @@ const router = createRouter({ In `__root.tsx` add a `beforeLoad` hook to check if the user should be redirected and set the html `lang` attribute. +In `server.ts` intercept the request with the paraglideMiddleware. + +```ts +import { paraglideMiddleware } from './paraglide/server.js' +import handler from '@tanstack/react-start/server-entry' +export default { + fetch(req: Request): Promise { + return paraglideMiddleware(req, ({ request }) => handler.fetch(request)) + }, +} +``` + +In `__root.tsx` add change the html lang attribute to the current locale. + +```tsx +import { getLocale } from '../paraglide/runtime.js' + +function RootDocument({ children }: { children: React.ReactNode }) { + return ( + + + + + + {children} + + + + ) +} +``` + +## Offline redirect + +If you have an application that needs to work offline, you will need to handle the redirect in the client like this. + ```ts import { shouldRedirect } from "../paraglide/runtime"; export const Route = createRootRoute({ beforeLoad: async () => { - document.documentElement.setAttribute("lang", getLocale()); - const decision = await shouldRedirect({ url: window.location.href }); if (decision.redirectUrl) { @@ -139,3 +184,27 @@ And import into the Paraglide Vite plguin. ## Server side rendering For server side rendering, check out the [TanStack Start guide](https://github.com/TanStack/router/tree/main/examples/react/start-i18n-paraglide). + +## Prerender routes + +You can use use the `localizeHref` function to map the routes to localized versions and import into the pages option in the TanStack Start plugin. For this to work you will need to compile paraglide before the build with the CLI. + +```ts +import { localizeHref } from './paraglide/runtime' +export const prerenderRoutes = ['/', '/about'].map((path) => ({ + path: localizeHref(path), + prerender: { + enabled: true, + }, +})) +``` + +## About This Example + +This example demonstrates: + +- Multi-language support with Paraglide +- Type-safe translations +- Locale-based routing +- Language switching +- i18n best practices From 6deb47113921800e6bee4f0a14cf60355d0713f2 Mon Sep 17 00:00:00 2001 From: Ender Bonnet Date: Tue, 2 Dec 2025 19:14:10 -0300 Subject: [PATCH 47/65] update readme router-monorepo-react-query --- .../router-monorepo-react-query/README.md | 55 +++++++++++++++++-- 1 file changed, 51 insertions(+), 4 deletions(-) diff --git a/examples/react/router-monorepo-react-query/README.md b/examples/react/router-monorepo-react-query/README.md index 58610fb1e89..078d22b1711 100644 --- a/examples/react/router-monorepo-react-query/README.md +++ b/examples/react/router-monorepo-react-query/README.md @@ -1,11 +1,21 @@ # Example of a monorepo with router and feature libraries -To run this example: +An example demonstrating TanStack Router in a monorepo setup with React Query. -- `npm install` or `yarn` -- `npm dev` or `yarn dev` +- [TanStack Router Docs](https://tanstack.com/router) +- [TanStack Query Docs](https://tanstack.com/query) -A challenge with TanStack Router in a monorepo setup is that it requires TypeScript type augmentations. However, if you set this up directly in the final app, the links inside the libraries won’t be type-safe. To solve this in a monorepo, you need a separate library just for the router, without any components, and then integrate it with the app. +## Start a new project based on this example + +To start a new project based on this example, run: + +```sh +npx gitpick TanStack/router/tree/main/examples/react/router-monorepo-react-query router-monorepo-react-query +``` + +## Monorepo Setup + +A challenge with TanStack Router in a monorepo setup is that it requires TypeScript type augmentations. However, if you set this up directly in the final app, the links inside the libraries won't be type-safe. To solve this in a monorepo, you need a separate library just for the router, without any components, and then integrate it with the app. This example showcases this approach using the following packages: @@ -24,6 +34,43 @@ Here is what it looks like in the monorepo: ![graph](./assets/graph.png) +- **Router library**: Contains route definitions and type augmentations +- **Feature libraries**: Contain components and business logic +- **App**: Integrates the router and feature libraries + +## Getting Started + +Install dependencies: + +```sh +pnpm install +``` + +Start the development server: + +```sh +pnpm dev +``` + +## Build + +Build for production: + +```sh +pnpm build +``` + +## About This Example + +This example demonstrates: + +- Monorepo structure with TanStack Router +- TanStack Query integration +- Shared data fetching logic +- Workspace configuration +- Code sharing across applications +- Type-safe routing in a monorepo + ## Stackblitz limitation ### TypeScript IDE feedback From d6d258370d682c028fde0df578c2cf46730ebd4e Mon Sep 17 00:00:00 2001 From: Ender Bonnet Date: Tue, 2 Dec 2025 19:14:37 -0300 Subject: [PATCH 48/65] update readme router-monorepo-simple --- .../react/router-monorepo-simple/README.md | 53 +++++++++++++++++-- 1 file changed, 49 insertions(+), 4 deletions(-) diff --git a/examples/react/router-monorepo-simple/README.md b/examples/react/router-monorepo-simple/README.md index ab5f85aa305..d15511a111a 100644 --- a/examples/react/router-monorepo-simple/README.md +++ b/examples/react/router-monorepo-simple/README.md @@ -1,11 +1,20 @@ # Example of a monorepo with router and feature libraries -To run this example: +An example demonstrating TanStack Router in a monorepo setup. -- `npm install` or `yarn` -- `npm dev` or `yarn dev` +- [TanStack Router Docs](https://tanstack.com/router) -A challenge with TanStack Router in a monorepo setup is that it requires TypeScript type augmentations. However, if you set this up directly in the final app, the links inside the libraries won’t be type-safe. To solve this in a monorepo, you need a separate library just for the router, without any components, and then integrate it with the app. +## Start a new project based on this example + +To start a new project based on this example, run: + +```sh +npx gitpick TanStack/router/tree/main/examples/react/router-monorepo-simple router-monorepo-simple +``` + +## Monorepo Setup + +A challenge with TanStack Router in a monorepo setup is that it requires TypeScript type augmentations. However, if you set this up directly in the final app, the links inside the libraries won't be type-safe. To solve this in a monorepo, you need a separate library just for the router, without any components, and then integrate it with the app. This example showcases this approach using the following packages: @@ -19,6 +28,42 @@ Since the router library re-exports the router components, importing them in the Finally, in the app, we can create a map of routes to components ([`packages/app/src/main.tsx`](./packages/app/src/main.tsx)), which ties the router to the components. **We could enforce lazy loading here, but it was left out for simplicity.** With this setup, we now have a fully type-safe router! +- **Router library**: Contains route definitions and type augmentations +- **Feature libraries**: Contain components and business logic +- **App**: Integrates the router and feature libraries + +## Getting Started + +Install dependencies: + +```sh +pnpm install +``` + +Start the development server: + +```sh +pnpm dev +``` + +## Build + +Build for production: + +```sh +pnpm build +``` + +## About This Example + +This example demonstrates: + +- Monorepo structure with TanStack Router +- Shared packages +- Workspace configuration +- Code sharing across applications +- Type-safe routing in a monorepo + Here is what it looks like in the monorepo: ![graph](./assets/graph.png) From 30fef63edf0d191a30ec972acbd41813407ee1d7 Mon Sep 17 00:00:00 2001 From: Ender Bonnet Date: Tue, 2 Dec 2025 19:15:06 -0300 Subject: [PATCH 49/65] update readme router-monorepo-simple-lazy --- .../router-monorepo-simple-lazy/README.md | 56 +++++++++++++++++-- 1 file changed, 51 insertions(+), 5 deletions(-) diff --git a/examples/react/router-monorepo-simple-lazy/README.md b/examples/react/router-monorepo-simple-lazy/README.md index c7a93fff4a1..0136f42efdb 100644 --- a/examples/react/router-monorepo-simple-lazy/README.md +++ b/examples/react/router-monorepo-simple-lazy/README.md @@ -1,11 +1,20 @@ # Example of a monorepo with router and feature libraries, using lazy loading -To run this example: +An example demonstrating TanStack Router in a monorepo with lazy loading. -- `npm install` or `yarn` -- `npm dev` or `yarn dev` +- [TanStack Router Docs](https://tanstack.com/router) -A challenge with TanStack Router in a monorepo setup is that it requires TypeScript type augmentations. However, if you set this up directly in the final app, the links inside the libraries won’t be type-safe. To solve this in a monorepo, you need a separate library just for the router, without any components, and then integrate it with the app. +## Start a new project based on this example + +To start a new project based on this example, run: + +```sh +npx gitpick TanStack/router/tree/main/examples/react/router-monorepo-simple-lazy router-monorepo-simple-lazy +``` + +## Monorepo Setup + +A challenge with TanStack Router in a monorepo setup is that it requires TypeScript type augmentations. However, if you set this up directly in the final app, the links inside the libraries won't be type-safe. To solve this in a monorepo, you need a separate library just for the router, without any components, and then integrate it with the app. This example showcases this approach using the following packages: @@ -19,9 +28,46 @@ Since the router library re-exports the router components, importing them in the Finally, in the app, we can create a map of routes to components ([`packages/app/src/main.tsx`](./packages/app/src/main.tsx)), which ties the router to the components. +- **Router library**: Contains route definitions and type augmentations +- **Feature libraries**: Contain components and business logic +- **App**: Integrates the router and feature libraries + +## Getting Started + +Install dependencies: + +```sh +pnpm install +``` + +Start the development server: + +```sh +pnpm dev +``` + +## Build + +Build for production: + +```sh +pnpm build +``` + +## About This Example + +This example demonstrates: + +- Monorepo structure with TanStack Router +- Lazy loading routes +- Code splitting in monorepos +- Shared packages +- Optimized bundle sizes +- Type-safe routing in a monorepo + ## How lazy loading works -Eath feature exports a `createLazyRoute` function that returns a lazy route. This lazy route is then used in the router map to bind the lazy route to the actual route. This allows library to define their component, pending, error and nod found components directly. +Each feature exports a `createLazyRoute` function that returns a lazy route. This lazy route is then used in the router map to bind the lazy route to the actual route. This allows library to define their component, pending, error and nod found components directly. The types on the ([`packages/app/src/main.tsx`](./packages/app/src/main.tsx)) are used to map the route to the lazy route, and enforce they match the route path. From a4cd3dd7138846c6aa75c638337295c4e8b18ea1 Mon Sep 17 00:00:00 2001 From: Ender Bonnet Date: Tue, 2 Dec 2025 19:15:38 -0300 Subject: [PATCH 50/65] update readme start-basic-rsc --- examples/react/start-basic-rsc/README.md | 42 ++++++++++++++++-------- 1 file changed, 28 insertions(+), 14 deletions(-) diff --git a/examples/react/start-basic-rsc/README.md b/examples/react/start-basic-rsc/README.md index 90cba4aac1e..d63aa8027bd 100644 --- a/examples/react/start-basic-rsc/README.md +++ b/examples/react/start-basic-rsc/README.md @@ -1,9 +1,19 @@ -# Welcome to TanStack.com! +# TanStack Start - RSC Example -This site is built with TanStack Router! +This site is built with TanStack Router and React Server Components! - [TanStack Router Docs](https://tanstack.com/router) +## Start a new project based on this example + +To start a new project based on this example, run: + +```sh +npx gitpick TanStack/router/tree/main/examples/react/start-basic-rsc start-basic-rsc +``` + +## Deployment + It's deployed automagically with Netlify! - [Netlify](https://netlify.com/) @@ -17,29 +27,38 @@ pnpm install pnpm dev ``` -This starts your app in development mode, rebuilding assets on file changes. +## Build + +Build for production: + +```sh +pnpm build +``` + +## About This Example + +This example demonstrates: + +- React Server Components (RSC) with TanStack Start +- Server-side rendering +- Streaming +- Server Functions ## Editing and previewing the docs of TanStack projects locally The documentations for all TanStack projects except for `React Charts` are hosted on [https://tanstack.com](https://tanstack.com), powered by this TanStack Router app. In production, the markdown doc pages are fetched from the GitHub repos of the projects, but in development they are read from the local file system. - Follow these steps if you want to edit the doc pages of a project (in these steps we'll assume it's [`TanStack/form`](https://github.com/tanstack/form)) and preview them locally : - 1. Create a new directory called `tanstack`. - ```sh mkdir tanstack ``` - 2. Enter the directory and clone this repo and the repo of the project there. - ```sh cd tanstack git clone git@github.com:TanStack/tanstack.com.git git clone git@github.com:TanStack/form.git ``` - > [!NOTE] > Your `tanstack` directory should look like this: > @@ -50,23 +69,18 @@ git clone git@github.com:TanStack/form.git > | > +-- tanstack.com/ > ``` - > [!WARNING] > Make sure the name of the directory in your local file system matches the name of the project's repo. For example, `tanstack/form` must be cloned into `form` (this is the default) instead of `some-other-name`, because that way, the doc pages won't be found. 3. Enter the `tanstack/tanstack.com` directory, install the dependencies and run the app in dev mode: - ```sh cd tanstack.com pnpm i # The app will run on https://localhost:3000 by default pnpm dev ``` - 4. Now you can visit http://localhost:3000/form/latest/docs/overview in the browser and see the changes you make in `tanstack/form/docs`. - > [!NOTE] > The updated pages need to be manually reloaded in the browser. - > [!WARNING] > You will need to update the `docs/config.json` file (in the project's repo) if you add a new doc page! From 48f0f207548e16e01361a93f6d2de75d3a026f56 Mon Sep 17 00:00:00 2001 From: Ender Bonnet Date: Tue, 2 Dec 2025 19:15:53 -0300 Subject: [PATCH 51/65] update readme start-basic-static --- examples/react/start-basic-static/README.md | 39 ++++++++++++++------- 1 file changed, 26 insertions(+), 13 deletions(-) diff --git a/examples/react/start-basic-static/README.md b/examples/react/start-basic-static/README.md index eb580a5bf88..376e68dda00 100644 --- a/examples/react/start-basic-static/README.md +++ b/examples/react/start-basic-static/README.md @@ -1,9 +1,19 @@ -# Welcome to TanStack.com! +# TanStack Start - Static Example This site is built with TanStack Router! - [TanStack Router Docs](https://tanstack.com/router) +## Start a new project based on this example + +To start a new project based on this example, run: + +```sh +npx gitpick TanStack/router/tree/main/examples/react/start-basic-static start-basic-static +``` + +## Deployment + It's deployed automagically with Vercel! - [Vercel](https://vercel.com/) @@ -17,29 +27,37 @@ pnpm install pnpm dev ``` -This starts your app in development mode, rebuilding assets on file changes. +## Build + +Build for production: + +```sh +pnpm build +``` + +## About This Example + +This example demonstrates: + +- Static Site Generation (SSG) with TanStack Start +- Prerendering routes +- Static export ## Editing and previewing the docs of TanStack projects locally The documentations for all TanStack projects except for `React Charts` are hosted on [https://tanstack.com](https://tanstack.com), powered by this TanStack Router app. In production, the markdown doc pages are fetched from the GitHub repos of the projects, but in development they are read from the local file system. - Follow these steps if you want to edit the doc pages of a project (in these steps we'll assume it's [`TanStack/form`](https://github.com/tanstack/form)) and preview them locally : - 1. Create a new directory called `tanstack`. - ```sh mkdir tanstack ``` - 2. Enter the directory and clone this repo and the repo of the project there. - ```sh cd tanstack git clone git@github.com:TanStack/tanstack.com.git git clone git@github.com:TanStack/form.git ``` - > [!NOTE] > Your `tanstack` directory should look like this: > @@ -50,23 +68,18 @@ git clone git@github.com:TanStack/form.git > | > +-- tanstack.com/ > ``` - > [!WARNING] > Make sure the name of the directory in your local file system matches the name of the project's repo. For example, `tanstack/form` must be cloned into `form` (this is the default) instead of `some-other-name`, because that way, the doc pages won't be found. 3. Enter the `tanstack/tanstack.com` directory, install the dependencies and run the app in dev mode: - ```sh cd tanstack.com pnpm i # The app will run on https://localhost:3000 by default pnpm dev ``` - 4. Now you can visit http://localhost:3000/form/latest/docs/overview in the browser and see the changes you make in `tanstack/form/docs`. - > [!NOTE] > The updated pages need to be manually reloaded in the browser. - > [!WARNING] > You will need to update the `docs/config.json` file (in the project's repo) if you add a new doc page! From 2217bc876d2fb24864bf04cc550f52f4930817fd Mon Sep 17 00:00:00 2001 From: Ender Bonnet Date: Tue, 2 Dec 2025 19:16:37 -0300 Subject: [PATCH 52/65] update readme start-bun --- examples/react/start-bun/README.md | 36 ++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/examples/react/start-bun/README.md b/examples/react/start-bun/README.md index e659b0dd980..bc34dbe6b2b 100644 --- a/examples/react/start-bun/README.md +++ b/examples/react/start-bun/README.md @@ -2,6 +2,17 @@ An optimized production server for TanStack Start applications using Bun, implementing intelligent static asset loading with configurable memory management. +- [TanStack Router Docs](https://tanstack.com/router) +- [Bun Documentation](https://bun.sh/docs) + +## Start a new project based on this example + +To start a new project based on this example, run: + +```sh +npx gitpick TanStack/router/tree/main/examples/react/start-bun start-bun +``` + ## 🚀 Features - **Hybrid Loading Strategy**: Small files are preloaded into memory, large files are served on-demand @@ -150,6 +161,31 @@ The server displays a clear overview of all loaded assets at startup: 🚀 Server running at http://localhost:3000 ``` +## Development + +From your terminal: + +```sh +pnpm install +pnpm dev +``` + +## Build + +Build for production: + +```sh +pnpm build +``` + +## Production + +Start the production server: + +```sh +pnpm start +``` + ## Testing This project uses [Vitest](https://vitest.dev/) for testing. You can run the tests with: From 652ce761d79eb83a7603f24dae5a562556111f7b Mon Sep 17 00:00:00 2001 From: Ender Bonnet Date: Tue, 2 Dec 2025 19:17:16 -0300 Subject: [PATCH 53/65] update readme start-clerk-basic --- examples/react/start-clerk-basic/README.md | 43 +++++++++++++++------- 1 file changed, 29 insertions(+), 14 deletions(-) diff --git a/examples/react/start-clerk-basic/README.md b/examples/react/start-clerk-basic/README.md index 90cba4aac1e..229df6e9fbb 100644 --- a/examples/react/start-clerk-basic/README.md +++ b/examples/react/start-clerk-basic/README.md @@ -1,8 +1,19 @@ -# Welcome to TanStack.com! +# TanStack Start - Clerk Authentication Example -This site is built with TanStack Router! +This site is built with TanStack Router and Clerk Authentication! - [TanStack Router Docs](https://tanstack.com/router) +- [Clerk Documentation](https://clerk.com/docs) + +## Start a new project based on this example + +To start a new project based on this example, run: + +```sh +npx gitpick TanStack/router/tree/main/examples/react/start-clerk-basic start-clerk-basic +``` + +## Deployment It's deployed automagically with Netlify! @@ -17,29 +28,38 @@ pnpm install pnpm dev ``` -This starts your app in development mode, rebuilding assets on file changes. +## Build + +Build for production: + +```sh +pnpm build +``` + +## About This Example + +This example demonstrates: + +- Clerk authentication integration +- Protected routes +- User management +- Authentication UI components ## Editing and previewing the docs of TanStack projects locally The documentations for all TanStack projects except for `React Charts` are hosted on [https://tanstack.com](https://tanstack.com), powered by this TanStack Router app. In production, the markdown doc pages are fetched from the GitHub repos of the projects, but in development they are read from the local file system. - Follow these steps if you want to edit the doc pages of a project (in these steps we'll assume it's [`TanStack/form`](https://github.com/tanstack/form)) and preview them locally : - 1. Create a new directory called `tanstack`. - ```sh mkdir tanstack ``` - 2. Enter the directory and clone this repo and the repo of the project there. - ```sh cd tanstack git clone git@github.com:TanStack/tanstack.com.git git clone git@github.com:TanStack/form.git ``` - > [!NOTE] > Your `tanstack` directory should look like this: > @@ -50,23 +70,18 @@ git clone git@github.com:TanStack/form.git > | > +-- tanstack.com/ > ``` - > [!WARNING] > Make sure the name of the directory in your local file system matches the name of the project's repo. For example, `tanstack/form` must be cloned into `form` (this is the default) instead of `some-other-name`, because that way, the doc pages won't be found. 3. Enter the `tanstack/tanstack.com` directory, install the dependencies and run the app in dev mode: - ```sh cd tanstack.com pnpm i # The app will run on https://localhost:3000 by default pnpm dev ``` - 4. Now you can visit http://localhost:3000/form/latest/docs/overview in the browser and see the changes you make in `tanstack/form/docs`. - > [!NOTE] > The updated pages need to be manually reloaded in the browser. - > [!WARNING] > You will need to update the `docs/config.json` file (in the project's repo) if you add a new doc page! From 0650908f8be1f2a1b7687660caa236e8978308e9 Mon Sep 17 00:00:00 2001 From: Ender Bonnet Date: Tue, 2 Dec 2025 19:17:40 -0300 Subject: [PATCH 54/65] update readme start-convex-trellaux --- .../react/start-convex-trellaux/README.md | 40 ++++++++++++++++--- 1 file changed, 35 insertions(+), 5 deletions(-) diff --git a/examples/react/start-convex-trellaux/README.md b/examples/react/start-convex-trellaux/README.md index 674f06a1fb6..04b18d8178a 100644 --- a/examples/react/start-convex-trellaux/README.md +++ b/examples/react/start-convex-trellaux/README.md @@ -3,21 +3,51 @@ This is a TanStack Start demo using Convex as the database. It is similar to the [start-trellaux](https://github.com/TanStack/router/tree/main/examples/react/start-trellaux) example but uses a cloud Convex deployment instead of an in-memory database. -To run this example: +- [TanStack Router Docs](https://tanstack.com/router) +- [Convex Documentation](https://docs.convex.dev) + +## Start a new project based on this example + +To start a new project based on this example, run: ```sh -pnpm install -pnpm dev +npx gitpick TanStack/router/tree/main/examples/react/start-convex-trellaux start-convex-trellaux ``` -# Convex +## Convex Convex is an open source Reactive backend made by [convex.dev](https://convex.dev/?utm_source=tanstack), a sponsor of TanStack Start. -This example uses Convex with TanStack Query and TanStack Start to provide +This example uses Convex with TanStack Query and TanStack Start to provide: - Typesafe TanStack Query options factories like `convexQuery` for use with `useQuery`, `useSuspenseQuery` etc. - Live-updating queries: updates come in over a WebSocket instead of requiring polling - Automatic query invalidation: when a mutation succeeds all queries it affects update automatically - Selective optimistic update rollback: when a mutation succeeds only its update will be rolled back, with other optimistic updates reapplied - Consistent snapshot reads of database state: /messages will never return a foreign key for a /user that doesn't exist until the next fetch + +## Development + +To run this example: + +```sh +pnpm install +pnpm dev +``` + +## Build + +Build for production: + +```sh +pnpm build +``` + +## About This Example + +This example demonstrates: + +- Convex database integration +- Real-time updates +- Server Functions +- Complex UI state management From 96e1e5118e39f80fd8bb53a4340a86979a5c880d Mon Sep 17 00:00:00 2001 From: Ender Bonnet Date: Tue, 2 Dec 2025 19:17:51 -0300 Subject: [PATCH 55/65] update readme start-counter --- examples/react/start-counter/README.md | 39 +++++++++++++++++--------- 1 file changed, 26 insertions(+), 13 deletions(-) diff --git a/examples/react/start-counter/README.md b/examples/react/start-counter/README.md index 90cba4aac1e..87bfdd2b612 100644 --- a/examples/react/start-counter/README.md +++ b/examples/react/start-counter/README.md @@ -1,9 +1,19 @@ -# Welcome to TanStack.com! +# TanStack Start - Counter Example This site is built with TanStack Router! - [TanStack Router Docs](https://tanstack.com/router) +## Start a new project based on this example + +To start a new project based on this example, run: + +```sh +npx gitpick TanStack/router/tree/main/examples/react/start-counter start-counter +``` + +## Deployment + It's deployed automagically with Netlify! - [Netlify](https://netlify.com/) @@ -17,29 +27,37 @@ pnpm install pnpm dev ``` -This starts your app in development mode, rebuilding assets on file changes. +## Build + +Build for production: + +```sh +pnpm build +``` + +## About This Example + +This example demonstrates: + +- Basic state management +- Server Functions +- Interactive UI components ## Editing and previewing the docs of TanStack projects locally The documentations for all TanStack projects except for `React Charts` are hosted on [https://tanstack.com](https://tanstack.com), powered by this TanStack Router app. In production, the markdown doc pages are fetched from the GitHub repos of the projects, but in development they are read from the local file system. - Follow these steps if you want to edit the doc pages of a project (in these steps we'll assume it's [`TanStack/form`](https://github.com/tanstack/form)) and preview them locally : - 1. Create a new directory called `tanstack`. - ```sh mkdir tanstack ``` - 2. Enter the directory and clone this repo and the repo of the project there. - ```sh cd tanstack git clone git@github.com:TanStack/tanstack.com.git git clone git@github.com:TanStack/form.git ``` - > [!NOTE] > Your `tanstack` directory should look like this: > @@ -50,23 +68,18 @@ git clone git@github.com:TanStack/form.git > | > +-- tanstack.com/ > ``` - > [!WARNING] > Make sure the name of the directory in your local file system matches the name of the project's repo. For example, `tanstack/form` must be cloned into `form` (this is the default) instead of `some-other-name`, because that way, the doc pages won't be found. 3. Enter the `tanstack/tanstack.com` directory, install the dependencies and run the app in dev mode: - ```sh cd tanstack.com pnpm i # The app will run on https://localhost:3000 by default pnpm dev ``` - 4. Now you can visit http://localhost:3000/form/latest/docs/overview in the browser and see the changes you make in `tanstack/form/docs`. - > [!NOTE] > The updated pages need to be manually reloaded in the browser. - > [!WARNING] > You will need to update the `docs/config.json` file (in the project's repo) if you add a new doc page! From 797e415a3ff0ae84a2bec605c4cd665f5a0c827b Mon Sep 17 00:00:00 2001 From: Ender Bonnet Date: Tue, 2 Dec 2025 19:18:15 -0300 Subject: [PATCH 56/65] update readme start-i18n-paraglide --- examples/react/start-i18n-paraglide/README.md | 38 ++++++++++++++----- 1 file changed, 28 insertions(+), 10 deletions(-) diff --git a/examples/react/start-i18n-paraglide/README.md b/examples/react/start-i18n-paraglide/README.md index 8ea0ce8cc18..740d0e83ea2 100644 --- a/examples/react/start-i18n-paraglide/README.md +++ b/examples/react/start-i18n-paraglide/README.md @@ -1,7 +1,18 @@ -# TanStack Start example +# TanStack Start example with Paraglide This example shows how to use Paraglide with TanStack Start. The source code can be found [here](https://github.com/opral/monorepo/tree/main/inlang/packages/paraglide/paraglide-js/examples/tanstack-start). +- [TanStack Router Docs](https://tanstack.com/router) +- [Paraglide Documentation](https://inlang.com/m/gerre34r/library-inlang-paraglideJs) + +## Start a new project based on this example + +To start a new project based on this example, run: + +```sh +npx gitpick TanStack/router/tree/main/examples/react/start-i18n-paraglide start-i18n-paraglide +``` + ## Getting started 1. Init Paraglide JS @@ -19,12 +30,12 @@ import react from '@vitejs/plugin-react' +import { paraglideVitePlugin } from "@inlang/paraglide-js"; export default defineConfig({ - plugins: [ + plugins: [ tanstackStart(), react(), -+ paraglideVitePlugin({ -+ project: "./project.inlang", -+ outdir: "./app/paraglide", ++ paraglideVitePlugin({ ++ project: "./project.inlang", ++ outdir: "./app/paraglide", + outputStructure: "message-modules", + cookieName: "PARAGLIDE_LOCALE", + strategy: ["url", "cookie", "preferredLanguage", "baseLocale"], @@ -36,8 +47,8 @@ export default defineConfig({ + ], + }, + ], -+ }), - ], ++ }), + ], }); ``` @@ -68,7 +79,6 @@ In `server.ts` intercept the request with the paraglideMiddleware. ```ts import { paraglideMiddleware } from './paraglide/server.js' import handler from '@tanstack/react-start/server-entry' - export default { fetch(req: Request): Promise { return paraglideMiddleware(req, ({ request }) => handler.fetch(request)) @@ -180,13 +190,12 @@ export const translatedPathnames = createTranslatedPathnames({ And import into the Paraglide Vite plguin. -# Prerender routes +## Prerender routes You can use use the `localizeHref` function to map the routes to localized versions and import into the pages option in the TanStack Start plugin. For this to work you will need to compile paraglide before the build with the CLI. ```ts import { localizeHref } from './paraglide/runtime' - export const prerenderRoutes = ['/', '/about'].map((path) => ({ path: localizeHref(path), prerender: { @@ -194,3 +203,12 @@ export const prerenderRoutes = ['/', '/about'].map((path) => ({ }, })) ``` + +## About This Example + +This example demonstrates: + +- Multi-language support with Paraglide in TanStack Start +- Server-side translation +- Type-safe translations +- Locale-based routing From 0bacba288528fbff677dafc2af52bdedd1cdc1ab Mon Sep 17 00:00:00 2001 From: Ender Bonnet Date: Tue, 2 Dec 2025 19:18:31 -0300 Subject: [PATCH 57/65] update readme start-tailwind-v4 --- examples/react/start-tailwind-v4/README.md | 42 ++++++++++++++-------- 1 file changed, 28 insertions(+), 14 deletions(-) diff --git a/examples/react/start-tailwind-v4/README.md b/examples/react/start-tailwind-v4/README.md index 90cba4aac1e..22184d93a42 100644 --- a/examples/react/start-tailwind-v4/README.md +++ b/examples/react/start-tailwind-v4/README.md @@ -1,8 +1,19 @@ -# Welcome to TanStack.com! +# TanStack Start - Tailwind CSS v4 Example -This site is built with TanStack Router! +This site is built with TanStack Router and Tailwind CSS v4! - [TanStack Router Docs](https://tanstack.com/router) +- [Tailwind CSS Docs](https://tailwindcss.com/docs) + +## Start a new project based on this example + +To start a new project based on this example, run: + +```sh +npx gitpick TanStack/router/tree/main/examples/react/start-tailwind-v4 start-tailwind-v4 +``` + +## Deployment It's deployed automagically with Netlify! @@ -17,29 +28,37 @@ pnpm install pnpm dev ``` -This starts your app in development mode, rebuilding assets on file changes. +## Build + +Build for production: + +```sh +pnpm build +``` + +## About This Example + +This example demonstrates: + +- Tailwind CSS v4 integration +- Styling with TanStack Start +- CSS configuration ## Editing and previewing the docs of TanStack projects locally The documentations for all TanStack projects except for `React Charts` are hosted on [https://tanstack.com](https://tanstack.com), powered by this TanStack Router app. In production, the markdown doc pages are fetched from the GitHub repos of the projects, but in development they are read from the local file system. - Follow these steps if you want to edit the doc pages of a project (in these steps we'll assume it's [`TanStack/form`](https://github.com/tanstack/form)) and preview them locally : - 1. Create a new directory called `tanstack`. - ```sh mkdir tanstack ``` - 2. Enter the directory and clone this repo and the repo of the project there. - ```sh cd tanstack git clone git@github.com:TanStack/tanstack.com.git git clone git@github.com:TanStack/form.git ``` - > [!NOTE] > Your `tanstack` directory should look like this: > @@ -50,23 +69,18 @@ git clone git@github.com:TanStack/form.git > | > +-- tanstack.com/ > ``` - > [!WARNING] > Make sure the name of the directory in your local file system matches the name of the project's repo. For example, `tanstack/form` must be cloned into `form` (this is the default) instead of `some-other-name`, because that way, the doc pages won't be found. 3. Enter the `tanstack/tanstack.com` directory, install the dependencies and run the app in dev mode: - ```sh cd tanstack.com pnpm i # The app will run on https://localhost:3000 by default pnpm dev ``` - 4. Now you can visit http://localhost:3000/form/latest/docs/overview in the browser and see the changes you make in `tanstack/form/docs`. - > [!NOTE] > The updated pages need to be manually reloaded in the browser. - > [!WARNING] > You will need to update the `docs/config.json` file (in the project's repo) if you add a new doc page! From 609b75759a1309890c86461486c8c1e6fc9c8c05 Mon Sep 17 00:00:00 2001 From: Ender Bonnet Date: Tue, 2 Dec 2025 19:18:46 -0300 Subject: [PATCH 58/65] update readme start-workos --- examples/react/start-workos/README.md | 37 +++++++++++++++++++-------- 1 file changed, 26 insertions(+), 11 deletions(-) diff --git a/examples/react/start-workos/README.md b/examples/react/start-workos/README.md index 705b60eb5e9..d6e222c7bab 100644 --- a/examples/react/start-workos/README.md +++ b/examples/react/start-workos/README.md @@ -3,6 +3,15 @@ This site is built with TanStack Router! An example application demonstrating how to authenticate users with AuthKit and the WorkOS Node SDK. - [TanStack Router Docs](https://tanstack.com/router) +- [WorkOS Documentation](https://workos.com/docs) + +## Start a new project based on this example + +To start a new project based on this example, run: + +```sh +npx gitpick TanStack/router/tree/main/examples/react/start-workos start-workos +``` ## Prerequisites @@ -11,35 +20,41 @@ You will need a [WorkOS account](https://dashboard.workos.com/signup). ## Running the example 1. In the [WorkOS dashboard](https://dashboard.workos.com), click on the User Management tile and set up the [sign-in callback redirect](https://workos.com/docs/user-management/1-configure-your-project/configure-a-redirect-uri) as `http://localhost:3000/api/auth/callback`. Once completed, set the app homepage URL to `http://localhost:3000`. - > [!NOTE] > If you already have set up an application in your WorkOS dashboard, then you can simply head to the _Redirects_ tab and add a new redirect URI. - 2. After creating the redirect URI, navigate to the API keys tab and copy the _Client ID_ and the _Secret Key_. Rename the `.env.example` file to `.env` and supply your Client ID and API key as environment variables. - 3. Additionally, create a cookie password as the private key used to encrypt the session cookie. Copy the output into the environment variable `WORKOS_COOKIE_PASSWORD`. - It has to be at least 32 characters long. You can use https://1password.com/password-generator/ to generate strong passwords. - 4. Verify your `.env.local` file has the following variables filled. - ```bash WORKOS_CLIENT_ID= WORKOS_API_KEY= WORKOS_COOKIE_PASSWORD= WORKOS_REDIRECT_URI=http://localhost:3000/callback ``` - `WORKOS_COOKIE_PASSWORD` is the private key used to encrypt the session cookie. It has to be at least 32 characters long. You can use the [1Password generator](https://1password.com/password-generator/) or the `openssl` library to generate a strong password via the command line: - ```bash openssl rand -base64 24 ``` - To use the `signOut` method, you'll need to set a default Logout URI in your WorkOS dashboard settings under "Redirects". - 5. Run the following command and navigate to [http://localhost:3000](http://localhost:3000). - ```bash pnpm dev ``` + +## Build + +Build for production: + +```sh +pnpm build +``` + +## About This Example + +This example demonstrates: + +- WorkOS authentication integration +- AuthKit usage +- Protected routes +- User session management From 717cb2fe136927210a26e86a7ca68f6c620afe89 Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Wed, 3 Dec 2025 05:22:25 +0000 Subject: [PATCH 59/65] ci: apply automated fixes --- examples/react/start-basic-rsc/README.md | 16 ++++++++++++---- examples/react/start-basic-static/README.md | 16 ++++++++++++---- examples/react/start-clerk-basic/README.md | 16 ++++++++++++---- examples/react/start-counter/README.md | 16 ++++++++++++---- examples/react/start-tailwind-v4/README.md | 16 ++++++++++++---- examples/react/with-trpc-react-query/README.md | 2 +- 6 files changed, 61 insertions(+), 21 deletions(-) diff --git a/examples/react/start-basic-rsc/README.md b/examples/react/start-basic-rsc/README.md index d63aa8027bd..9554490ccbf 100644 --- a/examples/react/start-basic-rsc/README.md +++ b/examples/react/start-basic-rsc/README.md @@ -49,16 +49,21 @@ This example demonstrates: The documentations for all TanStack projects except for `React Charts` are hosted on [https://tanstack.com](https://tanstack.com), powered by this TanStack Router app. In production, the markdown doc pages are fetched from the GitHub repos of the projects, but in development they are read from the local file system. Follow these steps if you want to edit the doc pages of a project (in these steps we'll assume it's [`TanStack/form`](https://github.com/tanstack/form)) and preview them locally : + 1. Create a new directory called `tanstack`. + ```sh mkdir tanstack ``` + 2. Enter the directory and clone this repo and the repo of the project there. + ```sh cd tanstack git clone git@github.com:TanStack/tanstack.com.git git clone git@github.com:TanStack/form.git ``` + > [!NOTE] > Your `tanstack` directory should look like this: > @@ -69,18 +74,21 @@ git clone git@github.com:TanStack/form.git > | > +-- tanstack.com/ > ``` +> > [!WARNING] > Make sure the name of the directory in your local file system matches the name of the project's repo. For example, `tanstack/form` must be cloned into `form` (this is the default) instead of `some-other-name`, because that way, the doc pages won't be found. 3. Enter the `tanstack/tanstack.com` directory, install the dependencies and run the app in dev mode: + ```sh cd tanstack.com pnpm i # The app will run on https://localhost:3000 by default pnpm dev ``` + 4. Now you can visit http://localhost:3000/form/latest/docs/overview in the browser and see the changes you make in `tanstack/form/docs`. -> [!NOTE] -> The updated pages need to be manually reloaded in the browser. -> [!WARNING] -> You will need to update the `docs/config.json` file (in the project's repo) if you add a new doc page! + > [!NOTE] + > The updated pages need to be manually reloaded in the browser. + > [!WARNING] + > You will need to update the `docs/config.json` file (in the project's repo) if you add a new doc page! diff --git a/examples/react/start-basic-static/README.md b/examples/react/start-basic-static/README.md index 376e68dda00..e986064e724 100644 --- a/examples/react/start-basic-static/README.md +++ b/examples/react/start-basic-static/README.md @@ -48,16 +48,21 @@ This example demonstrates: The documentations for all TanStack projects except for `React Charts` are hosted on [https://tanstack.com](https://tanstack.com), powered by this TanStack Router app. In production, the markdown doc pages are fetched from the GitHub repos of the projects, but in development they are read from the local file system. Follow these steps if you want to edit the doc pages of a project (in these steps we'll assume it's [`TanStack/form`](https://github.com/tanstack/form)) and preview them locally : + 1. Create a new directory called `tanstack`. + ```sh mkdir tanstack ``` + 2. Enter the directory and clone this repo and the repo of the project there. + ```sh cd tanstack git clone git@github.com:TanStack/tanstack.com.git git clone git@github.com:TanStack/form.git ``` + > [!NOTE] > Your `tanstack` directory should look like this: > @@ -68,18 +73,21 @@ git clone git@github.com:TanStack/form.git > | > +-- tanstack.com/ > ``` +> > [!WARNING] > Make sure the name of the directory in your local file system matches the name of the project's repo. For example, `tanstack/form` must be cloned into `form` (this is the default) instead of `some-other-name`, because that way, the doc pages won't be found. 3. Enter the `tanstack/tanstack.com` directory, install the dependencies and run the app in dev mode: + ```sh cd tanstack.com pnpm i # The app will run on https://localhost:3000 by default pnpm dev ``` + 4. Now you can visit http://localhost:3000/form/latest/docs/overview in the browser and see the changes you make in `tanstack/form/docs`. -> [!NOTE] -> The updated pages need to be manually reloaded in the browser. -> [!WARNING] -> You will need to update the `docs/config.json` file (in the project's repo) if you add a new doc page! + > [!NOTE] + > The updated pages need to be manually reloaded in the browser. + > [!WARNING] + > You will need to update the `docs/config.json` file (in the project's repo) if you add a new doc page! diff --git a/examples/react/start-clerk-basic/README.md b/examples/react/start-clerk-basic/README.md index 229df6e9fbb..1ea94e87e9e 100644 --- a/examples/react/start-clerk-basic/README.md +++ b/examples/react/start-clerk-basic/README.md @@ -50,16 +50,21 @@ This example demonstrates: The documentations for all TanStack projects except for `React Charts` are hosted on [https://tanstack.com](https://tanstack.com), powered by this TanStack Router app. In production, the markdown doc pages are fetched from the GitHub repos of the projects, but in development they are read from the local file system. Follow these steps if you want to edit the doc pages of a project (in these steps we'll assume it's [`TanStack/form`](https://github.com/tanstack/form)) and preview them locally : + 1. Create a new directory called `tanstack`. + ```sh mkdir tanstack ``` + 2. Enter the directory and clone this repo and the repo of the project there. + ```sh cd tanstack git clone git@github.com:TanStack/tanstack.com.git git clone git@github.com:TanStack/form.git ``` + > [!NOTE] > Your `tanstack` directory should look like this: > @@ -70,18 +75,21 @@ git clone git@github.com:TanStack/form.git > | > +-- tanstack.com/ > ``` +> > [!WARNING] > Make sure the name of the directory in your local file system matches the name of the project's repo. For example, `tanstack/form` must be cloned into `form` (this is the default) instead of `some-other-name`, because that way, the doc pages won't be found. 3. Enter the `tanstack/tanstack.com` directory, install the dependencies and run the app in dev mode: + ```sh cd tanstack.com pnpm i # The app will run on https://localhost:3000 by default pnpm dev ``` + 4. Now you can visit http://localhost:3000/form/latest/docs/overview in the browser and see the changes you make in `tanstack/form/docs`. -> [!NOTE] -> The updated pages need to be manually reloaded in the browser. -> [!WARNING] -> You will need to update the `docs/config.json` file (in the project's repo) if you add a new doc page! + > [!NOTE] + > The updated pages need to be manually reloaded in the browser. + > [!WARNING] + > You will need to update the `docs/config.json` file (in the project's repo) if you add a new doc page! diff --git a/examples/react/start-counter/README.md b/examples/react/start-counter/README.md index 87bfdd2b612..1c5d7798527 100644 --- a/examples/react/start-counter/README.md +++ b/examples/react/start-counter/README.md @@ -48,16 +48,21 @@ This example demonstrates: The documentations for all TanStack projects except for `React Charts` are hosted on [https://tanstack.com](https://tanstack.com), powered by this TanStack Router app. In production, the markdown doc pages are fetched from the GitHub repos of the projects, but in development they are read from the local file system. Follow these steps if you want to edit the doc pages of a project (in these steps we'll assume it's [`TanStack/form`](https://github.com/tanstack/form)) and preview them locally : + 1. Create a new directory called `tanstack`. + ```sh mkdir tanstack ``` + 2. Enter the directory and clone this repo and the repo of the project there. + ```sh cd tanstack git clone git@github.com:TanStack/tanstack.com.git git clone git@github.com:TanStack/form.git ``` + > [!NOTE] > Your `tanstack` directory should look like this: > @@ -68,18 +73,21 @@ git clone git@github.com:TanStack/form.git > | > +-- tanstack.com/ > ``` +> > [!WARNING] > Make sure the name of the directory in your local file system matches the name of the project's repo. For example, `tanstack/form` must be cloned into `form` (this is the default) instead of `some-other-name`, because that way, the doc pages won't be found. 3. Enter the `tanstack/tanstack.com` directory, install the dependencies and run the app in dev mode: + ```sh cd tanstack.com pnpm i # The app will run on https://localhost:3000 by default pnpm dev ``` + 4. Now you can visit http://localhost:3000/form/latest/docs/overview in the browser and see the changes you make in `tanstack/form/docs`. -> [!NOTE] -> The updated pages need to be manually reloaded in the browser. -> [!WARNING] -> You will need to update the `docs/config.json` file (in the project's repo) if you add a new doc page! + > [!NOTE] + > The updated pages need to be manually reloaded in the browser. + > [!WARNING] + > You will need to update the `docs/config.json` file (in the project's repo) if you add a new doc page! diff --git a/examples/react/start-tailwind-v4/README.md b/examples/react/start-tailwind-v4/README.md index 22184d93a42..b1a9418939d 100644 --- a/examples/react/start-tailwind-v4/README.md +++ b/examples/react/start-tailwind-v4/README.md @@ -49,16 +49,21 @@ This example demonstrates: The documentations for all TanStack projects except for `React Charts` are hosted on [https://tanstack.com](https://tanstack.com), powered by this TanStack Router app. In production, the markdown doc pages are fetched from the GitHub repos of the projects, but in development they are read from the local file system. Follow these steps if you want to edit the doc pages of a project (in these steps we'll assume it's [`TanStack/form`](https://github.com/tanstack/form)) and preview them locally : + 1. Create a new directory called `tanstack`. + ```sh mkdir tanstack ``` + 2. Enter the directory and clone this repo and the repo of the project there. + ```sh cd tanstack git clone git@github.com:TanStack/tanstack.com.git git clone git@github.com:TanStack/form.git ``` + > [!NOTE] > Your `tanstack` directory should look like this: > @@ -69,18 +74,21 @@ git clone git@github.com:TanStack/form.git > | > +-- tanstack.com/ > ``` +> > [!WARNING] > Make sure the name of the directory in your local file system matches the name of the project's repo. For example, `tanstack/form` must be cloned into `form` (this is the default) instead of `some-other-name`, because that way, the doc pages won't be found. 3. Enter the `tanstack/tanstack.com` directory, install the dependencies and run the app in dev mode: + ```sh cd tanstack.com pnpm i # The app will run on https://localhost:3000 by default pnpm dev ``` + 4. Now you can visit http://localhost:3000/form/latest/docs/overview in the browser and see the changes you make in `tanstack/form/docs`. -> [!NOTE] -> The updated pages need to be manually reloaded in the browser. -> [!WARNING] -> You will need to update the `docs/config.json` file (in the project's repo) if you add a new doc page! + > [!NOTE] + > The updated pages need to be manually reloaded in the browser. + > [!WARNING] + > You will need to update the `docs/config.json` file (in the project's repo) if you add a new doc page! diff --git a/examples/react/with-trpc-react-query/README.md b/examples/react/with-trpc-react-query/README.md index cf848872735..f9e923032ec 100644 --- a/examples/react/with-trpc-react-query/README.md +++ b/examples/react/with-trpc-react-query/README.md @@ -12,7 +12,7 @@ To start a new project based on this example, run: ```sh npx gitpick TanStack/router/tree/main/examples/react/with-trpc-react-query with-trpc-react-query -``` +``` ## Getting Started From 9b2406b6f53fc1fd4ef425d7b0a2968fadb64bd5 Mon Sep 17 00:00:00 2001 From: Sean Cassiere <33615041+SeanCassiere@users.noreply.github.com> Date: Sat, 6 Dec 2025 11:47:50 +1300 Subject: [PATCH 60/65] chore(examples): selectively apply suggestions from CodeRabbit Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> --- examples/react/i18n-paraglide/README.md | 2 +- examples/react/router-monorepo-simple-lazy/README.md | 2 +- examples/react/start-i18n-paraglide/README.md | 2 +- examples/react/start-trellaux/README.md | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/examples/react/i18n-paraglide/README.md b/examples/react/i18n-paraglide/README.md index 7ec9d47bf6e..314c6520ed2 100644 --- a/examples/react/i18n-paraglide/README.md +++ b/examples/react/i18n-paraglide/README.md @@ -1,6 +1,6 @@ # TanStack Router - i18n with Paraglide Example -This example shows how to use Paraglide with TanStack Router. The source code can be found [here](https://github.com/opral/monorepo/tree/main/inlang/packages/paraglide/paraglide-js/examples/tanstack-router). +This example shows how to use Paraglide with TanStack Router. The source code can be found [in the Paraglide monorepo](https://github.com/opral/monorepo/tree/main/inlang/packages/paraglide/paraglide-js/examples/tanstack-router). - [TanStack Router Docs](https://tanstack.com/router) - [Paraglide Documentation](https://inlang.com/m/gerre34r/library-inlang-paraglideJs) diff --git a/examples/react/router-monorepo-simple-lazy/README.md b/examples/react/router-monorepo-simple-lazy/README.md index 0136f42efdb..6c3b4003a32 100644 --- a/examples/react/router-monorepo-simple-lazy/README.md +++ b/examples/react/router-monorepo-simple-lazy/README.md @@ -67,7 +67,7 @@ This example demonstrates: ## How lazy loading works -Each feature exports a `createLazyRoute` function that returns a lazy route. This lazy route is then used in the router map to bind the lazy route to the actual route. This allows library to define their component, pending, error and nod found components directly. +Each feature exports a `createLazyRoute` function that returns a lazy route. This lazy route is then used in the router map to bind the lazy route to the actual route. This allows the library to define their component, pending, error and not found components directly. The types on the ([`packages/app/src/main.tsx`](./packages/app/src/main.tsx)) are used to map the route to the lazy route, and enforce they match the route path. diff --git a/examples/react/start-i18n-paraglide/README.md b/examples/react/start-i18n-paraglide/README.md index 740d0e83ea2..cb1a810df25 100644 --- a/examples/react/start-i18n-paraglide/README.md +++ b/examples/react/start-i18n-paraglide/README.md @@ -1,6 +1,6 @@ # TanStack Start example with Paraglide -This example shows how to use Paraglide with TanStack Start. The source code can be found [here](https://github.com/opral/monorepo/tree/main/inlang/packages/paraglide/paraglide-js/examples/tanstack-start). +This example shows how to use Paraglide with TanStack Start. The source code can be found [in the Paraglide monorepo](https://github.com/opral/monorepo/tree/main/inlang/packages/paraglide/paraglide-js/examples/tanstack-start). - [TanStack Router Docs](https://tanstack.com/router) - [Paraglide Documentation](https://inlang.com/m/gerre34r/library-inlang-paraglideJs) diff --git a/examples/react/start-trellaux/README.md b/examples/react/start-trellaux/README.md index 215cae4ae44..c39574a85ff 100644 --- a/examples/react/start-trellaux/README.md +++ b/examples/react/start-trellaux/README.md @@ -35,7 +35,7 @@ pnpm build A full-featured Trello-like application demonstrating: -- Drag and drop functionality +- Drag-and-drop functionality - Complex state management - Real-time updates - Board, list, and card management From 8b933202567e87b5f9c6876dce4b020b79783d93 Mon Sep 17 00:00:00 2001 From: Ender Bonnet Date: Sat, 6 Dec 2025 09:05:40 -0300 Subject: [PATCH 61/65] address comments --- examples/react/i18n-paraglide/README.md | 4 ++-- examples/react/start-bare/README.md | 4 ++-- examples/react/start-basic-auth/README.md | 5 ++--- examples/react/start-basic-authjs/README.md | 4 ++-- examples/react/start-basic-cloudflare/README.md | 2 +- examples/react/start-basic-react-query/README.md | 2 +- examples/react/start-basic-rsc/README.md | 4 +--- examples/react/start-basic-static/README.md | 2 +- examples/react/start-basic/README.md | 2 +- examples/react/start-bun/README.md | 2 +- examples/react/start-clerk-basic/README.md | 2 +- examples/react/start-convex-trellaux/README.md | 5 ++--- examples/react/start-counter/README.md | 3 +-- examples/react/start-i18n-paraglide/README.md | 2 +- examples/react/start-large/README.md | 4 ++-- examples/react/start-material-ui/README.md | 4 ++-- .../start-streaming-data-from-server-functions/README.md | 4 ++-- examples/react/start-supabase-basic/README.md | 4 ++-- examples/react/start-tailwind-v4/README.md | 2 +- examples/react/start-trellaux/README.md | 5 ++--- 20 files changed, 30 insertions(+), 36 deletions(-) diff --git a/examples/react/i18n-paraglide/README.md b/examples/react/i18n-paraglide/README.md index 314c6520ed2..82bade4f549 100644 --- a/examples/react/i18n-paraglide/README.md +++ b/examples/react/i18n-paraglide/README.md @@ -65,7 +65,7 @@ const router = createRouter({ In `__root.tsx` add a `beforeLoad` hook to check if the user should be redirected and set the html `lang` attribute. -In `server.ts` intercept the request with the paraglideMiddleware. +Intercept the request in `server.ts` with the paraglideMiddleware: ```ts import { paraglideMiddleware } from './paraglide/server.js' @@ -179,7 +179,7 @@ export const translatedPathnames = createTranslatedPathnames({ }) ``` -And import into the Paraglide Vite plguin. +And import into the Paraglide Vite plugin. ## Server side rendering diff --git a/examples/react/start-bare/README.md b/examples/react/start-bare/README.md index 6478d7160b6..8f218785c55 100644 --- a/examples/react/start-bare/README.md +++ b/examples/react/start-bare/README.md @@ -4,7 +4,7 @@ A minimal TanStack Start example demonstrating the bare essentials. - [TanStack Router Docs](https://tanstack.com/router) -## Start a new project +## Start a new project based on this example To start a new project based on this example, run: @@ -12,7 +12,7 @@ To start a new project based on this example, run: npx gitpick TanStack/router/tree/main/examples/react/start-bare start-bare ``` -## Development +## Getting Started From your terminal: diff --git a/examples/react/start-basic-auth/README.md b/examples/react/start-basic-auth/README.md index 35e9e240e19..c590c7a9d3c 100644 --- a/examples/react/start-basic-auth/README.md +++ b/examples/react/start-basic-auth/README.md @@ -4,7 +4,7 @@ A TanStack Start example demonstrating authentication patterns and protected rou - [TanStack Router Docs](https://tanstack.com/router) -## Start a new project +## Start a new project based on this example To start a new project based on this example, run: @@ -12,7 +12,7 @@ To start a new project based on this example, run: npx gitpick TanStack/router/tree/main/examples/react/start-basic-auth start-basic-auth ``` -## Development +## Getting Started From your terminal: @@ -38,7 +38,6 @@ This example demonstrates: - User authentication flow - Protected routes - Login/logout functionality -- Session management - Redirect after authentication ## Editing and previewing the docs of TanStack projects locally diff --git a/examples/react/start-basic-authjs/README.md b/examples/react/start-basic-authjs/README.md index 29d7a7bfe2e..4a908d80695 100644 --- a/examples/react/start-basic-authjs/README.md +++ b/examples/react/start-basic-authjs/README.md @@ -5,7 +5,7 @@ A TanStack Start example demonstrating authentication with Auth.js (NextAuth.js) - [TanStack Router Docs](https://tanstack.com/router) - [Auth.js Documentation](https://authjs.dev/) -## Start a new project +## Start a new project based on this example To start a new project based on this example, run: @@ -23,7 +23,7 @@ cp .env.example .env Edit `.env` and add your authentication provider credentials. -## Development +## Getting Started From your terminal: diff --git a/examples/react/start-basic-cloudflare/README.md b/examples/react/start-basic-cloudflare/README.md index 7a9a453317f..711b60f2d4f 100644 --- a/examples/react/start-basic-cloudflare/README.md +++ b/examples/react/start-basic-cloudflare/README.md @@ -13,7 +13,7 @@ To start a new project based on this example, run: npx gitpick TanStack/router/tree/main/examples/react/start-basic-cloudflare start-basic-cloudflare ``` -## Development +## Getting Started From your terminal: diff --git a/examples/react/start-basic-react-query/README.md b/examples/react/start-basic-react-query/README.md index 87ca06f91c7..77c61c2504d 100644 --- a/examples/react/start-basic-react-query/README.md +++ b/examples/react/start-basic-react-query/README.md @@ -13,7 +13,7 @@ To start a new project based on this example, run: npx gitpick TanStack/router/tree/main/examples/react/start-basic-react-query start-basic-react-query ``` -## Development +## Getting Started From your terminal: diff --git a/examples/react/start-basic-rsc/README.md b/examples/react/start-basic-rsc/README.md index 9554490ccbf..67f88506032 100644 --- a/examples/react/start-basic-rsc/README.md +++ b/examples/react/start-basic-rsc/README.md @@ -18,7 +18,7 @@ It's deployed automagically with Netlify! - [Netlify](https://netlify.com/) -## Development +## Getting Started From your terminal: @@ -41,8 +41,6 @@ This example demonstrates: - React Server Components (RSC) with TanStack Start - Server-side rendering -- Streaming -- Server Functions ## Editing and previewing the docs of TanStack projects locally diff --git a/examples/react/start-basic-static/README.md b/examples/react/start-basic-static/README.md index e986064e724..a6de6ff69b4 100644 --- a/examples/react/start-basic-static/README.md +++ b/examples/react/start-basic-static/README.md @@ -18,7 +18,7 @@ It's deployed automagically with Vercel! - [Vercel](https://vercel.com/) -## Development +## Getting Started From your terminal: diff --git a/examples/react/start-basic/README.md b/examples/react/start-basic/README.md index b2d7a1729ba..e746a1bc8c5 100644 --- a/examples/react/start-basic/README.md +++ b/examples/react/start-basic/README.md @@ -16,7 +16,7 @@ To start a new project based on this example, run: npx gitpick TanStack/router/tree/main/examples/react/start-basic start-basic ``` -## Development +## Getting Started From your terminal: diff --git a/examples/react/start-bun/README.md b/examples/react/start-bun/README.md index bc34dbe6b2b..04920e8796c 100644 --- a/examples/react/start-bun/README.md +++ b/examples/react/start-bun/README.md @@ -161,7 +161,7 @@ The server displays a clear overview of all loaded assets at startup: 🚀 Server running at http://localhost:3000 ``` -## Development +## Getting Started From your terminal: diff --git a/examples/react/start-clerk-basic/README.md b/examples/react/start-clerk-basic/README.md index 1ea94e87e9e..2bb8cd8682d 100644 --- a/examples/react/start-clerk-basic/README.md +++ b/examples/react/start-clerk-basic/README.md @@ -19,7 +19,7 @@ It's deployed automagically with Netlify! - [Netlify](https://netlify.com/) -## Development +## Getting Started From your terminal: diff --git a/examples/react/start-convex-trellaux/README.md b/examples/react/start-convex-trellaux/README.md index 04b18d8178a..1eeee3d50a1 100644 --- a/examples/react/start-convex-trellaux/README.md +++ b/examples/react/start-convex-trellaux/README.md @@ -16,7 +16,7 @@ npx gitpick TanStack/router/tree/main/examples/react/start-convex-trellaux start ## Convex -Convex is an open source Reactive backend made by [convex.dev](https://convex.dev/?utm_source=tanstack), a sponsor of TanStack Start. +Convex is an open-source, reactive backend made by [convex.dev](https://convex.dev/?utm_source=tanstack), a sponsor of TanStack Start. This example uses Convex with TanStack Query and TanStack Start to provide: @@ -26,7 +26,7 @@ This example uses Convex with TanStack Query and TanStack Start to provide: - Selective optimistic update rollback: when a mutation succeeds only its update will be rolled back, with other optimistic updates reapplied - Consistent snapshot reads of database state: /messages will never return a foreign key for a /user that doesn't exist until the next fetch -## Development +## Getting Started To run this example: @@ -49,5 +49,4 @@ This example demonstrates: - Convex database integration - Real-time updates -- Server Functions - Complex UI state management diff --git a/examples/react/start-counter/README.md b/examples/react/start-counter/README.md index 1c5d7798527..c697d1ef649 100644 --- a/examples/react/start-counter/README.md +++ b/examples/react/start-counter/README.md @@ -18,7 +18,7 @@ It's deployed automagically with Netlify! - [Netlify](https://netlify.com/) -## Development +## Getting Started From your terminal: @@ -40,7 +40,6 @@ pnpm build This example demonstrates: - Basic state management -- Server Functions - Interactive UI components ## Editing and previewing the docs of TanStack projects locally diff --git a/examples/react/start-i18n-paraglide/README.md b/examples/react/start-i18n-paraglide/README.md index cb1a810df25..3e6285f2bcb 100644 --- a/examples/react/start-i18n-paraglide/README.md +++ b/examples/react/start-i18n-paraglide/README.md @@ -188,7 +188,7 @@ export const translatedPathnames = createTranslatedPathnames({ }) ``` -And import into the Paraglide Vite plguin. +And import into the Paraglide Vite plugin. ## Prerender routes diff --git a/examples/react/start-large/README.md b/examples/react/start-large/README.md index d5f4966c21c..1da7968e9a6 100644 --- a/examples/react/start-large/README.md +++ b/examples/react/start-large/README.md @@ -4,7 +4,7 @@ A large-scale TanStack Start example demonstrating performance with many routes. - [TanStack Router Docs](https://tanstack.com/router) -## Start a new project +## Start a new project based on this example To start a new project based on this example, run: @@ -12,7 +12,7 @@ To start a new project based on this example, run: npx gitpick TanStack/router/tree/main/examples/react/start-large start-large ``` -## Development +## Getting Started From your terminal: diff --git a/examples/react/start-material-ui/README.md b/examples/react/start-material-ui/README.md index 97e706fdc22..b81e00dd172 100644 --- a/examples/react/start-material-ui/README.md +++ b/examples/react/start-material-ui/README.md @@ -5,7 +5,7 @@ A TanStack Start example demonstrating integration with Material UI (MUI). - [TanStack Router Docs](https://tanstack.com/router) - [Material UI Documentation](https://mui.com/) -## Start a new project +## Start a new project based on this example To start a new project based on this example, run: @@ -13,7 +13,7 @@ To start a new project based on this example, run: npx gitpick TanStack/router/tree/main/examples/react/start-material-ui start-material-ui ``` -## Development +## Getting Started From your terminal: diff --git a/examples/react/start-streaming-data-from-server-functions/README.md b/examples/react/start-streaming-data-from-server-functions/README.md index 09cc04ca83a..a5a61828c5f 100644 --- a/examples/react/start-streaming-data-from-server-functions/README.md +++ b/examples/react/start-streaming-data-from-server-functions/README.md @@ -4,7 +4,7 @@ A TanStack Start example demonstrating streaming data from server functions. - [TanStack Router Docs](https://tanstack.com/router) -## Start a new project +## Start a new project based on this example To start a new project based on this example, run: @@ -12,7 +12,7 @@ To start a new project based on this example, run: npx gitpick TanStack/router/tree/main/examples/react/start-streaming-data-from-server-functions start-streaming-data-from-server-functions ``` -## Development +## Getting Started From your terminal: diff --git a/examples/react/start-supabase-basic/README.md b/examples/react/start-supabase-basic/README.md index ba1e9d7772a..adeac261336 100644 --- a/examples/react/start-supabase-basic/README.md +++ b/examples/react/start-supabase-basic/README.md @@ -5,7 +5,7 @@ A TanStack Start example demonstrating integration with Supabase for authenticat - [TanStack Router Docs](https://tanstack.com/router) - [Supabase Documentation](https://supabase.com/docs) -## Start a new project +## Start a new project based on this example To start a new project based on this example, run: @@ -28,7 +28,7 @@ You'll need to: 2. Get your project URL and anon key from the project settings 3. Update the `.env` file with your credentials -## Development +## Getting Started From your terminal: diff --git a/examples/react/start-tailwind-v4/README.md b/examples/react/start-tailwind-v4/README.md index b1a9418939d..84287238e64 100644 --- a/examples/react/start-tailwind-v4/README.md +++ b/examples/react/start-tailwind-v4/README.md @@ -19,7 +19,7 @@ It's deployed automagically with Netlify! - [Netlify](https://netlify.com/) -## Development +## Getting Started From your terminal: diff --git a/examples/react/start-trellaux/README.md b/examples/react/start-trellaux/README.md index c39574a85ff..22a10de2c3c 100644 --- a/examples/react/start-trellaux/README.md +++ b/examples/react/start-trellaux/README.md @@ -4,7 +4,7 @@ A TanStack Start example demonstrating a Trello-like kanban board application. - [TanStack Router Docs](https://tanstack.com/router) -## Start a new project +## Start a new project based on this example To start a new project based on this example, run: @@ -12,7 +12,7 @@ To start a new project based on this example, run: npx gitpick TanStack/router/tree/main/examples/react/start-trellaux start-trellaux ``` -## Development +## Getting Started From your terminal: @@ -39,4 +39,3 @@ A full-featured Trello-like application demonstrating: - Complex state management - Real-time updates - Board, list, and card management -- Server functions for data persistence From b83de482b6526169836828a640237309682d9c76 Mon Sep 17 00:00:00 2001 From: Ender Bonnet Date: Sat, 6 Dec 2025 09:22:46 -0300 Subject: [PATCH 62/65] clean up editing and preview section --- examples/react/i18n-paraglide/README.md | 2 +- examples/react/start-basic-auth/README.md | 52 ------------------- examples/react/start-basic-rsc/README.md | 48 ----------------- examples/react/start-basic-static/README.md | 49 ----------------- examples/react/start-basic/README.md | 52 ------------------- examples/react/start-clerk-basic/README.md | 49 ----------------- examples/react/start-counter/README.md | 48 ----------------- examples/react/start-i18n-paraglide/README.md | 2 +- examples/react/start-tailwind-v4/README.md | 49 ----------------- 9 files changed, 2 insertions(+), 349 deletions(-) diff --git a/examples/react/i18n-paraglide/README.md b/examples/react/i18n-paraglide/README.md index 82bade4f549..2e8fad9eaf7 100644 --- a/examples/react/i18n-paraglide/README.md +++ b/examples/react/i18n-paraglide/README.md @@ -77,7 +77,7 @@ export default { } ``` -In `__root.tsx` add change the html lang attribute to the current locale. +In `__root.tsx` change the html lang attribute to the current locale. ```tsx import { getLocale } from '../paraglide/runtime.js' diff --git a/examples/react/start-basic-auth/README.md b/examples/react/start-basic-auth/README.md index c590c7a9d3c..4e5ee29b400 100644 --- a/examples/react/start-basic-auth/README.md +++ b/examples/react/start-basic-auth/README.md @@ -39,55 +39,3 @@ This example demonstrates: - Protected routes - Login/logout functionality - Redirect after authentication - -## Editing and previewing the docs of TanStack projects locally - -The documentations for all TanStack projects except for `React Charts` are hosted on [https://tanstack.com](https://tanstack.com), powered by this TanStack Router app. -In production, the markdown doc pages are fetched from the GitHub repos of the projects, but in development they are read from the local file system. - -Follow these steps if you want to edit the doc pages of a project (in these steps we'll assume it's [`TanStack/form`](https://github.com/tanstack/form)) and preview them locally : - -1. Create a new directory called `tanstack`. - -```sh -mkdir tanstack -``` - -2. Enter the directory and clone this repo and the repo of the project there. - -```sh -cd tanstack -git clone git@github.com:TanStack/tanstack.com.git -git clone git@github.com:TanStack/form.git -``` - -> [!NOTE] -> Your `tanstack` directory should look like this: -> -> ``` -> tanstack/ -> | -> +-- form/ -> | -> +-- tanstack.com/ -> ``` - -> [!WARNING] -> Make sure the name of the directory in your local file system matches the name of the project's repo. For example, `tanstack/form` must be cloned into `form` (this is the default) instead of `some-other-name`, because that way, the doc pages won't be found. - -3. Enter the `tanstack/tanstack.com` directory, install the dependencies and run the app in dev mode: - -```sh -cd tanstack.com -pnpm i -# The app will run on https://localhost:3000 by default -pnpm dev -``` - -4. Now you can visit http://localhost:3000/form/latest/docs/overview in the browser and see the changes you make in `tanstack/form/docs`. - -> [!NOTE] -> The updated pages need to be manually reloaded in the browser. - -> [!WARNING] -> You will need to update the `docs/config.json` file (in the project's repo) if you add a new doc page! diff --git a/examples/react/start-basic-rsc/README.md b/examples/react/start-basic-rsc/README.md index 67f88506032..ba75c5522e7 100644 --- a/examples/react/start-basic-rsc/README.md +++ b/examples/react/start-basic-rsc/README.md @@ -42,51 +42,3 @@ This example demonstrates: - React Server Components (RSC) with TanStack Start - Server-side rendering -## Editing and previewing the docs of TanStack projects locally - -The documentations for all TanStack projects except for `React Charts` are hosted on [https://tanstack.com](https://tanstack.com), powered by this TanStack Router app. -In production, the markdown doc pages are fetched from the GitHub repos of the projects, but in development they are read from the local file system. -Follow these steps if you want to edit the doc pages of a project (in these steps we'll assume it's [`TanStack/form`](https://github.com/tanstack/form)) and preview them locally : - -1. Create a new directory called `tanstack`. - -```sh -mkdir tanstack -``` - -2. Enter the directory and clone this repo and the repo of the project there. - -```sh -cd tanstack -git clone git@github.com:TanStack/tanstack.com.git -git clone git@github.com:TanStack/form.git -``` - -> [!NOTE] -> Your `tanstack` directory should look like this: -> -> ``` -> tanstack/ -> | -> +-- form/ -> | -> +-- tanstack.com/ -> ``` -> -> [!WARNING] -> Make sure the name of the directory in your local file system matches the name of the project's repo. For example, `tanstack/form` must be cloned into `form` (this is the default) instead of `some-other-name`, because that way, the doc pages won't be found. - -3. Enter the `tanstack/tanstack.com` directory, install the dependencies and run the app in dev mode: - -```sh -cd tanstack.com -pnpm i -# The app will run on https://localhost:3000 by default -pnpm dev -``` - -4. Now you can visit http://localhost:3000/form/latest/docs/overview in the browser and see the changes you make in `tanstack/form/docs`. - > [!NOTE] - > The updated pages need to be manually reloaded in the browser. - > [!WARNING] - > You will need to update the `docs/config.json` file (in the project's repo) if you add a new doc page! diff --git a/examples/react/start-basic-static/README.md b/examples/react/start-basic-static/README.md index a6de6ff69b4..9f05a926954 100644 --- a/examples/react/start-basic-static/README.md +++ b/examples/react/start-basic-static/README.md @@ -42,52 +42,3 @@ This example demonstrates: - Static Site Generation (SSG) with TanStack Start - Prerendering routes - Static export - -## Editing and previewing the docs of TanStack projects locally - -The documentations for all TanStack projects except for `React Charts` are hosted on [https://tanstack.com](https://tanstack.com), powered by this TanStack Router app. -In production, the markdown doc pages are fetched from the GitHub repos of the projects, but in development they are read from the local file system. -Follow these steps if you want to edit the doc pages of a project (in these steps we'll assume it's [`TanStack/form`](https://github.com/tanstack/form)) and preview them locally : - -1. Create a new directory called `tanstack`. - -```sh -mkdir tanstack -``` - -2. Enter the directory and clone this repo and the repo of the project there. - -```sh -cd tanstack -git clone git@github.com:TanStack/tanstack.com.git -git clone git@github.com:TanStack/form.git -``` - -> [!NOTE] -> Your `tanstack` directory should look like this: -> -> ``` -> tanstack/ -> | -> +-- form/ -> | -> +-- tanstack.com/ -> ``` -> -> [!WARNING] -> Make sure the name of the directory in your local file system matches the name of the project's repo. For example, `tanstack/form` must be cloned into `form` (this is the default) instead of `some-other-name`, because that way, the doc pages won't be found. - -3. Enter the `tanstack/tanstack.com` directory, install the dependencies and run the app in dev mode: - -```sh -cd tanstack.com -pnpm i -# The app will run on https://localhost:3000 by default -pnpm dev -``` - -4. Now you can visit http://localhost:3000/form/latest/docs/overview in the browser and see the changes you make in `tanstack/form/docs`. - > [!NOTE] - > The updated pages need to be manually reloaded in the browser. - > [!WARNING] - > You will need to update the `docs/config.json` file (in the project's repo) if you add a new doc page! diff --git a/examples/react/start-basic/README.md b/examples/react/start-basic/README.md index e746a1bc8c5..e47983c58e1 100644 --- a/examples/react/start-basic/README.md +++ b/examples/react/start-basic/README.md @@ -34,55 +34,3 @@ To build the app for production: ```sh pnpm build ``` - -## Editing and previewing the docs of TanStack projects locally - -The documentations for all TanStack projects except for `React Charts` are hosted on [https://tanstack.com](https://tanstack.com), powered by this TanStack Router app. -In production, the markdown doc pages are fetched from the GitHub repos of the projects, but in development they are read from the local file system. - -Follow these steps if you want to edit the doc pages of a project (in these steps we'll assume it's [`TanStack/form`](https://github.com/tanstack/form)) and preview them locally : - -1. Create a new directory called `tanstack`. - -```sh -mkdir tanstack -``` - -2. Enter the directory and clone this repo and the repo of the project there. - -```sh -cd tanstack -git clone git@github.com:TanStack/tanstack.com.git -git clone git@github.com:TanStack/form.git -``` - -> [!NOTE] -> Your `tanstack` directory should look like this: -> -> ``` -> tanstack/ -> | -> +-- form/ -> | -> +-- tanstack.com/ -> ``` - -> [!WARNING] -> Make sure the name of the directory in your local file system matches the name of the project's repo. For example, `tanstack/form` must be cloned into `form` (this is the default) instead of `some-other-name`, because that way, the doc pages won't be found. - -3. Enter the `tanstack/tanstack.com` directory, install the dependencies and run the app in dev mode: - -```sh -cd tanstack.com -pnpm i -# The app will run on https://localhost:3000 by default -pnpm dev -``` - -4. Now you can visit http://localhost:3000/form/latest/docs/overview in the browser and see the changes you make in `tanstack/form/docs`. - -> [!NOTE] -> The updated pages need to be manually reloaded in the browser. - -> [!WARNING] -> You will need to update the `docs/config.json` file (in the project's repo) if you add a new doc page! diff --git a/examples/react/start-clerk-basic/README.md b/examples/react/start-clerk-basic/README.md index 2bb8cd8682d..896ce58300f 100644 --- a/examples/react/start-clerk-basic/README.md +++ b/examples/react/start-clerk-basic/README.md @@ -44,52 +44,3 @@ This example demonstrates: - Protected routes - User management - Authentication UI components - -## Editing and previewing the docs of TanStack projects locally - -The documentations for all TanStack projects except for `React Charts` are hosted on [https://tanstack.com](https://tanstack.com), powered by this TanStack Router app. -In production, the markdown doc pages are fetched from the GitHub repos of the projects, but in development they are read from the local file system. -Follow these steps if you want to edit the doc pages of a project (in these steps we'll assume it's [`TanStack/form`](https://github.com/tanstack/form)) and preview them locally : - -1. Create a new directory called `tanstack`. - -```sh -mkdir tanstack -``` - -2. Enter the directory and clone this repo and the repo of the project there. - -```sh -cd tanstack -git clone git@github.com:TanStack/tanstack.com.git -git clone git@github.com:TanStack/form.git -``` - -> [!NOTE] -> Your `tanstack` directory should look like this: -> -> ``` -> tanstack/ -> | -> +-- form/ -> | -> +-- tanstack.com/ -> ``` -> -> [!WARNING] -> Make sure the name of the directory in your local file system matches the name of the project's repo. For example, `tanstack/form` must be cloned into `form` (this is the default) instead of `some-other-name`, because that way, the doc pages won't be found. - -3. Enter the `tanstack/tanstack.com` directory, install the dependencies and run the app in dev mode: - -```sh -cd tanstack.com -pnpm i -# The app will run on https://localhost:3000 by default -pnpm dev -``` - -4. Now you can visit http://localhost:3000/form/latest/docs/overview in the browser and see the changes you make in `tanstack/form/docs`. - > [!NOTE] - > The updated pages need to be manually reloaded in the browser. - > [!WARNING] - > You will need to update the `docs/config.json` file (in the project's repo) if you add a new doc page! diff --git a/examples/react/start-counter/README.md b/examples/react/start-counter/README.md index c697d1ef649..a040ef149eb 100644 --- a/examples/react/start-counter/README.md +++ b/examples/react/start-counter/README.md @@ -42,51 +42,3 @@ This example demonstrates: - Basic state management - Interactive UI components -## Editing and previewing the docs of TanStack projects locally - -The documentations for all TanStack projects except for `React Charts` are hosted on [https://tanstack.com](https://tanstack.com), powered by this TanStack Router app. -In production, the markdown doc pages are fetched from the GitHub repos of the projects, but in development they are read from the local file system. -Follow these steps if you want to edit the doc pages of a project (in these steps we'll assume it's [`TanStack/form`](https://github.com/tanstack/form)) and preview them locally : - -1. Create a new directory called `tanstack`. - -```sh -mkdir tanstack -``` - -2. Enter the directory and clone this repo and the repo of the project there. - -```sh -cd tanstack -git clone git@github.com:TanStack/tanstack.com.git -git clone git@github.com:TanStack/form.git -``` - -> [!NOTE] -> Your `tanstack` directory should look like this: -> -> ``` -> tanstack/ -> | -> +-- form/ -> | -> +-- tanstack.com/ -> ``` -> -> [!WARNING] -> Make sure the name of the directory in your local file system matches the name of the project's repo. For example, `tanstack/form` must be cloned into `form` (this is the default) instead of `some-other-name`, because that way, the doc pages won't be found. - -3. Enter the `tanstack/tanstack.com` directory, install the dependencies and run the app in dev mode: - -```sh -cd tanstack.com -pnpm i -# The app will run on https://localhost:3000 by default -pnpm dev -``` - -4. Now you can visit http://localhost:3000/form/latest/docs/overview in the browser and see the changes you make in `tanstack/form/docs`. - > [!NOTE] - > The updated pages need to be manually reloaded in the browser. - > [!WARNING] - > You will need to update the `docs/config.json` file (in the project's repo) if you add a new doc page! diff --git a/examples/react/start-i18n-paraglide/README.md b/examples/react/start-i18n-paraglide/README.md index 3e6285f2bcb..20ec63a09e6 100644 --- a/examples/react/start-i18n-paraglide/README.md +++ b/examples/react/start-i18n-paraglide/README.md @@ -86,7 +86,7 @@ export default { } ``` -In `__root.tsx` add change the html lang attribute to the current locale. +In `__root.tsx` change the html lang attribute to the current locale. ```tsx import { getLocale } from '../paraglide/runtime.js' diff --git a/examples/react/start-tailwind-v4/README.md b/examples/react/start-tailwind-v4/README.md index 84287238e64..a3b30cb6d9a 100644 --- a/examples/react/start-tailwind-v4/README.md +++ b/examples/react/start-tailwind-v4/README.md @@ -43,52 +43,3 @@ This example demonstrates: - Tailwind CSS v4 integration - Styling with TanStack Start - CSS configuration - -## Editing and previewing the docs of TanStack projects locally - -The documentations for all TanStack projects except for `React Charts` are hosted on [https://tanstack.com](https://tanstack.com), powered by this TanStack Router app. -In production, the markdown doc pages are fetched from the GitHub repos of the projects, but in development they are read from the local file system. -Follow these steps if you want to edit the doc pages of a project (in these steps we'll assume it's [`TanStack/form`](https://github.com/tanstack/form)) and preview them locally : - -1. Create a new directory called `tanstack`. - -```sh -mkdir tanstack -``` - -2. Enter the directory and clone this repo and the repo of the project there. - -```sh -cd tanstack -git clone git@github.com:TanStack/tanstack.com.git -git clone git@github.com:TanStack/form.git -``` - -> [!NOTE] -> Your `tanstack` directory should look like this: -> -> ``` -> tanstack/ -> | -> +-- form/ -> | -> +-- tanstack.com/ -> ``` -> -> [!WARNING] -> Make sure the name of the directory in your local file system matches the name of the project's repo. For example, `tanstack/form` must be cloned into `form` (this is the default) instead of `some-other-name`, because that way, the doc pages won't be found. - -3. Enter the `tanstack/tanstack.com` directory, install the dependencies and run the app in dev mode: - -```sh -cd tanstack.com -pnpm i -# The app will run on https://localhost:3000 by default -pnpm dev -``` - -4. Now you can visit http://localhost:3000/form/latest/docs/overview in the browser and see the changes you make in `tanstack/form/docs`. - > [!NOTE] - > The updated pages need to be manually reloaded in the browser. - > [!WARNING] - > You will need to update the `docs/config.json` file (in the project's repo) if you add a new doc page! From a456bb7f0a211b21308355f0e166b4a801a404bd Mon Sep 17 00:00:00 2001 From: Sean Cassiere <33615041+SeanCassiere@users.noreply.github.com> Date: Sun, 7 Dec 2025 01:33:06 +1300 Subject: [PATCH 63/65] Apply suggestions from code review Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> --- examples/react/i18n-paraglide/README.md | 2 +- examples/react/start-i18n-paraglide/README.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/react/i18n-paraglide/README.md b/examples/react/i18n-paraglide/README.md index 2e8fad9eaf7..990b63a548e 100644 --- a/examples/react/i18n-paraglide/README.md +++ b/examples/react/i18n-paraglide/README.md @@ -187,7 +187,7 @@ For server side rendering, check out the [TanStack Start guide](https://github.c ## Prerender routes -You can use use the `localizeHref` function to map the routes to localized versions and import into the pages option in the TanStack Start plugin. For this to work you will need to compile paraglide before the build with the CLI. +You can use the `localizeHref` function to map the routes to localized versions and import into the pages option in the TanStack Start plugin. For this to work you will need to compile paraglide before the build with the CLI. ```ts import { localizeHref } from './paraglide/runtime' diff --git a/examples/react/start-i18n-paraglide/README.md b/examples/react/start-i18n-paraglide/README.md index 20ec63a09e6..f1aa91f5184 100644 --- a/examples/react/start-i18n-paraglide/README.md +++ b/examples/react/start-i18n-paraglide/README.md @@ -192,7 +192,7 @@ And import into the Paraglide Vite plugin. ## Prerender routes -You can use use the `localizeHref` function to map the routes to localized versions and import into the pages option in the TanStack Start plugin. For this to work you will need to compile paraglide before the build with the CLI. +You can use the `localizeHref` function to map the routes to localized versions and import into the pages option in the TanStack Start plugin. For this to work you will need to compile paraglide before the build with the CLI. ```ts import { localizeHref } from './paraglide/runtime' From 27ac8dfe7a9f926aee01f8558304b8f53870fbfe Mon Sep 17 00:00:00 2001 From: Ender Bonnet Date: Sat, 6 Dec 2025 09:33:29 -0300 Subject: [PATCH 64/65] fix duplicated use --- examples/react/i18n-paraglide/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/react/i18n-paraglide/README.md b/examples/react/i18n-paraglide/README.md index 990b63a548e..4dac51934f4 100644 --- a/examples/react/i18n-paraglide/README.md +++ b/examples/react/i18n-paraglide/README.md @@ -181,9 +181,9 @@ export const translatedPathnames = createTranslatedPathnames({ And import into the Paraglide Vite plugin. -## Server side rendering +## Server-side rendering -For server side rendering, check out the [TanStack Start guide](https://github.com/TanStack/router/tree/main/examples/react/start-i18n-paraglide). +For server-side rendering, check out the [TanStack Start guide](https://github.com/TanStack/router/tree/main/examples/react/start-i18n-paraglide). ## Prerender routes From e35ea17659916d19c9273d0f29720b193555b871 Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Sat, 6 Dec 2025 12:35:22 +0000 Subject: [PATCH 65/65] ci: apply automated fixes --- examples/react/start-basic-rsc/README.md | 1 - examples/react/start-counter/README.md | 1 - 2 files changed, 2 deletions(-) diff --git a/examples/react/start-basic-rsc/README.md b/examples/react/start-basic-rsc/README.md index ba75c5522e7..494e34f03f0 100644 --- a/examples/react/start-basic-rsc/README.md +++ b/examples/react/start-basic-rsc/README.md @@ -41,4 +41,3 @@ This example demonstrates: - React Server Components (RSC) with TanStack Start - Server-side rendering - diff --git a/examples/react/start-counter/README.md b/examples/react/start-counter/README.md index a040ef149eb..7f8a5d283a2 100644 --- a/examples/react/start-counter/README.md +++ b/examples/react/start-counter/README.md @@ -41,4 +41,3 @@ This example demonstrates: - Basic state management - Interactive UI components -