Skip to content

Commit 0dedb9f

Browse files
jherrjherr
committed
fix: attempting create-tanstack-app
1 parent f2fb3e1 commit 0dedb9f

File tree

6 files changed

+237
-0
lines changed

6 files changed

+237
-0
lines changed

‎cli/create-tanstack-app/README.md

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
# Create React App for TanStack Router
2+
3+
This CLI application builds Tanstack Router applications that are the functional equivalent of [Create React App](https://create-react-app.dev/).
4+
5+
To help accelerate the migration away from `create-react-app` we created the `create-tanstack-app` CLI which is a plug-n-play replacement for CRA.
6+
7+
## Quick Start
8+
9+
To maintain compatability with `create-react-app` you can build a new application by running:
10+
11+
| Command | Description |
12+
| --------------------------------------------------------------------------------- | ------------------------------------------------- |
13+
| `pnpx create-tanstack-app@latest my-app` | Create a new app |
14+
| `pnpx create-tanstack-app@latest my-app --template file-router` | Create a new file based app |
15+
| `pnpx create-tanstack-app@latest my-app --template typescript` | Create a new TypeScript app using the Code Router |
16+
| `pnpx create-tanstack-app@latest my-app --tailwind` | Add Tailwind CSS support |
17+
| `pnpx create-tanstack-app@latest my-app --framework solid` | Create a Solid app |
18+
| `pnpx create-tanstack-app@latest my-app --framework solid --template file-router` | Create a Solid app with file-router |
19+
20+
If you don't specify a project name, the CLI will walk you through an interactive setup process:
21+
22+
```bash
23+
pnpx create-tanstack-app@latest
24+
```
25+
26+
This will start an interactive CLI that guides you through the setup process, allowing you to choose:
27+
28+
- Project Name
29+
- Router Type (File-based or Code-based routing)
30+
- TypeScript support
31+
- Tailwind CSS integration
32+
- Package manager
33+
- Toolchain
34+
- Git initialization
35+
36+
## Command Line Options
37+
38+
You can also use command line flags to specify your preferences directly:
39+
40+
```bash
41+
pnpx create-tanstack-app@latest my-app --template file-router --tailwind --package-manager pnpm
42+
```
43+
44+
Available options:
45+
46+
- `--template <type>`: Choose between `file-router`, `typescript`, or `javascript`
47+
- `--tailwind`: Enable Tailwind CSS
48+
- `--package-manager`: Specify your preferred package manager (`npm`, `yarn`, `pnpm`, `bun`, or `deno`)
49+
- `--toolchain`: Specify your toolchain solution for formatting/linting (`biome`, `eslint+prettier`)
50+
- `--no-git`: Do not initialize a git repository
51+
- `--add-ons`: Enable add-on selection or specify add-ons to install
52+
53+
When using flags, the CLI will display which options were provided and only prompt for the remaining choices.
54+
55+
## Features
56+
57+
What you'll get is a Vite application that uses TanStack Router. All the files will still be in the same place as in CRA, but you'll get a fully functional Router setup under in `app/main.tsx`.
58+
59+
`create-tanstack-app` is everything you loved about CRA but implemented with modern tools and best practices, on top of the popular TanStack set of libraries. Which includes [@tanstack/react-query](https://tanstack.com/query/latest) and [@tanstack/react-router](https://tanstack.com/router/latest).
60+
61+
## Routing Options
62+
63+
### File Based Routing (Recommended)
64+
65+
File Based Routing is the default option when using the interactive CLI. The location of the home page will be `app/routes/index.tsx`. This approach provides a more intuitive and maintainable way to structure your routes.
66+
67+
To explicitly choose File Based Routing, use:
68+
69+
```bash
70+
pnpx create-tanstack-app@latest my-app --template file-router
71+
```
72+
73+
### Code Based Routing
74+
75+
If you prefer traditional code-based routing, you can select it in the interactive CLI or specify it by using either the `typescript` or `javascript` template:
76+
77+
```bash
78+
pnpx create-tanstack-app@latest my-app --template typescript
79+
```
80+
81+
## Additional Configuration
82+
83+
### TypeScript
84+
85+
- File Based Routing always uses TypeScript
86+
- For Code Based Routing, you can choose between TypeScript and JavaScript
87+
- Enable TypeScript explicitly with `--template typescript`
88+
89+
### Tailwind CSS
90+
91+
Enable Tailwind CSS either through the interactive CLI or by adding the `--tailwind` flag. This will automatically configure [Tailwind V4](https://tailwindcss.com/).
92+
93+
### Package Manager
94+
95+
Choose your preferred package manager (`npm`, `bun`, `yarn`, `pnpm`, or `deno`) either through the interactive CLI or using the `--package-manager` flag.
96+
97+
Extensive documentation on using the TanStack Router, migrating to a File Base Routing approach, as well as integrating [@tanstack/react-query](https://tanstack.com/query/latest) and [@tanstack/store](https://tanstack.com/store/latest) can be found in the generated `README.md` for your project.
98+
99+
### Toolchain
100+
101+
Choose your preferred solution for formatting and linting either through the interactive CLI or using the `--toolchain` flag.
102+
103+
Setting this flag to `biome` will configure it as your toolchain of choice, adding a `biome.json` to the root of the project. Consult the [biome documentation](https://biomejs.dev/guides/getting-started/) for further customization.
104+
105+
Setting this flag to `eslint+prettier` will configure it as your toolchain of choice, adding an `eslint.config.js` and `prettier.config.js` to the root of the project, as well as a `.prettierignore` file. Consult the [eslint documentation](https://eslint.org/docs/latest/) and [prettier documentation](https://prettier.io/docs/) for further customization.
106+
107+
## Add-ons (experimental)
108+
109+
You can enable add-on selection:
110+
111+
```bash
112+
pnpx create-tanstack-app@latest --add-ons
113+
```
114+
115+
This will prompt you to select the add-ons you want to enable during application creation.
116+
117+
You can enable specific add-ons directly by adding a comma separated list of add-on names to the `--add-ons` flag. For example:
118+
119+
```bash
120+
pnpx create-tanstack-app@latest my-app --add-ons shadcn,tanstack-query
121+
```
122+
123+
You can get a list of all available add-ons by running:
124+
125+
```bash
126+
pnpx create-tanstack-app@latest --list-add-ons
127+
```
128+
129+
This will display a list of all available add-ons for React that are compatible with the Code Router.
130+
131+
```bash
132+
pnpx create-tanstack-app@latest --list-add-ons --framework solid --template file-router
133+
```
134+
135+
Will get you a list of all available add-ons for Solid that are compatible with the File Router.
136+
137+
## MCP (Model Context Protocol) Support (experimental)
138+
139+
You can launch the `create-tanstack-app` CLI with the `--mcp` flag to enable MCP support. Use this in your MCP enabled IDE to allow the Agent model to generate TanStack Router applications.
140+
141+
```bash
142+
pnpx create-tanstack-app@latest --mcp
143+
```
144+
145+
Here is the JSON configuration for MCP support in many MCP clients.
146+
147+
```json
148+
{
149+
"mcpServers": {
150+
"create-tanstack-app": {
151+
"command": "pnpx",
152+
"args": ["create-tanstack-app@latest", "--mcp"]
153+
}
154+
}
155+
}
156+
```
157+
158+
# Contributing
159+
160+
Check out the [Contributing](CONTRIBUTING.md) guide.
161+
162+
# License
163+
164+
MIT

‎cli/create-tanstack-app/package.json

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
{
2+
"name": "create-tanstack-app",
3+
"version": "0.10.0-alpha.30",
4+
"description": "Tanstack Application Builder",
5+
"bin": "./dist/index.js",
6+
"type": "module",
7+
"scripts": {
8+
"build": "tsc",
9+
"start": "node dist/index.js"
10+
},
11+
"repository": {
12+
"type": "git",
13+
"url": "https://github.com/TanStack/create-tsrouter-app.git"
14+
},
15+
"homepage": "https://tanstack.com/router",
16+
"funding": {
17+
"type": "github",
18+
"url": "https://github.com/sponsors/tannerlinsley"
19+
},
20+
"keywords": [
21+
"react",
22+
"tanstack",
23+
"router",
24+
"tanstack start",
25+
"create-react-app"
26+
],
27+
"author": "Jack Herrington <[email protected]>",
28+
"license": "MIT",
29+
"packageManager": "[email protected]",
30+
"dependencies": {
31+
"@tanstack/cta-cli": "workspace:*",
32+
"@tanstack/cta-framework-react-cra": "workspace:*",
33+
"@tanstack/cta-framework-solid": "workspace:*"
34+
},
35+
"devDependencies": {
36+
"@types/node": "^22.13.4",
37+
"typescript": "^5.6.3"
38+
}
39+
}

‎cli/create-tanstack-app/src/index.ts

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
#!/usr/bin/env node
2+
import { cli } from '@tanstack/cta-cli'
3+
4+
import { register as registerReactCra } from '@tanstack/cta-framework-react-cra'
5+
import { register as registerSolid } from '@tanstack/cta-framework-solid'
6+
7+
registerReactCra()
8+
registerSolid()
9+
10+
cli({
11+
name: 'create-tanstack-app',
12+
appName: 'TanStack',
13+
defaultTemplate: 'file-router',
14+
})

‎cli/create-tanstack-app/tsconfig.json

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"compilerOptions": {
3+
"target": "ES2020",
4+
"module": "ES2020",
5+
"outDir": "./dist",
6+
"rootDir": "./src",
7+
"strict": true,
8+
"esModuleInterop": true,
9+
"skipLibCheck": true,
10+
"forceConsistentCasingInFileNames": true,
11+
"moduleResolution": "node"
12+
},
13+
"include": ["./src/**/*.ts"],
14+
"exclude": ["node_modules", "dist"]
15+
}

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
"pnpm": {
2929
"overrides": {
3030
"create-start-app": "workspace:*",
31+
"create-tanstack-app": "workspace:*",
3132
"create-tanstack": "workspace:*",
3233
"create-tsrouter-app": "workspace:*",
3334
"@tanstack/cta-cli": "workspace:*",

‎scripts/publish.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,10 @@ await publish({
1616
name: 'create-start-app',
1717
packageDir: './cli/create-start-app',
1818
},
19+
{
20+
name: 'create-tanstack-app',
21+
packageDir: './cli/create-tanstack-app',
22+
},
1923
{
2024
name: 'create-tanstack',
2125
packageDir: './cli/create-tanstack',

0 commit comments

Comments
 (0)