bootstrap_react_ts_tailwind.py

import subprocess
import os
import sys

def run_command(command, cwd=None):
    try:
        result = subprocess.run(command, shell=True, check=True, capture_output=True, text=True, cwd=cwd)
        print(f"STDOUT:\n{result.stdout}")
        print(f"STDERR:\n{result.stderr}")
    except subprocess.CalledProcessError as e:
        print(f"Error executing command: {command}")
        print(f"STDOUT:\n{e.stdout}")
        print(f"STDERR:\n{e.stderr}")
        sys.exit(1)

def bootstrap_react_ts_tailwind(app_name):
    print(f"Bootstrapping React TypeScript Tailwind app: {app_name}")

    # 1. Create a new React TS project
    print("\nStep 1: Creating React TS project...")
    run_command(f"npm create vite@latest {app_name} -- --template react-ts")

    app_path = os.path.join(os.getcwd(), app_name)
    if not os.path.exists(app_path):
        print(f"Error: Project directory {app_path} was not created.")
        sys.exit(1)

    # 2. Go to the project folder and install dependencies.
    print("\nStep 2: Installing project dependencies...")
    run_command("npm install", cwd=app_path)

    # 3. Install Tailwind CSS for Vite.
    print("\nStep 3: Installing Tailwind CSS for Vite...")
    run_command("npm install tailwindcss @tailwindcss/vite", cwd=app_path)

    # 4. Edit vite.config.ts
    print("\nStep 4: Modifying vite.config.ts...")
    vite_config_path = os.path.join(app_path, "vite.config.ts")
    try:
        with open(vite_config_path, "r") as f:
            content = f.read()

        # Add tailwindcss import
        new_content = content.replace(
            "import react from '@vitejs/plugin-react'",
            "import react from '@vitejs/plugin-react'\nimport tailwindcss from '@tailwindcss/vite'"
        )
        # Add tailwindcss() to plugins
        new_content = new_content.replace(
            "plugins: [react()],",
            "plugins: [react(), tailwindcss()],"
        )

        with open(vite_config_path, "w") as f:
            f.write(new_content)
        print("vite.config.ts modified successfully.")
    except FileNotFoundError:
        print(f"Error: vite.config.ts not found at {vite_config_path}")
        sys.exit(1)
    except Exception as e:
        print(f"Error modifying vite.config.ts: {e}")
        sys.exit(1)

    # 5. Clear the default CSS files.
    print("\nStep 5: Clearing default CSS files...")
    app_css_path = os.path.join(app_path, "src", "App.css")
    index_css_path = os.path.join(app_path, "src", "index.css")

    if os.path.exists(app_css_path):
        os.remove(app_css_path)
        print(f"Deleted {app_css_path}")
    else:
        print(f"{app_css_path} not found, skipping deletion.")

    if os.path.exists(index_css_path):
        os.remove(index_css_path)
        print(f"Deleted {index_css_path}")
    else:
        print(f"{index_css_path} not found, skipping deletion.")

    # Create a new index.css and add the Tailwind CSS import.
    print("\nStep 6: Creating new src/index.css with Tailwind import...")
    with open(index_css_path, "w") as f:
        f.write('@import "tailwindcss";\n')
    print(f"Created and wrote to {index_css_path}")

    # 7. Modify App.tsx for the welcome message and styling
    print("\nStep 7: Modifying src/App.tsx for welcome message and styling...")
    app_tsx_path = os.path.join(app_path, "src", "App.tsx")
    app_tsx_content = """function App() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-to-r from-purple-400 via-pink-500 to-red-500">
      <div className="text-center p-10 bg-white rounded-xl shadow-2xl transform transition-all duration-500 hover:scale-105">
        <h1 className="text-5xl font-extrabold text-gray-900 mb-6 animate-pulse">
          Welcome to my React Typescript with Tailwind built by Gemini CLI.
        </h1>
        <p className="text-xl text-gray-700 leading-relaxed">
          This application is a demonstration of a modern web setup,
          combining the power of <span className="font-semibold text-blue-600">React</span>,
          the type safety of <span className="font-semibold text-blue-600">TypeScript</span>,
          and the utility-first styling of <span className="font-semibold text-blue-600">Tailwind CSS</span>.
        </p>
        <p className="mt-8 text-md text-gray-500">
          Explore and build something amazing!
        </p>
      </div>
    </div>
  )
}

export default App
"""
    try:
        with open(app_tsx_path, "w") as f:
            f.write(app_tsx_content)
        print("src/App.tsx modified successfully.")
    except FileNotFoundError:
        print(f"Error: src/App.tsx not found at {app_tsx_path}")
        sys.exit(1)
    except Exception as e:
        print(f"Error modifying src/App.tsx: {e}")
        sys.exit(1)

    print("\nBootstrap process completed successfully!")
    print(f"To run your app, navigate to the '{app_name}' directory and run 'npm run dev'")

if __name__ == "__main__":
    if len(sys.argv) < 2:
        print("Usage: python bootstrap_react_ts_tailwind.py <app-name>")
        sys.exit(1)
    app_name = sys.argv[1]
    bootstrap_react_ts_tailwind(app_name)