Skip to content

Commit 044ff1c

Browse files
committedJan 30, 2025·
docs: better quick start
1 parent 00446eb commit 044ff1c

File tree

1 file changed

+44
-13
lines changed

1 file changed

+44
-13
lines changed
 

Diff for: ‎docs/start/framework/react/quick-start.md

+44-13
Original file line numberDiff line numberDiff line change
@@ -3,23 +3,54 @@ id: quick-start
33
title: Quick Start
44
---
55

6-
TanStack Start has load of examples to get you started. Pick one of the examples below to get started!
6+
## Impatient?
7+
8+
If you're impatient, you can clone and run the [Basic](../examples/start-basic) example right away with the following commands:
9+
10+
```bash
11+
npx degit https://github.com/tanstack/router/examples/react/start-basic start-basic
12+
cd start-basic
13+
npm install
14+
npm run dev
15+
```
16+
17+
If you'd like to use a different example, you can replace `start-basic` above with the slug of the example you'd like to use from the list below.
718

8-
1. Play with each example in the embedded stackblitz preview to find the one that feels like a good starting point
9-
2. Click the **Deploy to Netlify** button to both clone and deploy the example to Netlify
10-
3. Or, manually clone and deploy the example to anywhere else you'd like
11-
4. Once you've done this, head back to the [Learn the Basics](../learn-the-basics) guide to learn how to use TanStack Start
19+
Once you've cloned the example you want, head back to the [Learn the Basics](../learn-the-basics) guide to learn how to use TanStack Start!
1220

1321
## Examples
1422

15-
- [Basic](../examples/start-basic)
16-
- [Basic + Auth](../examples/start-basic-auth)
17-
- [Basic + Counter](../examples/start-basic-counter)
18-
- [Basic + React Query](../examples/start-basic-react-query)
19-
- [Clerk Auth](../examples/start-clerk-basic)
20-
- [Convex + Trellaux](../examples/start-convex-trellaux)
21-
- [Supabase](../examples/start-supabase-basic)
22-
- [Trellaux](../examples/start-trellaux)
23+
TanStack Start has load of examples to get you started. Pick one of the examples below to get started!
24+
25+
- [Basic](../examples/start-basic) (start-basic)
26+
- [Basic + Auth](../examples/start-basic-auth) (start-basic-auth)
27+
- [Basic + Counter](../examples/start-basic-counter) (start-basic-counter)
28+
- [Basic + React Query](../examples/start-basic-react-query) (start-basic-react-query)
29+
- [Clerk Auth](../examples/start-clerk-basic) (start-clerk-basic)
30+
- [Convex + Trellaux](../examples/start-convex-trellaux) (start-convex-trellaux)
31+
- [Supabase](../examples/start-supabase-basic) (start-supabase-basic)
32+
- [Trellaux](../examples/start-trellaux) (start-trellaux)
33+
34+
### Stackblitz
35+
36+
Each example above has an embedded stackblitz preview to find the one that feels like a good starting point
37+
38+
### Quick Deploy
39+
40+
To quickly deploy an example, click the **Deploy to Netlify** button on an example's page to both clone and deploy the example to Netlify.
41+
42+
### Manual Deploy
43+
44+
To manually clone and deploy the example to anywhere else you'd like, use the following commands replacing `EXAMPLE_SLUG` with the slug of the example you'd like to use from above:
45+
46+
```bash
47+
npx degit https://github.com/tanstack/router/examples/react/EXAMPLE_SLUG my-new-project
48+
cd my-new-project
49+
npm install
50+
npm run dev
51+
```
52+
53+
Once you've clone or deployed an example, head back to the [Learn the Basics](../learn-the-basics) guide to learn how to use TanStack Start!
2354

2455
## Other Router Examples
2556

0 commit comments

Comments
 (0)
Please sign in to comment.