create-tanstack-app

Create TanStack App

This CLI tool helps you quickly set up a new TanStack app by downloading and initializing the template from GitHub. It's perfect for building full-stack applications using TanStack's powerful router and full-stack capabilities.

Features:

• Full-Document SSR
• Streaming
• Server Functions (RPCs)
• Automatic type-safe routing with TanStack Router
• Deployment-ready app setup

Getting Started

Install

You can use the CLI to set up a new TanStack app directly from GitHub with:

npx create-tanstack-app@latest

This will:

1. Download the starter template from https://github.com/SH20RAJ/tanstack-start
2. Initialize the project with all necessary dependencies and configurations.

Dependencies

Your new project will include:

• TanStack Router: A powerful type-safe routing system for React.
• Vinxi: A bundler and deployment tool.
• Vite: For fast build and development.
• React: Frontend library to build the app.
• TypeScript: For type safety throughout the app.

Project Structure

Once the setup is complete, your project will have a structure similar to this:

my-app/
├── app/
│   ├── routes/
│   │   └── __root.tsx
│   ├── client.tsx
│   ├── router.tsx
│   ├── routeTree.gen.ts
│   └── ssr.tsx
├── .gitignore
├── app.config.ts
├── package.json
└── tsconfig.json

Running the App

Once the setup is complete, run the following command to start the app:

npm run dev

This will start the development server, and you can start building your app with TanStack's full-stack routing and SSR features.

For more details on how to configure your app, refer to the official TanStack Start Docs.

---

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:

const { execSync } = require('child_process');
const fs = require('fs');
const path = require('path');

const repoUrl = 'https://github.com/SH20RAJ/tanstack-start.git';
const targetDir = path.join(process.cwd(), 'tanstack-app');

try {
  if (!fs.existsSync(targetDir)) {
    console.log('Cloning TanStack app template...');
    execSync(`git clone ${repoUrl} ${targetDir}`, { stdio: 'inherit' });

    console.log('Installing dependencies...');
    execSync('npm install', { cwd: targetDir, stdio: 'inherit' });

    console.log('Setup complete! You can now run "npm run dev" in the project directory.');
  } else {
    console.log('Directory already exists.');
  }
} catch (error) {
  console.error('Error setting up TanStack app:', error);
}