create-kroxt-app

An interactive, zero-configuration CLI scaffolding tool to spin up modern frontend projects pre-configured with the Kroxt BaaS Client SDK.

Features

• ⚡️ Instant Setup: Start coding in seconds with a single terminal command.
• 📦 Multi-Template Support: Includes production-ready templates for:
  • Next.js (App Router, TypeScript, modern React 19 / Next.js 16 context).
  • Vite + React (SPA, TypeScript, custom config structure).
  • React Native (Expo, TypeScript, AsyncStorage persistence adapter).
• 🎨 Optional Tailwind CSS: Prompts you to include Tailwind CSS or strips it automatically to write ultra-premium vanilla CSS stylesheets instead.
• 🔑 Automatic Credential Binding: Automatically configures .env, .env.local, or config.ts credentials so your application connects to your database collection immediately.

Quickstart

Run the following command in your terminal:

npx create-kroxt-app

Or target a specific directory directly:

npx create-kroxt-app my-new-project

Interactive Prompts

The CLI will walk you through a brief configuration wizard:

1. Project Name: The folder name where your application will be scaffolded.
2. Template Framework: Choose between Next.js (App Router), Vite + React (SPA), or React Native (Expo).
3. Tailwind CSS Choice: Toggle y/n to select your styling paradigm. Choosing no cleans up the package json and replaces Tailwind imports with vanilla layouts.
4. Project ID & Public API Key: Paste your credentials directly from your Kroxt Dashboard.

Template Structures

Every template contains a ready-to-run Collection Sandbox page that performs CRUD operations on a todos collection in your Kroxt database.

1. Next.js Template

• SDK Initialization: Pre-configured in lib/kroxt.ts using type-safe configuration bindings.
• State Management: Uses React 19 state parameters and type-safe Document generics mapping.
• Environment: Reads from .env.local files automatically.

2. Vite + React Template

• SDK Initialization: Pre-configured inside the requested modular configuration path: src/config/kroxt.ts.
• State Management: Fully type-safe React SPA layout.
• Environment: Reads from .env files automatically.

3. React Native (Expo) Template

• SDK Initialization: Pre-configured inside src/kroxt.ts and loaded with the Expo AsyncStorage storage adapter.
• State Management: React Native native components styling.
• Environment: Reads constants from the compiled src/config.ts configuration file.

Development Workflow

Once your project is created, navigate into your project directory and start the local development server:

Next.js & Vite

cd <project-name>
npm run dev

React Native (Expo)

cd <project-name>
npm run start

SDK Integration Patterns

Your scaffolded applications use the official @kroxt/baas-sdk package.

Type-Safe Collection Operations

To prevent type casting errors (TS2352), pass your document schema interface parameters directly to the collection orchestrator:

import { Document } from "@kroxt/baas-sdk";
import { baas } from "./config/kroxt"; // Vite path representation

// Declare your collection document schema
type Todo = Document<{
  text: string;
  completed: boolean;
}>;

// Fetch documents with schema validation
const fetchTodos = async () => {
  const data = await baas.collection<{ text: string; completed: boolean }>("todos").get();
  const todosList: Todo[] = data as Todo[];
  console.log(todosList[0].data.text); // Access fields inside the nested data envelope
};

License

MIT