TanStarter

https://docs.tanstarter.dev
Admin
TanStarter is a complete TanStack Start SaaS boilerplate built on Cloudflare Workers that helps...
Tokens:31,321
Snippets:493
Trust Score:4.6
Update:3 months ago
Show doc for...
Tokens:
Raw
### Install TanStarter CLI Globally

Source: https://docs.tanstarter.dev/docs/cli

Install the CLI globally for frequent use. After installation, you can run the create command directly.

```bash
npm install -g tanstarter-cli
```

```bash
tanstarter create
```

--------------------------------

### Install Project Dependencies

Source: https://docs.tanstarter.dev/docs/start

Install all necessary project dependencies using PNPM.

```bash
pnpm install
```

--------------------------------

### Set Up Environment Variables

Source: https://docs.tanstarter.dev/docs/start

Copy the example environment file to create a new environment file for your project.

```bash
cp .env.example .env
```

--------------------------------

### Resume Failed TanStarter Setup

Source: https://docs.tanstarter.dev/docs/cli

Resume a failed project setup by running the create command with the --resume flag. This continues the workflow from the last completed step stored in .tanstarter/state.json.

```bash
tanstarter create your-project-name --resume
```

--------------------------------

### Start Dev Server and Compile Locale Runtime

Source: https://docs.tanstarter.dev/docs/i18n

Use this command to start the development server. It automatically compiles the locale runtime.

```bash
pnpm dev             # Start dev server and compile the locale runtime automatically
```

--------------------------------

### Install and Check GitHub CLI

Source: https://docs.tanstarter.dev/docs/start

Install the GitHub CLI using Homebrew for macOS. Follow official documentation for other platforms. Check installation and log in status.

```bash
brew install gh
```

```bash
gh --version
```

```bash
gh auth login
```

```bash
gh auth status
```

--------------------------------

### Check Git Installation

Source: https://docs.tanstarter.dev/docs/start

Verify if Git is installed on your system. Download from the Git official website if not present.

```bash
git --version
```

--------------------------------

### Install and Check PNPM

Source: https://docs.tanstarter.dev/docs/start

Install the PNPM package manager globally using npm. Follow official documentation for other platforms. Check the installed version.

```bash
npm install -g pnpm
```

```bash
pnpm --version
```

--------------------------------

### Check Node.js Installation

Source: https://docs.tanstarter.dev/docs/start

Verify if Node.js is installed. Download from the Node.js official website if not present.

```bash
node --version
```

--------------------------------

### Start Development Server

Source: https://docs.tanstarter.dev/docs/start

Run the development server to access your TanStarter website locally. The server typically runs on http://localhost:3000.

```bash
pnpm run dev
```

--------------------------------

### Install Stripe CLI

Source: https://docs.tanstarter.dev/docs/payment/stripe

Install the Stripe CLI globally to manage Stripe resources and forward events locally.

```bash
pnpm install -g stripe/stripe-cli
```

--------------------------------

### Implement Slack Notification Provider

Source: https://docs.tanstarter.dev/docs/notification

Create a new notification provider by implementing the `NotificationProvider` interface. This example shows how to send a basic Slack message.

```typescript
import type {
  NotificationProvider,
  SendPaymentNotificationParams,
} from '../types';

export class SlackProvider implements NotificationProvider {
  private webhookUrl: string;

  constructor() {
    const webhookUrl = process.env.SLACK_WEBHOOK_URL;
    if (!webhookUrl) throw new Error('SLACK_WEBHOOK_URL is required.');
    this.webhookUrl = webhookUrl;
  }

  getProviderName(): string {
    return 'slack';
  }

  async sendPaymentNotification(
    params: SendPaymentNotificationParams
  ): Promise<void> {
    const { sessionId, customerId, userName, amount } = params;
    try {
      // Your Slack message implementation
      await fetch(this.webhookUrl, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          text: `🎉 New Purchase\nUsername: ${userName}\nAmount: $${amount.toFixed(2)}`,
        }),
      });
    } catch (error) {
      console.error('Failed to send Slack notification:', error);
    }
  }
}
```

--------------------------------

### Clone TanStarter Template

Source: https://docs.tanstarter.dev/docs/start

Clone the TanStarter template repository from GitHub to start a new project. Navigate into the project directory.

```bash
git clone https://github.com/MkFastHQ/mkfast-template.git your-project-name

cd your-project-name
```

--------------------------------

### Markdown Blog Post Structure

Source: https://docs.tanstarter.dev/docs/blog

Example of a Markdown file for a blog post, including frontmatter for metadata and Markdown for content.

```markdown
---
title: My First Blog Post
description: This is a brief description of my first blog post.
date: 2026-01-15
category: Tutorial
image: https://example.com/images/blog/my-first-post.jpg
---

# Introduction

This is my first blog post. You can use **Markdown** here.

## Section 1

Some content here...

## Section 2

More content here...

```

--------------------------------

### Example Markdown Content Translation

Source: https://docs.tanstarter.dev/docs/i18n

Demonstrates the structure of English and Chinese versions of a blog post, including frontmatter and content.

```markdown
---
title: My First Post
description: A short introduction to the product.
date: 2026-01-15
category: Tutorial
image: https://example.com/cover.jpg
---

English content...
```

```markdown
---
title: 我的第一篇文章
description: 一篇简短的产品介绍。
date: 2026-01-15
category: 教程
image: https://example.com/cover.jpg
---

中文内容...
```

--------------------------------

### Example: Dashboard Section Card Component

Source: https://docs.tanstarter.dev/docs/components

Demonstrates creating a reusable section card component for the dashboard using Shadcn UI's Card component. Ensure to import necessary components from '@/components/ui/card'.

```typescript
import { Card } from "@/components/ui/card"

export function SectionCards() {
  return (
    <Card>
      {/* ... */}
    </Card>
  )
}
```

--------------------------------

### Create Component-Based Page Route

Source: https://docs.tanstarter.dev/docs/pages

For pages with complex interactivity, create a new route file using `createFileRoute` and define the `head` and `component` for SEO and page rendering. This example shows a pricing page.

```typescript
import { createFileRoute } from '@tanstack/react-router';
import { messages } from '@/messages';
import { seo } from '@/lib/seo';

export const Route = createFileRoute('/(pages)/pricing')({
  head: () => ({
    ...seo('pricing', {
      title: messages.pricing.title,
      description: messages.pricing.description,
    }),
  }),
  component: PricingPage,
});

function PricingPage() {
  return (
    <div className="max-w-4xl mx-auto space-y-8">
      <h1 className="text-center text-3xl font-bold">
        {messages.pricing.title}
      </h1>
      {/* Pricing components */}
    </div>
  );
}
```

--------------------------------

### Route-Specific Metadata Configuration

Source: https://docs.tanstarter.dev/docs/metadata

Defines metadata for individual routes using the `head()` function within `createFileRoute`. This example shows configuration for the home page.

```typescript
import { createFileRoute } from '@tanstack/react-router';
import { seo } from '@/lib/seo';

export const Route = createFileRoute('/')({
  head: () => ({
    ...seo('/', {
      title: 'TanStarter - Home',
      description: 'Welcome to TanStarter',
    }),
  }),
  component: HomePage,
});
```

--------------------------------

### Basic Cache Operations with TanStarter

Source: https://docs.tanstarter.dev/docs/cache

Perform basic cache operations using TanStarter's cache helpers. This includes creating cache keys, getting or setting cache values with a fetcher, and deleting specific cache entries.

```typescript
import {
  CACHE_TTL,
  createCacheKey,
  deleteCache,
  getOrSetCache,
} from '@/cache';

const key = createCacheKey('newsletter:status', email);

const status = await getOrSetCache({
  key,
  ttlSeconds: CACHE_TTL.newsletterStatus,
  fetcher: () => newsletterProvider.checkSubscribeStatus({ email }),
});

await deleteCache(key);
```

--------------------------------

### Update Website Payment Configuration

Source: https://docs.tanstarter.dev/docs/payment/creem

Configure the `payment` section in `src/config/website.ts` to define pricing plans. Ensure plan IDs, amounts, currencies, and intervals match your Creem product setup. Fields like `enable`, `provider`, and `priceId` are automatically resolved from environment variables.

```typescript
payment: {
  enable: isPaymentEnabled,
  provider: isPaymentEnabled ? paymentProvider : undefined,
  price: {
    plans: {
      free: {
        id: 'free',
        prices: [],
        isFree: true,
        isLifetime: false,
      },
      pro: {
        id: 'pro',
        prices: [
          {
            type: 'subscription',
            priceId: priceIds.proMonthly,
            amount: 990,
            currency: 'USD',
            interval: 'month',
          },
          {
            type: 'subscription',
            priceId: priceIds.proYearly,
            amount: 9900,
            currency: 'USD',
            interval: 'year',
          },
        ],
        isFree: false,
        isLifetime: false,
        popular: true,
      },
      lifetime: {
        id: 'lifetime',
        prices: [
          {
            type: 'one_time',
            priceId: priceIds.lifetime,
            amount: 19900,
            currency: 'USD',
            allowPromotionCode: true,
          },
        ],
        isFree: false,
        isLifetime: true,
      },
    },
  },
}
```

--------------------------------

### Quick Deploy TanStarter Project

Source: https://docs.tanstarter.dev/docs/cli

Run the CLI directly using npx to create a new TanStarter project. It will prompt for project details and Cloudflare resource names.

```bash
npx tanstarter-cli@latest create
```

--------------------------------

### Sync Prompts to Local Database and R2

Source: https://docs.tanstarter.dev/docs/mkimage

Import prompts into your local D1 database and upload preview images to R2 storage.

```bash
pnpm prompts:sync:local
```

--------------------------------

### Set up Production Environment Variables

Source: https://docs.tanstarter.dev/docs/deployment

Copy your development environment variables to .env.production and update them with production-specific values.

```bash
cp .env .env.production

# Edit .env.production with production values
# VITE_BASE_URL='https://your-domain.com'
# STRIPE_SECRET_KEY='your-stripe-live-secret-key'
# Other variables - carefully check and update as needed for production

```

--------------------------------

### Initialize Local Database

Source: https://docs.tanstarter.dev/docs/database

Run this command to initialize the local D1 database for development.

```bash
pnpm run db:migrate:local
```

--------------------------------

### Apply Database Migrations

Source: https://docs.tanstarter.dev/docs/mkimage

Run these commands to ensure the necessary database tables for prompts are created. Use `db:migrate:local` for local development and `db:migrate:remote` for production environments.

```bash
# Local development
pnpm db:migrate:local
```

```bash
# Remote / production
pnpm db:migrate:remote
```

--------------------------------

### Manual Build and Deploy

Source: https://docs.tanstarter.dev/docs/deployment

Execute this command for a manual build and deployment of your TanStarter project to Cloudflare Workers.

```bash
pnpm run deploy

```

--------------------------------

### Build for Production and Compile Locale Runtime

Source: https://docs.tanstarter.dev/docs/i18n

Execute this command to build the project for production. It also compiles the locale runtime.

```bash
pnpm build           # Build for production and compile the locale runtime
```

--------------------------------

### Get Avatar Links Configuration

Source: https://docs.tanstarter.dev/docs/config/avatar

Defines the menu items for the user avatar dropdown. Each item is a MenuItemConfig object specifying title, href, and icon.

```typescript
export function getAvatarLinks(): MenuItemConfig[] {
  return [
    { title: m.dashboard, href: Routes.Dashboard, icon: IconLayoutDashboard },
    { title: m.billing, href: Routes.SettingsBilling, icon: IconCreditCard },
    { title: m.settings, href: Routes.SettingsProfile, icon: IconSettings2 },
  ];
}
```

--------------------------------

### Initialize Remote Database

Source: https://docs.tanstarter.dev/docs/database

Run this command to apply migrations and initialize your remote D1 database.

```bash
pnpm run db:migrate:remote
```

--------------------------------

### Blog Post Retrieval Functions

Source: https://docs.tanstarter.dev/docs/blog

Provides functions to get all sorted blog posts and retrieve a single post by its slug. Assumes `allBlogs` is available from Content Collections.

```typescript
import { allBlogs } from 'content-collections';
import type { Blog } from 'content-collections';

export type BlogPost = Blog & { slug: string };

export function getSortedPosts(): BlogPost[] {
  return [...(allBlogs as BlogPost[])].sort(
    (a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()
  );
}

export function getPostBySlug(slug: string): BlogPost | undefined {
  return (allBlogs as BlogPost[]).find((p) => p.slug === slug);
}

export function getPaginatedPosts(page: number) {
  const sorted = getSortedPosts();
  // ... pagination logic
}
```

--------------------------------

### Get Navbar Links

Source: https://docs.tanstarter.dev/docs/config/navbar

Defines the navigation menu links in the website header. Conditionally shows links based on feature flags and supports dropdown menus with nested items.

```typescript
export function getNavbarLinks(): MenuItemConfig[] {
  const links: MenuItemConfig[] = [
    { title: m.features, href: Routes.Features, external: false },
  ];
  if (websiteConfig.payment?.enable) {
    links.push({ title: m.pricing, href: Routes.Pricing, external: false });
  }
  if (websiteConfig.blog?.enable) {
    links.push({ title: m.blog, href: Routes.Blog, external: false });
  }
  links.push({
    title: m.pages,
    items: [
      {
        title: m.about.title,
        description: m.about.description,
        href: Routes.About,
        icon: IconBuilding,
        external: false,
      },
      // More dropdown items...
    ],
  });
  return links;
}
```

--------------------------------

### Enable Invoice Creation for One-Time Payments

Source: https://docs.tanstarter.dev/docs/payment/stripe

Automatically create an invoice for one-time payments by setting `invoice_creation.enabled` to `true` in the checkout parameters. This configuration is part of the Stripe payment provider setup.

```typescript
// Automatically create invoice for one-time payments
checkoutParams.invoice_creation = {
  enabled: true,
};

```

--------------------------------

### Open Drizzle Studio (Local)

Source: https://docs.tanstarter.dev/docs/database

Use this command to open Drizzle Studio for managing your local database.

```bash
pnpm run db:studio:local
```

--------------------------------

### Define Default Price Plans for Website

Source: https://docs.tanstarter.dev/docs/config/website

Configure default price plans including free, pro subscription, and lifetime options. Use environment variables for sensitive price IDs. Ensure correct currency and amount formatting.

```typescript
price: {
  plans: {
    free: {
      id: 'free',
      prices: [],
      isFree: true,
      isLifetime: false,
    },
    pro: {
      id: 'pro',
      prices: [
        {
          type: 'subscription',
          priceId: clientEnv.VITE_STRIPE_PRICE_PRO_MONTHLY!,
          amount: 990,
          currency: 'USD',
          interval: 'month',
          trialPeriodDays: 7,
        },
        {
          type: 'subscription',
          priceId: clientEnv.VITE_STRIPE_PRICE_PRO_YEARLY!,
          amount: 9900,
          currency: 'USD',
          interval: 'year',
          trialPeriodDays: 7,
        },
      ],
      isFree: false,
      isLifetime: false,
      popular: true,
    },
    lifetime: {
      id: 'lifetime',
      prices: [
        {
          type: 'one_time',
          priceId: clientEnv.VITE_STRIPE_PRICE_LIFETIME!,
          amount: 19900,
          currency: 'USD',
          allowPromotionCode: true,
        },
      ],
      isFree: false,
      isLifetime: true,
    },
  },
}
```

--------------------------------

### Define Custom Field in Markdown Frontmatter

Source: https://docs.tanstarter.dev/docs/blog

After updating the schema, you can use the new field in your markdown blog posts' frontmatter. This example sets the `featured` field to `true` for a specific post.

```markdown
---
title: Important Announcement
description: Read this important announcement
date: 2026-01-15
category: Announcement
image: https://example.com/images/blog/announcement.jpg
featured: true
---

Content here...
```

--------------------------------

### Extend Blog Post Schema with Custom Fields

Source: https://docs.tanstarter.dev/docs/blog

Add new fields to your blog posts by updating the schema in `content-collections.ts`. This example shows how to add a boolean `featured` field with a default value of `false`.

```typescript
const blog = defineCollection({
  name: 'blog',
  directory: 'content/blog',
  include: '**/*.md',
  schema: z.object({
    title: z.string(),
    description: z.string(),
    date: z.string(),
    category: z.string(),
    content: z.string(),
    image: z.url(),
    // Add new field
    featured: z.boolean().default(false),
  }),
  transform: (doc) => ({
    ...doc,
    slug: doc._meta.path,
  }),
});
```

--------------------------------

### Build Project

Source: https://docs.tanstarter.dev/docs/updates

Check if the project builds successfully after updates.

```bash
pnpm run build
```

--------------------------------

### TanStarter CLI Command Reference

Source: https://docs.tanstarter.dev/docs/cli

Reference for available TanStarter CLI commands and their options.

```bash
tanstarter create [options]
```

```bash
tanstarter create <project-name> --resume
```

```bash
tanstarter delete <project-name> [options]
```

--------------------------------

### Get Footer Links Configuration

Source: https://docs.tanstarter.dev/docs/config/footer

Defines the structure for footer links, including titles, URLs, and external link status. Links can be conditionally added based on feature flags like payment enablement.

```typescript
export function getFooterLinks(): MenuItemConfig[] {
  const productItems: MenuItemConfig[] = [];
  productItems.push({
    title: m.features,
    href: Routes.Features,
    external: false,
  });
  if (websiteConfig.payment?.enable) {
    productItems.push({
      title: m.pricing,
      href: Routes.Pricing,
      external: false,
    });
  }
  productItems.push({
    title: m.faq,
    href: Routes.Faqs,
    external: false,
  });

  // More sections: resources, company, legal...

  return [
    { title: m.product, items: productItems },
    { title: m.resources, items: resourcesItems },
    { title: m.company, items: companyItems },
    { title: m.legal, items: legalItems },
  ];
}
```

--------------------------------

### Run Linting and Formatting

Source: https://docs.tanstarter.dev/docs/updates

Execute linting and formatting commands to ensure code quality and consistency.

```bash
pnpm run lint
```

```bash
pnpm run format
```

--------------------------------

### Sync Prompts to Remote Production Environment

Source: https://docs.tanstarter.dev/docs/mkimage

After local verification, sync prompts to your remote production environment.

```bash
pnpm prompts:sync:remote
```

--------------------------------

### Configure New GitHub Repository

Source: https://docs.tanstarter.dev/docs/start

Remove the default remote origin and create a new private GitHub repository for your project. Push the code and set the main branch.

```bash
git remote remove origin

gh repo create your-project-name --private --source=. --remote=origin

git push -u origin main
```

--------------------------------

### Configure Fal.ai Provider

Source: https://docs.tanstarter.dev/docs/mkimage

Set the IMAGE_MODEL_PROVIDER to 'fal' and provide your Fal.ai API key as FAL_KEY. Ensure you have registered an account on fal.ai and generated an API key.

```env
IMAGE_MODEL_PROVIDER='fal'
FAL_KEY='your-fal-api-key'
```

--------------------------------

### Configure Payment Provider and Basic Settings

Source: https://docs.tanstarter.dev/docs/config/website

Enable payment processing and set the provider. This is the top-level configuration for payment services.

```typescript
payment: {
  enable: true,
  provider: 'stripe',
  price: {
    plans: {
      // ... price plans
    },
  },
}
```

--------------------------------

### Configure KIE Provider

Source: https://docs.tanstarter.dev/docs/mkimage

Set the IMAGE_MODEL_PROVIDER to 'kie' and provide your KIE API key as KIE_KEY. Register an account on kie.ai and generate an API key from the dashboard.

```env
IMAGE_MODEL_PROVIDER='kie'
KIE_KEY='your-kie-api-key'
```

--------------------------------

### Download Prompt Dataset

Source: https://docs.tanstarter.dev/docs/mkimage

Use this command to download the latest built-in prompt dataset.

```bash
pnpm prompt:download
```

--------------------------------

### Create Localized Content Files for New Languages

Source: https://docs.tanstarter.dev/docs/i18n

For new locales, create corresponding Markdown files for content like blog posts, changelogs, and pages.

```text
content/blog/getting-started.ja.md
content/changelog/v1.0.0.ja.md
content/pages/privacy.ja.md
```

--------------------------------

### Configure Basic Website Information

Source: https://docs.tanstarter.dev/docs/metadata

Update the site name, title, and description for SEO by editing the messages file for your active language.

```typescript
export const messages = {
  site: {
    name: 'Your Website Name',
    title: 'Your Website Title - Tagline',
    description: 'A detailed description of your website for SEO purposes',
  },
  // ...
} as const;
```

--------------------------------

### Compose Landing Page with Block Components

Source: https://docs.tanstarter.dev/docs/landing-page

This component imports and renders various pre-built block components to form the complete landing page structure. Ensure all imported block components are correctly placed in `src/components/blocks/`.

```typescript
import HeroSection from '@/components/blocks/hero';
import LogoCloudSection from '@/components/blocks/logo-cloud';
import StatsSection from '@/components/blocks/stats';
import Features3Section from '@/components/blocks/features3';
import FeaturesSection from '@/components/blocks/features';
import CallToActionSection from '@/components/blocks/calltoaction';
import Features2Section from '@/components/blocks/features2';
import IntegrationSection from '@/components/blocks/integration';
import Integration2Section from '@/components/blocks/integration2';
import PricingSection from '@/components/blocks/pricing';
import FaqSection from '@/components/blocks/faqs';
import TestimonialsSection from '@/components/blocks/testimonials';
import NewsletterCard from '@/components/blocks/newsletter-card';

export function HomePage() {
  return (
    <div className="flex flex-col">
      <HeroSection />
      <LogoCloudSection />
      <StatsSection />
      <Features3Section />
      <FeaturesSection />
      <CallToActionSection />
      <Features2Section />
      <IntegrationSection />
      <Integration2Section />
      <PricingSection />
      <FaqSection />
      <TestimonialsSection />
      <NewsletterCard />
    </div>
  );
}
```

--------------------------------

### Format Code Automatically

Source: https://docs.tanstarter.dev/docs/lint

Run this command to automatically format all supported files according to the project's defined code style rules.

```bash
pnpm run format
```

--------------------------------

### Configure R2 Environment Variables

Source: https://docs.tanstarter.dev/docs/mkimage

Set these environment variables to connect MkImage to your Cloudflare R2 bucket for storing prompt data and images.

```dotenv
R2_BUCKET_NAME='your-bucket-name'
R2_ACCESS_KEY_ID='your-access-key-id'
R2_SECRET_ACCESS_KEY='your-secret-access-key'
R2_PUBLIC_URL='https://your-r2-public-url.com'
```

--------------------------------

### Create R2 Bucket using Wrangler CLI

Source: https://docs.tanstarter.dev/docs/storage

Use this command to create a new R2 bucket via the Wrangler CLI.

```bash
pnpm wrangler r2 bucket create your-bucket-name
```

--------------------------------

### Default Website Configuration

Source: https://docs.tanstarter.dev/docs/config/website

The main configuration file that contains the core settings for the website. TanStarter has already set up the default core settings for you.

```typescript
export const websiteConfig: WebsiteConfig = {
  ui: {
    // UI settings
  },
  metadata: {
    // Metadata settings
  },
  social: {
    // Social media settings
  },
  auth: {
    // Auth settings
  },
  blog: {
    // Blog settings
  },
  mail: {
    // Mail settings
  },
  newsletter: {
    // Newsletter settings
  },
  notification: {
    // Notification settings
  },
  cache: {
    // Cache settings
  },
  storage: {
    // Storage settings
  },
  payment: {
    // Payment settings
  },
};

```

--------------------------------

### Basic File Operations with TanStarter Storage API

Source: https://docs.tanstarter.dev/docs/storage

Demonstrates how to perform basic file operations such as uploading, deleting, downloading, and retrieving file information using the TanStarter storage utility functions.

```typescript
import { uploadFile, deleteFile, downloadFile, getFileInfo } from '@/storage';

// Upload a file
const { url, key } = await uploadFile(
  fileBuffer,
  'original-filename.jpg',
  'image/jpeg',
  { folder: 'uploads/images' }
);

// Delete a file
await deleteFile(key);

// Download a file
const stream = await downloadFile(key);

// Get file info
const info = await getFileInfo(key);
```

--------------------------------

### Create KV Namespace with Wrangler CLI

Source: https://docs.tanstarter.dev/docs/cache

Use the Wrangler CLI to create a new KV namespace for caching. Remember to copy the returned ID for configuration.

```bash
pnpm wrangler kv namespace create CACHE
```

--------------------------------

### Database Management Commands

Source: https://docs.tanstarter.dev/docs/database

A list of common commands for managing your D1 database, including schema generation, pushing changes, and opening Drizzle Studio.

```bash
pnpm run db:generate
```

```bash
pnpm run db:push
```

```bash
pnpm run db:studio:local
```

```bash
pnpm run db:studio:remote
```

```bash
pnpm run db:migrate:local
```

```bash
pnpm run db:migrate:remote
```

```bash
pnpm run auth:schema:generate
```

--------------------------------

### Expose Local Server with hostc

Source: https://docs.tanstarter.dev/docs/payment/creem

Use hostc to expose your local server to the internet for receiving webhook events from Creem. This command generates a temporary domain.

```bash
npx hostc
```

--------------------------------

### Configure Blog Functionality

Source: https://docs.tanstarter.dev/docs/config/website

Set 'enable' to false to disable blog menus and exclude blog pages from the sitemap. Default is true.

```typescript
blog: {
  enable: true,
  paginationSize: 6,
}
```

--------------------------------

### Preview Email Template Locally

Source: https://docs.tanstarter.dev/docs/email

Use the provided command to preview your custom email template locally during development.

```bash
pnpm email:dev
```

--------------------------------

### Update Prompt Dataset

Source: https://docs.tanstarter.dev/docs/mkimage

Follow these steps to update the prompt dataset. This involves downloading the latest data, re-syncing locally, and then syncing to production. Existing prompts are skipped by default unless `--force` is used.

```bash
# Pull latest dataset
pnpm prompt:download

# Re-sync locally first
pnpm prompts:sync:local

# After confirming, sync to production
pnpm prompts:sync:remote
```

--------------------------------

### Authentication Options Configuration

Source: https://docs.tanstarter.dev/docs/config/website

Configure authentication options for your website, including enabling login methods like Google OAuth and email/password.

```typescript
auth: {
  enable: true,
  enableGoogleLogin: true,
  enableCredentialLogin: true,
  enableDeleteAccount: true,
}

```

--------------------------------

### Apply Database Migrations

Source: https://docs.tanstarter.dev/docs/updates

Apply the generated database migrations to either your local or remote D1 database.

```bash
# Apply to local D1 database
pnpm run db:migrate:local
```

```bash
# Apply to remote D1 database
pnpm run db:migrate:remote
```

--------------------------------

### Configure Notification Services

Source: https://docs.tanstarter.dev/docs/config/website

Configure notification services. Default is true.

```typescript
notification: {
  enable: true,
  provider: 'discord',
}
```

--------------------------------

### Log in to Stripe CLI

Source: https://docs.tanstarter.dev/docs/payment/stripe

Authenticate your Stripe CLI with your Stripe account.

```bash
stripe login
```

--------------------------------

### Query Blog Posts Programmatically

Source: https://docs.tanstarter.dev/docs/blog

Utilize the provided utility functions in `src/lib/blog.ts` to fetch and manage blog posts. Functions include `getSortedPosts`, `getPostBySlug`, and `getPaginatedPosts`.

```typescript
import { getSortedPosts, getPostBySlug, getPaginatedPosts } from '@/lib/blog';

// Get all posts sorted by date
const allPosts = getSortedPosts();

// Get a specific post by slug
const post = getPostBySlug('hello-world');

// Get paginated posts
const { posts, totalPages, currentPage } = getPaginatedPosts(1);
```

--------------------------------

### Basic Metadata Configuration

Source: https://docs.tanstarter.dev/docs/config/website

Defines the basic metadata for the website, including name, title, and description. Used for branding, browser tabs, and SEO.

```typescript
metadata: {
  name: messages.site.name,
  title: messages.site.title,
  description: messages.site.description,
  // ...
}

```

--------------------------------

### Biome Configuration

Source: https://docs.tanstarter.dev/docs/lint

This is a simplified view of the project's Biome configuration file, defining rules for formatting, linting, and import organization.

```json
{
  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 80
  },
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      // Various rule customizations...
    }
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "single",
      "trailingCommas": "es5",
      "semicolons": "always"
    }
  }
}
```

--------------------------------

### Configure Server-Side Cache

Source: https://docs.tanstarter.dev/docs/config/website

Set 'enable' to false to skip KV and call the original fetcher directly. Currently only Cloudflare KV is supported. Default is true.

```typescript
cache: {
  enable: true,
  provider: 'kv',
}
```

--------------------------------

### Configure Google OAuth Credentials

Source: https://docs.tanstarter.dev/docs/auth

Add your Google OAuth Client ID and Client Secret to your environment variables file if Google login is enabled.

```dotenv
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret
```

--------------------------------

### Enable Notification Channel Configuration

Source: https://docs.tanstarter.dev/docs/notification

Configure the notification provider in `src/config/website.ts`. Set `enable` to true and specify the desired `provider` ('discord' or 'feishu').

```typescript
export const websiteConfig: WebsiteConfig = {
  // ...other config
  notification: {
    enable: true,
    provider: 'discord', // or 'feishu'
  },
  // ...other config
}
```

--------------------------------

### Run Linting Check

Source: https://docs.tanstarter.dev/docs/lint

Execute this command to check code quality without making automatic changes. It reports linting errors and warnings.

```bash
pnpm run lint
```

--------------------------------

### Select New Provider in Website Configuration

Source: https://docs.tanstarter.dev/docs/notification

Update `websiteConfig` in `src/config/website.ts` to use your newly added notification provider.

```typescript
notification: {
  enable: true,
  provider: 'slack',
},
```

--------------------------------

### Configure Beehiiv Environment Variables

Source: https://docs.tanstarter.dev/docs/newsletter

Add your Beehiiv API key and Publication ID to the .env file.

```dotenv
BEEHIIV_API_KEY=your-beehiiv-api-key
BEEHIIV_PUBLICATION_ID=your-beehiiv-publication-id
```

--------------------------------

### Implement MailProvider Interface

Source: https://docs.tanstarter.dev/docs/email

Create a new class that implements the `MailProvider` interface, providing methods for sending emails. This is for adding custom mail providers.

```typescript
import type {
  MailProvider,
  SendEmailResult,
  SendRawEmailParams,
  SendTemplateParams,
} from '../types';

export class SendGridProvider implements MailProvider {
  getProviderName(): string {
    return 'sendgrid';
  }

  async sendTemplate(params: SendTemplateParams): Promise<SendEmailResult> {
    // Logic for sending emails using templates
  }

  async sendRawEmail(params: SendRawEmailParams): Promise<SendEmailResult> {
    // Logic for sending raw HTML emails
  }
}
```

--------------------------------

### Update Inlang Settings for New Locales

Source: https://docs.tanstarter.dev/docs/i18n

Add new locales to the `project.inlang/settings.json` file to register them with Inlang.

```json
{
  "baseLocale": "en",
  "locales": ["en", "zh", "ja"]
}
```

--------------------------------

### MkImage Environment Variables Configuration

Source: https://docs.tanstarter.dev/docs/mkimage

Configure these environment variables to set up the MkImage generator, including the image model provider and storage settings.

```dotenv
# Image Generator (apimart, fal, or kie)
IMAGE_MODEL_PROVIDER='apimart'
VITE_SHOW_IMAGE_PROVIDER='false'
VITE_ENABLE_IMAGE_GENERATION='true'

# Fal
FAL_KEY=''

# APIMart
APIMART_KEY=''

# KIE
KIE_KEY=''

# Storage (R2) - for prompts and prompt images
R2_BUCKET_NAME=''
R2_ACCESS_KEY_ID=''
R2_SECRET_ACCESS_KEY=''
R2_PUBLIC_URL=''

```

--------------------------------

### Sync Build-time Environment Variables to GitHub Secrets

Source: https://docs.tanstarter.dev/docs/deployment

This command syncs build-time environment variables from .env.production to GitHub Secrets and ensures the deploy.yml workflow has access to them.

```bash
pnpm sync-github-secrets

```

--------------------------------

### Configure APIMart Provider

Source: https://docs.tanstarter.dev/docs/mkimage

Set the IMAGE_MODEL_PROVIDER to 'apimart' and provide your APIMart API key as APIMART_KEY. You need to create an account on apimart.ai and generate an API key.

```env
IMAGE_MODEL_PROVIDER='apimart'
APIMART_KEY='your-apimart-api-key'
```

--------------------------------

### Implement Custom Newsletter Provider

Source: https://docs.tanstarter.dev/docs/newsletter

Create a custom newsletter provider by implementing the NewsletterProvider interface and registering it.

```typescript
import type {
  CheckSubscribeStatusParams,
  NewsletterProvider,
  SubscribeNewsletterParams,
  UnsubscribeNewsletterParams,
} from '@/newsletter/types';

export class CustomNewsletterProvider implements NewsletterProvider {
  constructor() {
    // Initialize your newsletter service provider
  }

  public getProviderName(): string {
    return 'custom';
  }

  async subscribe({ email }: SubscribeNewsletterParams): Promise<boolean> {
    // Subscribe user implementation
    return true;
  }

  async unsubscribe({ email }: UnsubscribeNewsletterParams): Promise<boolean> {
    // Unsubscribe user implementation
    return true;
  }

  async checkSubscribeStatus({ email }: CheckSubscribeStatusParams): Promise<boolean> {
    // Check subscription status implementation
    return true;
  }
}
```

```typescript
import { CustomNewsletterProvider } from './provider/custom-provider';

const providerRegistry: Record<NewsletterProviderName, ProviderFactory> = {
  resend: () => new ResendNewsletterProvider(),
  beehiiv: () => new BeehiivNewsletterProvider(),
  custom: () => new CustomNewsletterProvider(),
};
```
Tokens:
Raw