Skip to content

Commit ee8b7c3

Browse files
jherrperiakteon
andauthored
Feat: interactive cli prompts (#12)
* feat: enhance CLI with interactive prompts and improved option handling * feat: add CLI flag logging for template, package manager, and Tailwind options * docs: update README with comprehensive CLI usage guide and routing options * feat: Adding a UI * feat: Adding a UI --------- Co-authored-by: Masum Gökyüz <[email protected]>
1 parent cc10d6a commit ee8b7c3

File tree

4 files changed

+271
-46
lines changed

4 files changed

+271
-46
lines changed

.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,5 @@ app-js-tw
66
app-ts-tw
77
app-fr
88
app-fr-tw
9+
my-app
910
.DS_Store

README.md

Lines changed: 64 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,43 +4,93 @@ This CLI applications builds Tanstack Router applications that are the functiona
44

55
To help accelerate the migration away from `create-react-app` we created the `create-tsrouter-app` CLI which is a plug-n-play replacement for CRA.
66

7-
Instead of:
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-tsrouter-app@latest my-app` | Create a new app |
14+
| `npx create-tsrouter-app@latest my-app --template file-router` | Create a new file based app |
15+
| `npx create-tsrouter-app@latest my-app --template typescript` | Create a new TypeScript app |
16+
| `npx create-tsrouter-app@latest my-app --template javascript` | Create a new JavaScript app |
17+
| `npx create-tsrouter-app@latest my-app --tailwind` | Add Tailwind CSS support |
18+
19+
If you don't specify a project name, the CLI will walk you through an interactive setup process:
820

921
```bash
10-
npx create-react-app my-app
22+
npx create-tsrouter-app@latest
1123
```
1224

13-
You can now run:
25+
This will start an interactive CLI that guides you through the setup process, allowing you to choose:
26+
27+
- Project Name
28+
- Router Type (File-based or Code-based routing)
29+
- TypeScript support
30+
- Tailwind CSS integration
31+
- Package manager
32+
- Git initialization
33+
34+
## Command Line Options
35+
36+
You can also use command line flags to specify your preferences directly:
1437

1538
```bash
16-
npx create-tsrouter-app@latest my-app
39+
npx create-tsrouter-app@latest my-app --template file-router --tailwind --package-manager pnpm
1740
```
1841

19-
Instead of using:
42+
Available options:
43+
44+
- `--template <type>`: Choose between `file-router`, `typescript`, or `javascript`
45+
- `--tailwind`: Enable Tailwind CSS
46+
- `--package-manager`: Specify your preferred package manager (`npm`, `yarn`, `pnpm`, or `bun`)
47+
- `--no-git`: Do not initialize a git repository
48+
49+
When using flags, the CLI will display which options were provided and only prompt for the remaining choices.
50+
51+
## Features
52+
53+
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`.
54+
55+
`create-tsrouter-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).
56+
57+
## Routing Options
58+
59+
### File Based Routing (Recommended)
60+
61+
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.
62+
63+
To explicitly choose File Based Routing, use:
2064

2165
```bash
22-
npx create-react-app my-app --template typescript
66+
npx create-tsrouter-app@latest my-app --template file-router
2367
```
2468

25-
To create a SPA application using TypeScript. You can now run:
69+
### Code Based Routing
70+
71+
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:
2672

2773
```bash
2874
npx create-tsrouter-app@latest my-app --template typescript
2975
```
3076

31-
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`.
77+
## Additional Configuration
3278

33-
`create-tsrouter-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).
79+
### TypeScript
80+
81+
- File Based Routing always uses TypeScript
82+
- For Code Based Routing, you can choose between TypeScript and JavaScript
83+
- Enable TypeScript explicitly with `--template typescript`
3484

35-
If you want Tailwind then just add `--tailwind` and that will automatically configure [Tailwind V4](https://tailwindcss.com/).
85+
### Tailwind CSS
3686

37-
You can also specify your preferred package manager with `--package-manager` such as `npm`, `bun`, `yarn`, or `pnpm`.
87+
Enable Tailwind CSS either through the interactive CLI or by adding the `--tailwind` flag. This will automatically configure [Tailwind V4](https://tailwindcss.com/).
3888

39-
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) be found in the generated `README.md` for your project.
89+
### Package Manager
4090

41-
## File Based Routing
91+
Choose your preferred package manager (`npm`, `bun`, `yarn`, or `pnpm`) either through the interactive CLI or using the `--package-manager` flag.
4292

43-
By default `create-tsrouter-app` will create a Code Based Routing application. If you want to use File Based Routing then you can specify `--template file-router`. The location of the home page will be `app/routes/index.tsx`.
93+
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.
4494

4595
# Contributing
4696

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
"scripts": {
88
"build": "tsc",
99
"start": "tsc && node dist/index.js",
10-
"test": "echo \"Error: no test specified\" && exit 0",
10+
"test": "npm run test:lint",
1111
"cipublish": "node scripts/publish.js",
1212
"test:lint": "eslint ./src"
1313
},

0 commit comments

Comments
 (0)