TanStack Start App

Overview

This template provides a modern, performant foundation for full-stack web applications using TanStack Start, Vite, and Igniter.js. It combines file-based routing with an end-to-end type-safe API layer.

Features

✅ Full-Stack with TanStack Start: A cohesive, modern full-stack framework powered by Vite.
✅ End-to-End Type Safety: Powered by Igniter.js, ensuring type safety between your front-end and back-end.
✅ File-Based Routing: Uses TanStack Router for intuitive, type-safe routing.
✅ Server-Side Data Fetching: Leverages TanStack Router's loaders to fetch data on the server.
✅ Feature-Based API Architecture: A scalable project structure that organizes API code by business domain.
✅ Ready-to-Use Services: Pre-configured examples for:
- Caching: Integrated with Redis via @igniter-js/adapter-redis.
- Background Jobs: Asynchronous task processing with BullMQ via @igniter-js/adapter-bullmq.
✅ Auto-Generated API Client: A fully-typed client that mirrors your API, providing autocomplete and compile-time error checking.

Project Structure

igniter.ts

igniter.client.ts

igniter.router.ts

router.tsx

Quick Start

Clone the Repository

git clone https://github.com/felipebarcelospro/igniter-js.git
cd igniter-js/apps/starter-tanstack-start

Install Dependencies

npm install

pnpm install

yarn install

bun install

Configure Environment Variables

Create a .env file in the root of this starter and add your database and Redis connection URLs:

# .env
DATABASE_URL="postgresql://user:password@localhost:5432/mydatabase?schema=public"
REDIS_URL="redis://127.0.0.1:6379"

Run Database Migrations

npx prisma db push

Run the Development Server

npm run dev

Your application will be available at http://localhost:5173.

Ensure you have Node.js (v18 or higher), npm (or compatible package manager), a running Redis instance, and a PostgreSQL database.

Key Features Explained

API Integration via Catch-All Route

The connection between TanStack Start and Igniter.js is a catch-all API route at src/routes/api/v1/$.ts. This route captures all requests to /api/v1/* and delegates them to the Igniter.js API router handler.

Igniter.js API Layer

Backend API logic is defined using Igniter.js:

Initialization (src/igniter.ts): Core Igniter instance configured with adapters for store (Redis), jobs (BullMQ), and logging.
Router (src/igniter.router.ts): Assembles the main API router by importing all feature controllers.
Controllers (src/features/[feature]/controllers/): Group related API actions (queries and mutations).

Type-Safe Client & React Hooks

Igniter.js automatically generates a type-safe client (src/igniter.client.ts) for seamless interaction with your backend from the frontend, providing full type-checking and autocompletion.

Example Client Component Usage:

// src/routes/index.tsx
'use client';
import { api } from '@/igniter.client';

export function Component() {
  const { data, isLoading } = api.example.health.useQuery();

  if (isLoading) return <div>Loading...</div>;

  return (
    <div>
      <h1>Welcome to TanStack Start!</h1>
      <p>API Status: {data?.status}</p>
    </div>
  );
}

Deployment

This template can be deployed to various platforms that support Node.js applications. Follow the quick start guide to get your application running locally, then refer to TanStack Start's deployment documentation for production environments.

Framework

Use Case

Stack