APRS - App React Starter

CLI tool to create React apps with Next.js or React Router, integrated with Convex and Clerk.

Features

• 🚀 Quick project setup with interactive CLI
• ⚛️ Choose between Next.js or React Router
• 🔐 Pre-configured Clerk authentication
• 📦 Integrated Convex backend
• 🎨 Tailwind CSS with shadcn/ui components
• 📝 TypeScript support
• 🔄 Git initialization
• 📦 Automatic dependency installation

Installation

Using npm

npx aprs my-app

Using bun

bunx aprs my-app

Usage

1. Run the CLI command with your project name:

   npx aprs my-app

2. Follow the interactive prompts:

   • Choose your framework (Next.js or React Router)
   • Confirm Git initialization (optional)

3. Navigate to your new project:

   cd my-app

4. Set up your environment variables:

   cp .env.example .env.local  # for Next.js
   # or
   cp .env.example .env  # for React Router

5. Install dependencies (if not done automatically):

   npm install
   # or
   bun install

6. Start the development server:

   npm run dev
   # or
   bun run dev

Setup Required Services

Convex

1. Go to Convex Dashboard
2. Create a new project
3. Copy your deployment URL and deployment ID
4. Add them to your environment variables

Clerk

1. Go to Clerk Dashboard
2. Create a new application
3. Configure your JWT template for Convex:
   • Go to JWT Templates
   • Create or edit the "convex" template
   • Copy the Issuer URL
4. Add Clerk keys to your environment variables

Project Structure

Next.js

my-app/
├── app/                    # Next.js app directory
│   ├── globals.css         # Global styles
│   ├── layout.tsx          # Root layout
│   └── page.tsx           # Home page
├── components/             # React components
│   └── ui/               # shadcn/ui components
├── convex/                # Convex backend
│   └── auth.config.ts     # Convex auth configuration
├── lib/                   # Utility functions
└── public/                # Static assets

React Router

my-app/
├── app/                    # React Router app directory
│   ├── app.css            # Global styles
│   ├── root.tsx           # Root layout
│   ├── routes.ts          # Route configuration
│   └── routes/            # Route components
├── components/             # React components
│   └── ui/               # shadcn/ui components
├── convex/                # Convex backend
│   └── auth.config.ts     # Convex auth configuration
└── public/                # Static assets

Environment Variables

Next.js (.env.local)

# Convex
CONVEX_DEPLOYMENT=your_deployment_id
CONVEX_URL=your_convex_url

# Clerk
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_key
CLERK_SECRET_KEY=your_clerk_secret
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/protected
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/protected

# Clerk JWT for Convex
CLERK_JWT_ISSUER_DOMAIN=your_jwt_issuer_domain

React Router (.env)

# Convex
CONVEX_DEPLOYMENT=your_deployment_id
CONVEX_URL=your_convex_url

# Clerk
VITE_CLERK_PUBLISHABLE_KEY=your_clerk_key
CLERK_SECRET_KEY=your_clerk_secret
VITE_CLERK_SIGN_IN_URL=/sign-in
VITE_CLERK_SIGN_UP_URL=/sign-up
VITE_CLERK_AFTER_SIGN_IN_URL=/protected
VITE_CLERK_AFTER_SIGN_UP_URL=/protected

# Clerk JWT for Convex
CLERK_JWT_ISSUER_DOMAIN=your_jwt_issuer_domain

Available Scripts

Next.js

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run Biome linter
• npm run format - Format code with Biome

React Router

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run typecheck - Run TypeScript type checking

Learn More

• Next.js Documentation
• React Router Documentation
• Convex Documentation
• Clerk Documentation
• Tailwind CSS
• shadcn/ui

License

MIT