create-tanstack-app 1.0.0 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +93 -0
- package/index.js +29 -0
- package/package.json +13 -10
package/README.md
ADDED
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
# Create TanStack App
|
|
2
|
+
|
|
3
|
+
This CLI tool helps you quickly set up a new TanStack app by downloading and initializing the template from [GitHub](https://github.com/SH20RAJ/tanstack-start). It's perfect for building full-stack applications using TanStack's powerful router and full-stack capabilities.
|
|
4
|
+
|
|
5
|
+
## Features:
|
|
6
|
+
- Full-Document SSR
|
|
7
|
+
- Streaming
|
|
8
|
+
- Server Functions (RPCs)
|
|
9
|
+
- Automatic type-safe routing with TanStack Router
|
|
10
|
+
- Deployment-ready app setup
|
|
11
|
+
|
|
12
|
+
## Getting Started
|
|
13
|
+
|
|
14
|
+
### Install
|
|
15
|
+
|
|
16
|
+
You can use the CLI to set up a new TanStack app directly from GitHub with:
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
npx create-tanstack-app@latest
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
This will:
|
|
23
|
+
1. Download the starter template from [https://github.com/SH20RAJ/tanstack-start](https://github.com/SH20RAJ/tanstack-start)
|
|
24
|
+
2. Initialize the project with all necessary dependencies and configurations.
|
|
25
|
+
|
|
26
|
+
### Dependencies
|
|
27
|
+
|
|
28
|
+
Your new project will include:
|
|
29
|
+
- **TanStack Router**: A powerful type-safe routing system for React.
|
|
30
|
+
- **Vinxi**: A bundler and deployment tool.
|
|
31
|
+
- **Vite**: For fast build and development.
|
|
32
|
+
- **React**: Frontend library to build the app.
|
|
33
|
+
- **TypeScript**: For type safety throughout the app.
|
|
34
|
+
|
|
35
|
+
### Project Structure
|
|
36
|
+
|
|
37
|
+
Once the setup is complete, your project will have a structure similar to this:
|
|
38
|
+
|
|
39
|
+
```
|
|
40
|
+
my-app/
|
|
41
|
+
├── app/
|
|
42
|
+
│ ├── routes/
|
|
43
|
+
│ │ └── __root.tsx
|
|
44
|
+
│ ├── client.tsx
|
|
45
|
+
│ ├── router.tsx
|
|
46
|
+
│ ├── routeTree.gen.ts
|
|
47
|
+
│ └── ssr.tsx
|
|
48
|
+
├── .gitignore
|
|
49
|
+
├── app.config.ts
|
|
50
|
+
├── package.json
|
|
51
|
+
└── tsconfig.json
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
### Running the App
|
|
55
|
+
|
|
56
|
+
Once the setup is complete, run the following command to start the app:
|
|
57
|
+
|
|
58
|
+
```bash
|
|
59
|
+
npm run dev
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
This will start the development server, and you can start building your app with TanStack's full-stack routing and SSR features.
|
|
63
|
+
|
|
64
|
+
For more details on how to configure your app, refer to the official [TanStack Start Docs](https://tanstack.com/start/latest).
|
|
65
|
+
|
|
66
|
+
---
|
|
67
|
+
|
|
68
|
+
Make sure that your `index.js` for this npm package initializes the necessary steps to clone the repo from GitHub and set it up locally. You can use Node's `child_process` module to clone the repository and run the initial npm setup commands for users. For example:
|
|
69
|
+
|
|
70
|
+
```js
|
|
71
|
+
const { execSync } = require('child_process');
|
|
72
|
+
const fs = require('fs');
|
|
73
|
+
const path = require('path');
|
|
74
|
+
|
|
75
|
+
const repoUrl = 'https://github.com/SH20RAJ/tanstack-start.git';
|
|
76
|
+
const targetDir = path.join(process.cwd(), 'tanstack-app');
|
|
77
|
+
|
|
78
|
+
try {
|
|
79
|
+
if (!fs.existsSync(targetDir)) {
|
|
80
|
+
console.log('Cloning TanStack app template...');
|
|
81
|
+
execSync(`git clone ${repoUrl} ${targetDir}`, { stdio: 'inherit' });
|
|
82
|
+
|
|
83
|
+
console.log('Installing dependencies...');
|
|
84
|
+
execSync('npm install', { cwd: targetDir, stdio: 'inherit' });
|
|
85
|
+
|
|
86
|
+
console.log('Setup complete! You can now run "npm run dev" in the project directory.');
|
|
87
|
+
} else {
|
|
88
|
+
console.log('Directory already exists.');
|
|
89
|
+
}
|
|
90
|
+
} catch (error) {
|
|
91
|
+
console.error('Error setting up TanStack app:', error);
|
|
92
|
+
}
|
|
93
|
+
```
|
package/index.js
ADDED
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
const degit = require('degit');
|
|
2
|
+
const path = require('path');
|
|
3
|
+
const fs = require('fs');
|
|
4
|
+
|
|
5
|
+
async function initApp() {
|
|
6
|
+
const projectName = process.argv[2] || 'my-tanstack-app'; // default to 'my-tanstack-app' if no name is provided
|
|
7
|
+
const dest = path.join(process.cwd(), projectName);
|
|
8
|
+
|
|
9
|
+
// Check if the destination already exists
|
|
10
|
+
if (fs.existsSync(dest)) {
|
|
11
|
+
console.log('Directory already exists. Please choose another name or delete the existing directory.');
|
|
12
|
+
return;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
console.log(`Downloading Tanstack app template from GitHub...`);
|
|
16
|
+
|
|
17
|
+
// Use degit to download the template
|
|
18
|
+
const emitter = degit('SH20RAJ/tanstack-start', { cache: false, force: true });
|
|
19
|
+
emitter.on('info', info => console.log(info));
|
|
20
|
+
|
|
21
|
+
try {
|
|
22
|
+
await emitter.clone(dest);
|
|
23
|
+
console.log(`Template successfully downloaded! Navigate to ${dest} and start working on your project.`);
|
|
24
|
+
} catch (error) {
|
|
25
|
+
console.error('Error during template download:', error);
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
initApp();
|
package/package.json
CHANGED
|
@@ -1,11 +1,14 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
2
|
+
"name": "create-tanstack-app",
|
|
3
|
+
"version": "1.0.2",
|
|
4
|
+
"main": "index.js",
|
|
5
|
+
"bin": {
|
|
6
|
+
"create-gi": "./index.js"
|
|
7
|
+
},
|
|
8
|
+
"author": "sh20raj",
|
|
9
|
+
"license": "ISC",
|
|
10
|
+
"description": "A CLI tool to create a Tanstack app",
|
|
11
|
+
"dependencies": {
|
|
12
|
+
"degit": "^2.8.4"
|
|
13
|
+
}
|
|
14
|
+
}
|