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 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 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 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 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 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 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 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 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 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 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 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 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 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 diff --git a/examples/react/i18n-paraglide/README.md b/examples/react/i18n-paraglide/README.md index 34227c5d468..4dac51934f4 100644 --- a/examples/react/i18n-paraglide/README.md +++ b/examples/react/i18n-paraglide/README.md @@ -1,6 +1,17 @@ -# 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). +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) + +## 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 @@ -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. +Intercept the request in `server.ts` 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` 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) { @@ -134,8 +179,32 @@ export const translatedPathnames = createTranslatedPathnames({ }) ``` -And import into the Paraglide Vite plguin. +And import into the Paraglide Vite plugin. + +## 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 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 -## Server side rendering +This example demonstrates: -For server side rendering, check out the [TanStack Start guide](https://github.com/TanStack/router/tree/main/examples/react/start-i18n-paraglide). +- Multi-language support with Paraglide +- Type-safe translations +- Locale-based routing +- Language switching +- i18n best practices 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 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 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 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 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 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 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 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 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 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 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 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 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 diff --git a/examples/react/router-monorepo-simple-lazy/README.md b/examples/react/router-monorepo-simple-lazy/README.md index c7a93fff4a1..6c3b4003a32 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 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/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) 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 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 diff --git a/examples/react/start-bare/README.md b/examples/react/start-bare/README.md new file mode 100644 index 00000000000..8f218785c55 --- /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 based on this example + +To start a new project based on this example, run: + +```sh +npx gitpick TanStack/router/tree/main/examples/react/start-bare start-bare +``` + +## Getting Started + +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 +``` diff --git a/examples/react/start-basic-auth/README.md b/examples/react/start-basic-auth/README.md index 90cba4aac1e..4e5ee29b400 100644 --- a/examples/react/start-basic-auth/README.md +++ b/examples/react/start-basic-auth/README.md @@ -1,14 +1,18 @@ -# 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 based on this example -- [Netlify](https://netlify.com/) +To start a new project based on this example, run: -## Development +```sh +npx gitpick TanStack/router/tree/main/examples/react/start-basic-auth start-basic-auth +``` + +## Getting Started From your terminal: @@ -19,54 +23,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`. +## Authentication Features -> [!NOTE] -> The updated pages need to be manually reloaded in the browser. +This example demonstrates: -> [!WARNING] -> You will need to update the `docs/config.json` file (in the project's repo) if you add a new doc page! +- User authentication flow +- Protected routes +- Login/logout functionality +- Redirect after authentication diff --git a/examples/react/start-basic-authjs/README.md b/examples/react/start-basic-authjs/README.md new file mode 100644 index 00000000000..4a908d80695 --- /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 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-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. + +## Getting Started + +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 diff --git a/examples/react/start-basic-cloudflare/README.md b/examples/react/start-basic-cloudflare/README.md index be34d008fcd..711b60f2d4f 100644 --- a/examples/react/start-basic-cloudflare/README.md +++ b/examples/react/start-basic-cloudflare/README.md @@ -1,38 +1,54 @@ -# Start Basic Cloudflare +# TanStack Start - Cloudflare Example -## Getting Started +A TanStack Start example demonstrating deployment to Cloudflare Workers. + +- [TanStack Router Docs](https://tanstack.com/router) +- [Cloudflare Workers Documentation](https://developers.cloudflare.com/workers/) -### Install the dependencies +## Start a new project based on this example -```bash -pnpm i +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 +## Getting Started + +From your terminal: -```bash +```sh +pnpm install pnpm dev ``` -### Build for Production +This starts your app in development mode, rebuilding assets on file changes. + +## Build -```bash +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 +57,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.) diff --git a/examples/react/start-basic-react-query/README.md b/examples/react/start-basic-react-query/README.md index 90cba4aac1e..77c61c2504d 100644 --- a/examples/react/start-basic-react-query/README.md +++ b/examples/react/start-basic-react-query/README.md @@ -1,14 +1,19 @@ -# 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: -## Development +```sh +npx gitpick TanStack/router/tree/main/examples/react/start-basic-react-query start-basic-react-query +``` + +## Getting Started From your terminal: @@ -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 diff --git a/examples/react/start-basic-rsc/README.md b/examples/react/start-basic-rsc/README.md index 90cba4aac1e..494e34f03f0 100644 --- a/examples/react/start-basic-rsc/README.md +++ b/examples/react/start-basic-rsc/README.md @@ -1,72 +1,43 @@ -# 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) -It's deployed automagically with Netlify! - -- [Netlify](https://netlify.com/) +## Start a new project based on this example -## Development - -From your terminal: +To start a new project based on this example, run: ```sh -pnpm install -pnpm dev +npx gitpick TanStack/router/tree/main/examples/react/start-basic-rsc start-basic-rsc ``` -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. +## Deployment -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 : +It's deployed automagically with Netlify! -1. Create a new directory called `tanstack`. +- [Netlify](https://netlify.com/) -```sh -mkdir tanstack -``` +## Getting Started -2. Enter the directory and clone this repo and the repo of the project there. +From your terminal: ```sh -cd tanstack -git clone git@github.com:TanStack/tanstack.com.git -git clone git@github.com:TanStack/form.git +pnpm install +pnpm dev ``` -> [!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: +Build 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`. +## About This Example -> [!NOTE] -> The updated pages need to be manually reloaded in the browser. +This example demonstrates: -> [!WARNING] -> You will need to update the `docs/config.json` file (in the project's repo) if you add a new doc page! +- React Server Components (RSC) with TanStack Start +- Server-side rendering diff --git a/examples/react/start-basic-static/README.md b/examples/react/start-basic-static/README.md index eb580a5bf88..9f05a926954 100644 --- a/examples/react/start-basic-static/README.md +++ b/examples/react/start-basic-static/README.md @@ -1,72 +1,44 @@ -# Welcome to TanStack.com! +# TanStack Start - Static Example This site is built with TanStack Router! - [TanStack Router Docs](https://tanstack.com/router) -It's deployed automagically with Vercel! - -- [Vercel](https://vercel.com/) +## Start a new project based on this example -## Development - -From your terminal: +To start a new project based on this example, run: ```sh -pnpm install -pnpm dev +npx gitpick TanStack/router/tree/main/examples/react/start-basic-static start-basic-static ``` -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. +## Deployment -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 : +It's deployed automagically with Vercel! -1. Create a new directory called `tanstack`. +- [Vercel](https://vercel.com/) -```sh -mkdir tanstack -``` +## Getting Started -2. Enter the directory and clone this repo and the repo of the project there. +From your terminal: ```sh -cd tanstack -git clone git@github.com:TanStack/tanstack.com.git -git clone git@github.com:TanStack/form.git +pnpm install +pnpm dev ``` -> [!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: +Build 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`. +## About This Example -> [!NOTE] -> The updated pages need to be manually reloaded in the browser. +This example demonstrates: -> [!WARNING] -> You will need to update the `docs/config.json` file (in the project's repo) if you add a new doc page! +- Static Site Generation (SSG) with TanStack Start +- Prerendering routes +- Static export diff --git a/examples/react/start-basic/README.md b/examples/react/start-basic/README.md index 90cba4aac1e..e47983c58e1 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,65 +8,29 @@ It's deployed automagically with Netlify! - [Netlify](https://netlify.com/) -## Development +## Start a new project based on this example -From your terminal: +To start a new project based on this example, run: ```sh -pnpm install -pnpm dev +npx gitpick TanStack/router/tree/main/examples/react/start-basic start-basic ``` -This starts your app in development mode, rebuilding assets on file changes. - -## Editing and previewing the docs of TanStack projects locally +## Getting Started -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. +From your terminal: ```sh -cd tanstack -git clone git@github.com:TanStack/tanstack.com.git -git clone git@github.com:TanStack/form.git +pnpm install +pnpm dev ``` -> [!NOTE] -> Your `tanstack` directory should look like this: -> -> ``` -> tanstack/ -> | -> +-- form/ -> | -> +-- tanstack.com/ -> ``` +This starts your app in development mode, rebuilding assets on file changes. -> [!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. +## Build -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`. - -> [!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-bun/README.md b/examples/react/start-bun/README.md index e659b0dd980..04920e8796c 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 ``` +## Getting Started + +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: diff --git a/examples/react/start-clerk-basic/README.md b/examples/react/start-clerk-basic/README.md index 90cba4aac1e..896ce58300f 100644 --- a/examples/react/start-clerk-basic/README.md +++ b/examples/react/start-clerk-basic/README.md @@ -1,72 +1,46 @@ -# 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) -It's deployed automagically with Netlify! - -- [Netlify](https://netlify.com/) +## Start a new project based on this example -## Development - -From your terminal: +To start a new project based on this example, run: ```sh -pnpm install -pnpm dev +npx gitpick TanStack/router/tree/main/examples/react/start-clerk-basic start-clerk-basic ``` -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. +## Deployment -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 : +It's deployed automagically with Netlify! -1. Create a new directory called `tanstack`. +- [Netlify](https://netlify.com/) -```sh -mkdir tanstack -``` +## Getting Started -2. Enter the directory and clone this repo and the repo of the project there. +From your terminal: ```sh -cd tanstack -git clone git@github.com:TanStack/tanstack.com.git -git clone git@github.com:TanStack/form.git +pnpm install +pnpm dev ``` -> [!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: +Build 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`. +## About This Example -> [!NOTE] -> The updated pages need to be manually reloaded in the browser. +This example demonstrates: -> [!WARNING] -> You will need to update the `docs/config.json` file (in the project's repo) if you add a new doc page! +- Clerk authentication integration +- Protected routes +- User management +- Authentication UI components diff --git a/examples/react/start-convex-trellaux/README.md b/examples/react/start-convex-trellaux/README.md index 674f06a1fb6..1eeee3d50a1 100644 --- a/examples/react/start-convex-trellaux/README.md +++ b/examples/react/start-convex-trellaux/README.md @@ -3,21 +3,50 @@ 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. +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 + +## Getting Started + +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 +- Complex UI state management diff --git a/examples/react/start-counter/README.md b/examples/react/start-counter/README.md index 90cba4aac1e..7f8a5d283a2 100644 --- a/examples/react/start-counter/README.md +++ b/examples/react/start-counter/README.md @@ -1,72 +1,43 @@ -# Welcome to TanStack.com! +# TanStack Start - Counter Example This site is built with TanStack Router! - [TanStack Router Docs](https://tanstack.com/router) -It's deployed automagically with Netlify! - -- [Netlify](https://netlify.com/) +## Start a new project based on this example -## Development - -From your terminal: +To start a new project based on this example, run: ```sh -pnpm install -pnpm dev +npx gitpick TanStack/router/tree/main/examples/react/start-counter start-counter ``` -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. +## Deployment -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 : +It's deployed automagically with Netlify! -1. Create a new directory called `tanstack`. +- [Netlify](https://netlify.com/) -```sh -mkdir tanstack -``` +## Getting Started -2. Enter the directory and clone this repo and the repo of the project there. +From your terminal: ```sh -cd tanstack -git clone git@github.com:TanStack/tanstack.com.git -git clone git@github.com:TanStack/form.git +pnpm install +pnpm dev ``` -> [!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: +Build 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`. +## About This Example -> [!NOTE] -> The updated pages need to be manually reloaded in the browser. +This example demonstrates: -> [!WARNING] -> You will need to update the `docs/config.json` file (in the project's repo) if you add a new doc page! +- Basic state management +- Interactive UI components diff --git a/examples/react/start-i18n-paraglide/README.md b/examples/react/start-i18n-paraglide/README.md index 8ea0ce8cc18..f1aa91f5184 100644 --- a/examples/react/start-i18n-paraglide/README.md +++ b/examples/react/start-i18n-paraglide/README.md @@ -1,6 +1,17 @@ -# 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). +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) + +## 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 @@ -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)) @@ -76,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' @@ -178,15 +188,14 @@ export const translatedPathnames = createTranslatedPathnames({ }) ``` -And import into the Paraglide Vite plguin. +And import into the Paraglide Vite plugin. -# 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. +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' - 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 diff --git a/examples/react/start-large/README.md b/examples/react/start-large/README.md new file mode 100644 index 00000000000..1da7968e9a6 --- /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 based on this example + +To start a new project based on this example, run: + +```sh +npx gitpick TanStack/router/tree/main/examples/react/start-large start-large +``` + +## Getting Started + +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. diff --git a/examples/react/start-material-ui/README.md b/examples/react/start-material-ui/README.md new file mode 100644 index 00000000000..b81e00dd172 --- /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 based on this example + +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 +``` + +## Getting Started + +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 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..a5a61828c5f --- /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 based on this example + +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 +``` + +## Getting Started + +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 diff --git a/examples/react/start-supabase-basic/README.md b/examples/react/start-supabase-basic/README.md new file mode 100644 index 00000000000..adeac261336 --- /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 based on this example + +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 + +## Getting Started + +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 diff --git a/examples/react/start-tailwind-v4/README.md b/examples/react/start-tailwind-v4/README.md index 90cba4aac1e..a3b30cb6d9a 100644 --- a/examples/react/start-tailwind-v4/README.md +++ b/examples/react/start-tailwind-v4/README.md @@ -1,72 +1,45 @@ -# 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) -It's deployed automagically with Netlify! - -- [Netlify](https://netlify.com/) +## Start a new project based on this example -## Development - -From your terminal: +To start a new project based on this example, run: ```sh -pnpm install -pnpm dev +npx gitpick TanStack/router/tree/main/examples/react/start-tailwind-v4 start-tailwind-v4 ``` -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. +## Deployment -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 : +It's deployed automagically with Netlify! -1. Create a new directory called `tanstack`. +- [Netlify](https://netlify.com/) -```sh -mkdir tanstack -``` +## Getting Started -2. Enter the directory and clone this repo and the repo of the project there. +From your terminal: ```sh -cd tanstack -git clone git@github.com:TanStack/tanstack.com.git -git clone git@github.com:TanStack/form.git +pnpm install +pnpm dev ``` -> [!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: +Build 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`. +## About This Example -> [!NOTE] -> The updated pages need to be manually reloaded in the browser. +This example demonstrates: -> [!WARNING] -> You will need to update the `docs/config.json` file (in the project's repo) if you add a new doc page! +- Tailwind CSS v4 integration +- Styling with TanStack Start +- CSS configuration diff --git a/examples/react/start-trellaux/README.md b/examples/react/start-trellaux/README.md index d95778ee4e4..22a10de2c3c 100644 --- a/examples/react/start-trellaux/README.md +++ b/examples/react/start-trellaux/README.md @@ -1,8 +1,41 @@ -# 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 based on this example + +To start a new project based on this example, run: + +```sh +npx gitpick TanStack/router/tree/main/examples/react/start-trellaux start-trellaux +``` + +## Getting Started + +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 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 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 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 diff --git a/examples/react/with-trpc-react-query/README.md b/examples/react/with-trpc-react-query/README.md index 115199d292c..f9e923032ec 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 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