Skip to content

Commit 85bdc37

Browse files
jherrjherr
committed
chore: adding create-start-app
1 parent d8f09cd commit 85bdc37

File tree

7 files changed

+223
-0
lines changed

7 files changed

+223
-0
lines changed

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

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
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-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+
| `npx create-start-app@latest my-app` | Create a new app |
14+
| `npx create-start-app@latest my-app --template file-router` | Create a new file based app |
15+
| `npx create-start-app@latest my-app --template typescript` | Create a new TypeScript app using the Code Router |
16+
| `npx create-start-app@latest my-app --tailwind` | Add Tailwind CSS support |
17+
| `npx create-start-app@latest my-app --framework solid` | Create a Solid app |
18+
| `npx create-start-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+
npx create-start-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+
npx create-start-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-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).
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+
npx create-start-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+
npx create-start-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+
npx create-start-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+
npx create-start-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+
npx create-start-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+
npx create-start-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-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 Router applications.
140+
141+
```bash
142+
npx create-start-app@latest --mcp
143+
```
144+
145+
Shown below is the configuration for MCP support in Cursor.
146+
147+
![MCP Configuration](./images/mcp-configuration.png)
148+
149+
# Contributing
150+
151+
Check out the [Contributing](CONTRIBUTING.md) guide.
152+
153+
# License
154+
155+
MIT

‎cli/create-start-app/images/mcp-configuration.png

62.4 KB
Loading

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

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

‎cli/create-start-app/project.json

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"name": "create-start-app",
3+
"$schema": "../../node_modules/nx/schemas/project-schema.json",
4+
"sourceRoot": "cli/create-start-app/src",
5+
"projectType": "application",
6+
"targets": {
7+
"build": {
8+
"executor": "nx:run-commands",
9+
"options": {
10+
"command": "tsc -p cli/create-start-app/tsconfig.json"
11+
},
12+
"dependsOn": ["^build"]
13+
}
14+
},
15+
"implicitDependencies": ["engine", "templates"]
16+
}

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
#!/usr/bin/env node
2+
import { cli } from 'engine'
3+
4+
cli()

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"extends": "../../tsconfig.json",
3+
"compilerOptions": {
4+
"outDir": "./dist",
5+
"rootDir": "./src"
6+
},
7+
"include": ["./src/**/*.ts"],
8+
"exclude": ["node_modules", "dist"]
9+
}

‎scripts/publish.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,10 @@ await publish({
1212
name: 'create-tsrouter-app',
1313
packageDir: './cli/create-tsrouter-app',
1414
},
15+
{
16+
name: 'create-start-app',
17+
packageDir: './cli/create-start-app',
18+
},
1519
],
1620
branchConfigs: {
1721
main: {

0 commit comments

Comments
 (0)