Create Varity App

Common errors

• command not found: create-varity-app

  cause The `create-varity-app` package is typically executed via `npx` and is not installed globally or directly in the system's PATH.
  fix Always use `npx create-varity-app my-app` to execute the package, which downloads and runs the latest version without global installation.

• TypeError: Cannot read properties of undefined (reading 'collection') when using `db`

  cause The Varity SDK's database client (`db`) might not be initialized correctly, or the application is running outside the Varity environment where it expects automatic configuration.
  fix Ensure the application is running within the Varity-generated project structure and that all necessary environment variables or configurations are in place as expected by the SDK's 'zero-config' setup. Check Varity documentation for explicit initialization steps if running outside a typical Varity app.

• Failed to authenticate / Login fails unexpectedly with AuthProvider or LoginButton

  cause Authentication issues in a Varity app can stem from incorrect Varity platform configuration (e.g., app ID, API keys), network issues preventing communication with Varity auth services, or misconfiguration of social login providers.
  fix Verify that your Varity project is correctly configured on the Varity platform. Check console logs for network errors or specific authentication error messages. Ensure that the `AuthProvider` wraps your application's components as per documentation.

Warnings

• gotcha The `create-varity-app` package and the underlying Varity platform are currently in a `2.0.0-beta.22` state. This indicates active development where APIs, features, and stability might change without strict adherence to semantic versioning for non-major releases, potentially leading to breaking changes between beta versions. Use in production with caution.
  Fix: Regularly consult the official Varity documentation and GitHub repository for updates and potential migration guides between beta releases. Pin dependencies to specific beta versions to ensure stability.
• gotcha While Varity is advertised as an all-in-one platform including payments, the documentation explicitly states that 'Payments (coming soon)' or that the 'PaymentWidget' is for 'post-beta' availability. This means the payments functionality may not be fully implemented or production-ready despite being part of the SDK/UI kit. This could lead to unexpected roadblocks for apps requiring immediate payment processing.
  Fix: Verify the current status of payments functionality in the latest Varity documentation before building critical payment-dependent features. Plan for alternative payment integrations if Varity's built-in solution is not yet stable or feature-complete for your needs.
• gotcha The Varity ecosystem includes both a JavaScript `create-varity-app` (via `npx`) and a Python `varitykit` CLI (via `pip`). Mixing these CLIs or misunderstanding their respective roles could lead to confusion or environment setup issues, especially regarding deployment commands (`varitykit deploy`).
  Fix: Be clear about which CLI tool is appropriate for each task. `create-varity-app` is for scaffolding new projects, while `varitykit` handles deployment and potentially other platform-level operations. Ensure Python and its package manager (`pip`) are correctly set up if using `varitykit`.

Install

• npm install create-varity-app npm
• yarn add create-varity-app yarn
• pnpm add create-varity-app pnpm

Imports

• create-varity-app
  wrong:

  import createVarityApp from 'create-varity-app'

  correct:

  npx create-varity-app my-app

  `create-varity-app` is primarily a CLI tool; its programmatic imports are not intended for direct use. Applications are scaffolded using `npx`.
• db
  wrong:

  import { database } from '@varity-labs/sdk'

  correct:

  import { db } from '@varity-labs/sdk'

  The database instance is exposed as `db` from the core SDK, not a more generic `database`.
• AuthProvider
  wrong:

  import { Auth } from '@varity-labs/ui-kit'

  correct:

  import { AuthProvider } from '@varity-labs/ui-kit'

  Authentication context for React components is provided by `AuthProvider` from the UI kit.
• LoginButton
  wrong:

  import { ButtonLogin } from '@varity-labs/ui-kit'

  correct:

  import { LoginButton } from '@varity-labs/ui-kit'

  Pre-built login component for UI integration.

Quickstart

Initializes a new Varity application, installs dependencies, starts the development server, and demonstrates basic database interaction and UI authentication components within the generated project structure.

npx create-varity-app my-awesome-app
cd my-awesome-app
npm install
npm run dev

// Example of using SDK within the created app (e.g., in a React component or API route):
import { db } from '@varity-labs/sdk';
import { AuthProvider, LoginButton } from '@varity-labs/ui-kit';

function MyAppComponent() {
  const handleAddPost = async () => {
    const posts = db.collection('posts');
    const newPost = await posts.add({
      title: 'My First Varity Post',
      content: 'Hello, Varity world!',
      authorId: 'user-123' // Replace with actual user ID from auth context
    });
    console.log('Added post:', newPost);
  };

  return (
    <AuthProvider>
      <div>
        <h1>Welcome to Varity!</h1>
        <LoginButton />
        <button onClick={handleAddPost}>Add Example Post</button>
      </div>
    </AuthProvider>
  );
}