Skip to content
RocketFuel CLI

Customization

RocketFuel provides a solid foundation. This guide covers common customizations.

Theming

Tailwind Configuration

Customize colors, fonts, and spacing in tailwind.config.ts:

import type { Config } from "tailwindcss";


const config: Config = {
  // ...existing config
  theme: {
    extend: {
      colors: {
        brand: {
          50: "#f0f9ff",
          500: "#0ea5e9",
          900: "#0c4a6e",
        },
      },
      fontFamily: {
        sans: ["Inter", "sans-serif"],
      },
    },
  },
};

shadcn/ui Themes

Modify CSS variables in src/app/globals.css:

@layer base {
  :root {
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    /* ... */
  }


  .dark {
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;
    /* ... */
  }
}

Adding Components

Add new shadcn/ui components as needed:

Terminal window
npx shadcn@latest add dialog
npx shadcn@latest add dropdown-menu
npx shadcn@latest add toast

Browse all components at ui.shadcn.com.

Database Changes

Adding Tables

Edit src/server/db/schema.ts:

export const posts = pgTable("posts", {
  id: text("id").primaryKey(),
  title: text("title").notNull(),
  content: text("content"),
  authorId: text("author_id").references(() => user.id),
  createdAt: timestamp("created_at").defaultNow(),
});

Then push changes:

Terminal window
npx drizzle-kit push

Adding Relations

import { relations } from "drizzle-orm";


export const userRelations = relations(user, ({ many }) => ({
  posts: many(posts),
}));


export const postRelations = relations(posts, ({ one }) => ({
  author: one(user, {
    fields: [posts.authorId],
    references: [user.id],
  }),
}));

Authentication Customization

Adding OAuth Providers

src/lib/auth.ts
export const auth = betterAuth({
  // ...existing config
  socialProviders: {
    github: {
      clientId: process.env.GITHUB_CLIENT_ID!,
      clientSecret: process.env.GITHUB_CLIENT_SECRET!,
    },
  },
});

Custom Session Data

Extend session to include user roles:

export const auth = betterAuth({
  // ...existing config
  session: {
    expiresIn: 60 * 60 * 24 * 7, // 7 days
    updateAge: 60 * 60 * 24, // 1 day
  },
});

API Routes

Adding New Endpoints

Create new routes in src/app/api/:

src/app/api/posts/route.ts
import { db } from "@/server/db";
import { posts } from "@/server/db/schema";
import { NextResponse } from "next/server";


export async function GET() {
  const allPosts = await db.select().from(posts);
  return NextResponse.json(allPosts);
}


export async function POST(request: Request) {
  const data = await request.json();
  const newPost = await db.insert(posts).values(data).returning();
  return NextResponse.json(newPost[0]);
}

Deployment Configuration

Environment-Specific Settings

Add environment variables in Project Settings > Environment Variables.

Further Customization

The generated code is yours to modify. Common next steps:

  • Add middleware for authentication checks
  • Implement rate limiting
  • Add logging and monitoring
  • Set up error tracking (Sentry, etc.)
  • Add analytics