Skip to content

Commit 2989b1d

Browse files
jherrjherr
committed
feat: adding @tanstack/create-start
1 parent 8404ef2 commit 2989b1d

File tree

7 files changed

+220
-0
lines changed

7 files changed

+220
-0
lines changed

‎cli/ts-create-start/README.md

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
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-start` 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+
| `pnpm create @tanstack/start@latest my-app` | Create a new app |
14+
| `pnpm create @tanstack/start@latest my-app --framework solid` | Create a Solid app |
15+
16+
If you don't specify a project name, the CLI will walk you through an interactive setup process:
17+
18+
```bash
19+
pnpm create @tanstack/start@latest
20+
```
21+
22+
This will start an interactive CLI that guides you through the setup process, allowing you to choose:
23+
24+
- Project Name
25+
- Package manager
26+
- Toolchain
27+
- Git initialization
28+
29+
## Command Line Options
30+
31+
You can also use command line flags to specify your preferences directly:
32+
33+
```bash
34+
pnpm create @tanstack/start@latest my-app --tailwind --package-manager pnpm
35+
```
36+
37+
Available options:
38+
39+
- `--package-manager`: Specify your preferred package manager (`npm`, `yarn`, `pnpm`, `bun`, or `deno`)
40+
- `--toolchain`: Specify your toolchain solution for formatting/linting (`biome`, `eslint+prettier`)
41+
- `--no-git`: Do not initialize a git repository
42+
- `--add-ons`: Enable add-on selection or specify add-ons to install
43+
44+
When using flags, the CLI will display which options were provided and only prompt for the remaining choices.
45+
46+
## Features
47+
48+
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`.
49+
50+
`create-start-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).
51+
52+
## Additional Configuration
53+
54+
### Package Manager
55+
56+
Choose your preferred package manager (`npm`, `bun`, `yarn`, `pnpm`, or `deno`) either through the interactive CLI or using the `--package-manager` flag.
57+
58+
Extensive documentation on using the TanStack Start, 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.
59+
60+
### Toolchain
61+
62+
Choose your preferred solution for formatting and linting either through the interactive CLI or using the `--toolchain` flag.
63+
64+
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.
65+
66+
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.
67+
68+
## Add-ons (experimental)
69+
70+
You can enable add-on selection:
71+
72+
```bash
73+
pnpm create @tanstack/start@latest --add-ons
74+
```
75+
76+
This will prompt you to select the add-ons you want to enable during application creation.
77+
78+
You can enable specific add-ons directly by adding a comma separated list of add-on names to the `--add-ons` flag. For example:
79+
80+
```bash
81+
pnpm create @tanstack/start@latest my-app --add-ons shadcn,tanstack-query
82+
```
83+
84+
You can get a list of all available add-ons by running:
85+
86+
```bash
87+
pnpm create @tanstack/start@latest --list-add-ons
88+
```
89+
90+
This will get you a list of all available add-ons for Solid.
91+
92+
```bash
93+
pnpm create @tanstack/start@latest --list-add-ons --framework solid
94+
```
95+
96+
## MCP (Model Context Protocol) Support (experimental)
97+
98+
You can launch the `create-start-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 Start applications.
99+
100+
```bash
101+
pnpm create @tanstack/start@latest --mcp
102+
```
103+
104+
Here is the JSON configuration for MCP support in many MCP clients.
105+
106+
```json
107+
{
108+
"mcpServers": {
109+
"create-start-app": {
110+
"command": "pnpx",
111+
"args": ["create-start-app@latest", "--mcp"]
112+
}
113+
}
114+
}
115+
```
116+
117+
# Contributing
118+
119+
Check out the [Contributing](CONTRIBUTING.md) guide.
120+
121+
# License
122+
123+
MIT

‎cli/ts-create-start/package.json

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
{
2+
"name": "@tanstack/create-start",
3+
"version": "0.17.5",
4+
"description": "Tanstack Start 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/ts-create-start/src/index.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
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: '@tanstack/create-start',
12+
appName: 'TanStack Start',
13+
forcedMode: 'file-router',
14+
forcedAddOns: ['start'],
15+
craCompatible: true,
16+
})

‎cli/ts-create-start/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: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,10 @@
2727
"packageManager": "[email protected]",
2828
"pnpm": {
2929
"overrides": {
30+
"@tanstack/create-start": "workspace:*",
3031
"create-start-app": "workspace:*",
3132
"create-tanstack": "workspace:*",
33+
"create-tanstack-app": "workspace:*",
3234
"create-tsrouter-app": "workspace:*",
3335
"@tanstack/cta-cli": "workspace:*",
3436
"@tanstack/cta-engine": "workspace:*",

‎pnpm-lock.yaml

Lines changed: 21 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎scripts/publish.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,10 @@ const __dirname = fileURLToPath(new URL('.', import.meta.url))
88

99
await publish({
1010
packages: [
11+
{
12+
name: '@tanstack/create-start',
13+
packageDir: './cli/ts-create-start',
14+
},
1115
{
1216
name: 'create-tsrouter-app',
1317
packageDir: './cli/create-tsrouter-app',

0 commit comments

Comments
 (0)