React Router 7 and Supabase

https://makerkit.dev/docs/react-router-supabase-turbo
Admin
A Supabase-native SaaS starter kit built for React Router 7, providing a comprehensive platform to...
Tokens:94,638
Snippets:931
Trust Score:8.6
Update:9 months ago
Show doc for...
Tokens:
Raw
### Install and Setup Pnpm and Project Dependencies

Source: https://makerkit.dev/docs/react-router-supabase-turbo/installation/clone-repository

Installs the pnpm package manager globally and then installs all project dependencies using pnpm. This step is essential after cloning the repository to ensure all necessary packages are available for development.

```bash
# Install pnpm
npm i -g pnpm
```

```bash
# Install dependencies
pnpm i
```

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

### Start Project Server

Source: https://makerkit.dev/docs/react-router-supabase-turbo/going-to-production/fly

This command initiates the project server. It's the default command and can be overridden at runtime. Ensure pnpm is installed and the project dependencies are managed by it.

```dockerfile
CMD ["pnpm", "start"]
```

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

### Install Project Dependencies

Source: https://makerkit.dev/docs/react-router-supabase-turbo/installation/common-commands

Installs all necessary dependencies for the project. This is a prerequisite for running the project or performing other development tasks.

```bash
pnpm i
```

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

### Configure Post-Merge Git Hook for Automatic Dependency Installation

Source: https://makerkit.dev/docs/react-router-supabase-turbo/installation/clone-repository

Sets up a Git post-merge hook to automatically run `pnpm i` after pulling updates. This ensures that project dependencies are always up-to-date, preventing potential issues caused by outdated packages. It involves creating and making the `post-merge` script executable.

```bash
touch .git/hooks/post-merge
```

```bash
#!/bin/bash
pnpm i
```

```bash
chmod +x .git/hooks/post-merge
```

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

### Clone React Router Supabase SaaS Kit Turbo Repository

Source: https://makerkit.dev/docs/react-router-supabase-turbo/installation/clone-repository

Clones the project repository from GitHub. Provides commands for both SSH and HTTPS protocols, advising users to select the method that suits their setup. Also includes instructions for Windows users to avoid path length issues and to manage remote origins.

```bash
git clone git@github.com:makerkit/react-router-supabase-saas-kit-turbo
```

```bash
git clone https://github.com/makerkit/react-router-supabase-saas-kit-turbo
```

```bash
git remote rm origin
```

```bash
git remote add upstream git@github.com:makerkit/react-router-supabase-saas-kit-turbo
```

```bash
git pull upstream main
```

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

### Install Project Dependencies

Source: https://makerkit.dev/docs/react-router-supabase-turbo/going-to-production/vps

Navigates into the project directory (replace 'repo' with your repository's name) and installs all project dependencies using PNPM.

```bash
cd repo # Replace repo with the name of the repository
pnpm install

```

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

### Clean and Reinstall Workspace Packages

Source: https://makerkit.dev/docs/react-router-supabase-turbo/troubleshooting/troubleshooting-installation

This command sequence helps resolve issues with the React Router dev server not starting by cleaning the workspace, deleting pnpm-lock.yaml, and reinstalling all packages.

```bash
pnpm run clean:workspace
pnpm run clean
pnpm i
```

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

### Install Node.js and PNPM

Source: https://makerkit.dev/docs/react-router-supabase-turbo/going-to-production/vps

Installs Node.js version 20 using NVM and then installs PNPM globally via npm. These are prerequisites for managing project dependencies.

```bash
nvm install 20

npm install -g pnpm

```

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

### Start Supabase Service

Source: https://makerkit.dev/docs/react-router-supabase-turbo/installation/common-commands

Starts the Supabase local development server. This command is necessary for interacting with Supabase features during development.

```bash
pnpm run supabase:web:start
```

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

### Multi Step Form Usage Example in React

Source: https://makerkit.dev/docs/react-router-supabase-turbo/components/multi-step-forms

Demonstrates how to integrate and use the MultiStepForm component for creating multi-step forms. It shows the basic setup with form schema definition, React Hook Form initialization, and rendering of form steps.

```jsx
import { MultiStepForm, MultiStepFormStep } from '@kit/ui/multi-step-form';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';

const FormSchema = createStepSchema({
  step1: z.object({ /* ... */ }),
  step2: z.object({ /* ... */ }),
});

export function MyForm() {
  const form = useForm({
    resolver: zodResolver(FormSchema),
    // ...
  });

  const onSubmit = (data) => {
    // Handle form submission
  };

  return (
    <MultiStepForm schema={FormSchema} form={form} onSubmit={onSubmit}>
      <MultiStepFormStep name="step1">
        {/* Step 1 fields */}
      </MultiStepFormStep>
      <MultiStepFormStep name="step2">
        {/* Step 2 fields */}
      </MultiStepFormStep>
    </MultiStepForm>
  );
}
```

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

### Start Development Server with PNPM

Source: https://makerkit.dev/docs/react-router-supabase-turbo/installation/running-project

This command starts the web application's development server using PNPM. Ensure all environment variables are correctly set up in the .env file before running. Refer to the web application's README for further details.

```bash
pnpm dev
```

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

### Start Development Server

Source: https://makerkit.dev/docs/react-router-supabase-turbo/installation/common-commands

Launches the local development server for the React Router Supabase Turbo Starter Kit. This command allows you to view and interact with your application during development.

```bash
pnpm run dev
```

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

### Install Node Version Manager (NVM)

Source: https://makerkit.dev/docs/react-router-supabase-turbo/going-to-production/vps

Installs NVM (Node Version Manager) using a curl script. NVM allows you to manage multiple Node.js versions on your system. After installation, it loads NVM and its bash completion for the current session.

```bash
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

```

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

### Configure Git Username

Source: https://makerkit.dev/docs/react-router-supabase-turbo/installation/clone-repository

Ensures your local Git username matches your GitHub username within the Makerkit organization. This is crucial for repository access and functionality. It involves checking the current username and setting it globally if necessary.

```bash
git config user.username
```

```bash
git config --global user.username "Your Github Username"
```

```bash
git config --global user.username "johndoe"
```

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

### Start Stripe Webhook Listener

Source: https://makerkit.dev/docs/react-router-supabase-turbo/installation/common-commands

Initiates Stripe's webhook listener on your local machine. This is crucial for testing billing functionalities and ensuring webhooks are correctly routed during development.

```bash
pnpm run stripe:listen
```

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

### Install Umami Analytics Package

Source: https://makerkit.dev/docs/react-router-supabase-turbo/analytics/umami-analytics-provider

Installs the @kit/umami package using the Makerkit CLI and pnpm. This command pulls the Umami plugin and adds it as a dependency to the @kit/analytics package.

```bash
npx @makerkit/cli@latest plugins install
pnpm add "@kit/umami@workspace:*" --filter "@kit/analytics" -D
```

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

### Using the DataTable Component in React

Source: https://makerkit.dev/docs/react-router-supabase-turbo/components/data-table

Demonstrates how to import and use the DataTable component from '@kit/ui/enhanced-data-table'. This example shows the basic setup with required 'columns' and 'data' props, along with optional pagination controls.

```jsx
import { DataTable } from '@kit/ui/enhanced-data-table';

function MyComponent() {
  const columns = [
    // Define your columns here
  ];
  const data = [
    // Your data array
  ];

  return (
    <DataTable
      columns={columns}
      data={data}
      pageSize={10}
      pageIndex={0}
      pageCount={5}
    />
  );
}
```

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

### Run React App in Docker Runner Stage

Source: https://makerkit.dev/docs/react-router-supabase-turbo/going-to-production/fly

The runner stage in this Dockerfile is responsible for deploying the built React application. It starts from a slim Node.js image, sets the working directory, copies the application build from the builder stage, installs production dependencies with pnpm, and exposes the application port.

```dockerfile
# Stage 2: Runner
FROM node:${NODE_VERSION}-slim AS runner
# Set the working directory in the container
WORKDIR /app
# Copy built application from the builder stage
COPY --from=builder /app/apps/web /app
# Install pnpm in the final stage to ensure it's available for runtime
RUN npm install -g pnpm
RUN pnpm install --prod
# Expose the port the app runs on
EXPOSE 8080
```

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

### React Page Component Header Layout Example

Source: https://makerkit.dev/docs/react-router-supabase-turbo/components/page

Provides an example of the header layout style for the Page component, including a sticky header option. It demonstrates the use of PageNavigation, PageMobileNavigation, PageHeader, and PageBody with custom navigation and content components.

```jsx
<Page style="header" sticky={true}>
  <PageNavigation>
    <HeaderNavLinks />
  </PageNavigation>
  <PageMobileNavigation>
    <MobileMenu />
  </PageMobileNavigation>
  <PageBody>
    <PageHeader title="Profile" description="Manage your account settings" />
    <ProfileSettings />
  </PageBody>
</Page>
```

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

### React Page Component Sidebar Layout Example

Source: https://makerkit.dev/docs/react-router-supabase-turbo/components/page

Illustrates the implementation of a sidebar layout using the Page component. This example shows how to integrate custom components like SidebarContent, UserMenu, and DashboardContent within the Page structure.

```jsx
<Page style="sidebar">
  <PageNavigation>
    <SidebarContent />
  </PageNavigation>
  <PageHeader title="Dashboard" description="Overview of your account">
    <UserMenu />
  </PageHeader>
  <PageBody>
    <DashboardContent />
  </PageBody>
</Page>
```

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

### Send Plain Text Email (TypeScript)

Source: https://makerkit.dev/docs/react-router-supabase-turbo/emails/sending-emails

An example of sending a plain text email using the `getMailer` function and the `sendEmail` method. It demonstrates how to instantiate the mailer and provide email content.

```typescript
import { getMailer } from '@kit/mailers';
async function sendEmail(params: {
  from: string;
  to: string;
}) {
  const mailer = await getMailer();
  return mailer.sendEmail({
    to: params.from,
    from: params.to,
    subject: 'Hello',
    text: 'Hello, World!'
  });
}
```

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

### Complete Card Button Example (React)

Source: https://makerkit.dev/docs/react-router-supabase-turbo/components/card-button

A comprehensive example showing how to import and use all CardButton components together in a React component.

```jsx
import {
  CardButton,
  CardButtonTitle,
  CardButtonHeader,
  CardButtonContent,
  CardButtonFooter
} from '@kit/ui/card-button';

function MyCardButton() {
  return (
    <CardButton onClick={() => console.log('Card clicked')}>
      <CardButtonHeader>
        <CardButtonTitle>Featured Item</CardButtonTitle>
      </CardButtonHeader>
      <CardButtonContent>
        <p>This is a detailed description of the featured item.</p>
      </CardButtonContent>
      <CardButtonFooter>
        <span>Click to learn more</span>
      </CardButtonFooter>
    </CardButton>
  );
}
```

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

### Install @kit/analytics Package

Source: https://makerkit.dev/docs/react-router-supabase-turbo/analytics/posthog-analytics-provider

Installs the `@kit/analytics` package using the Makerkit CLI. Select the 'PostHog' package when prompted to add it to your project, creating a `packages/plugins/posthog` directory.

```bash
npx @makerkit/cli@latest plugins install

```

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

### Wordpress Docker Compose and Credentials

Source: https://makerkit.dev/docs/react-router-supabase-turbo/content/wordpress

Provides commands to start the Wordpress Docker container for development and lists the database credentials required for the Wordpress instance.

```bash
docker-compose up
```

```bash
pnpm run start
```

```bash
WORDPRESS_DB_HOST=db
WORDPRESS_DB_USER=wordpress
WORDPRESS_DB_PASSWORD=wordpress
WORDPRESS_DB_NAME=wordpress
```

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

### Display Full-page Overlay

Source: https://makerkit.dev/docs/react-router-supabase-turbo/components/loading-overlay

An example of implementing a full-page loading overlay. This is typically used when an entire page or significant section of the application is loading, providing visual feedback to the user.

```jsx
<LoadingOverlay>
  Please wait while we load your dashboard...
</LoadingOverlay>
```

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

### Configure Billing Schema - Basic Setup (TypeScript)

Source: https://makerkit.dev/docs/react-router-supabase-turbo/billing/billing-schema

Initializes the billing schema configuration. Sets the billing provider and prepares for product definition. Requires the 'createBillingSchema' function.

```typescript
import { createBillingSchema } from "@makerkit/billing";

export default createBillingSchema({
  // also update config.billing_provider in the DB to match the selected
  provider,
  // products configuration
  products: []
});
```

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

### Send HTML Email (TypeScript)

Source: https://makerkit.dev/docs/react-router-supabase-turbo/emails/sending-emails

An example demonstrating how to send an HTML formatted email. It utilizes the `html` property within the `sendEmail` method to include rich text content.

```typescript
import { getMailer } from '@kit/mailers';
async function sendEmail(params: {
  from: string;
  to: string;
}) {
  const mailer = await getMailer();
  return mailer.sendEmail({
    to: params.from,
    from: params.to,
    subject: 'Hello',
    html: '<h1>Hello, World!</h1>'
  });
}
```

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

### Install Vercel Preset for React Router

Source: https://makerkit.dev/docs/react-router-supabase-turbo/going-to-production/vercel

Installs the '@vercel/react-router' package as a development dependency for the 'web' application using pnpm. This package is necessary for configuring Vercel-specific presets in the React Router setup.

```bash
pnpm add --filter web --save-dev "@vercel/react-router"
```

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

### Run Project Tests

Source: https://makerkit.dev/docs/react-router-supabase-turbo/installation/common-commands

Executes all defined tests within the project. This command is used to verify the functionality and stability of the application.

```bash
pnpm run test
```

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

### Clean Project and Reinstall Dependencies

Source: https://makerkit.dev/docs/react-router-supabase-turbo/installation/common-commands

Cleans build artifacts and caches for the entire project and its workspaces, then reinstalls all dependencies. This is useful for resolving issues caused by stale build outputs or dependency conflicts.

```bash
pnpm run clean:workspaces
pnpm run clean
pnpm i
```

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

### Basic Loader Structure in React Router Supabase

Source: https://makerkit.dev/docs/react-router-supabase-turbo/data-fetching/loaders

Demonstrates the fundamental structure of a loader function in React Router Supabase Turbo. Loaders fetch data before a component renders, running on navigation and passing data via props. This example shows how to get a Supabase client and retrieve data.

```typescript
export const loader = async (args: Route.LoaderArgs) => {
  // Get Supabase client
  const client = getSupabaseServerClient(args.request);
  // Retrieve data
  const data = await fetchSomeData(client);
  // Return data to the component
  return {
    title: "My Page",
    data
  };
};
```

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

### Format Project

Source: https://makerkit.dev/docs/react-router-supabase-turbo/installation/common-commands

Formats the project's code using Prettier to ensure consistent styling. This command automatically adjusts code formatting according to predefined rules.

```bash
pnpm run format:fix
```

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

### Lint Project

Source: https://makerkit.dev/docs/react-router-supabase-turbo/installation/common-commands

Applies linting rules to the project using ESLint and automatically fixes common linting issues. This command helps maintain code quality and consistency.

```bash
pnpm run lint:fix
```

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

### Sample .env File Configuration for React Router Supabase Starter Kit

Source: https://makerkit.dev/docs/react-router-supabase-turbo/configuration/environment-variables

This snippet shows a sample `.env` file for local development, defining various public environment variables. These variables control site settings, authentication options, billing providers, CMS configurations, locale paths, navigation paths, and feature flags. Variables prefixed with `VITE_` are accessible client-side.

```dotenv
# SITE
VITE_SITE_URL=http://localhost:5173
VITE_PRODUCT_NAME=Makerkit
VITE_SITE_TITLE="Makerkit - The easiest way to build and manage your SaaS"
VITE_SITE_DESCRIPTION="Makerkit is the easiest way to build and manage your SaaS. It provides you with the tools you need to build your SaaS, without the hassle of building it from scratch."
VITE_DEFAULT_THEME_MODE=light
VITE_THEME_COLOR="#ffffff"
VITE_THEME_COLOR_DARK="#0a0a0a"
# AUTH
VITE_AUTH_PASSWORD=true
VITE_AUTH_MAGIC_LINK=false
VITE_CAPTCHA_SITE_KEY=
# BILLING
VITE_BILLING_PROVIDER=stripe
# CMS
CMS_CLIENT=keystatic
# KEYSTATIC
VITE_KEYSTATIC_CONTENT_PATH=./content
# LOCALES PATH
VITE_LOCALES_PATH=apps/web/public/locales
# PATHS (to be used in "packages")
SIGN_IN_PATH=/auth/sign-in
SIGN_UP_PATH=/auth/sign-up
TEAM_ACCOUNTS_HOME_PATH=/home
INVITATION_PAGE_PATH=/join
# FEATURE FLAGS
VITE_ENABLE_THEME_TOGGLE=true
VITE_ENABLE_PERSONAL_ACCOUNT_DELETION=true
VITE_ENABLE_PERSONAL_ACCOUNT_BILLING=true
VITE_ENABLE_TEAM_ACCOUNTS_DELETION=true
VITE_ENABLE_TEAM_ACCOUNTS_BILLING=true
VITE_ENABLE_TEAM_ACCOUNTS=true
VITE_ENABLE_TEAM_ACCOUNTS_CREATION=true

```

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

### Install OTP Package

Source: https://makerkit.dev/docs/react-router-supabase-turbo/api/otp-api

Installs the OTP package using pnpm. This package provides functionality for generating, sending, and verifying one-time passwords.

```bash
pnpm add @kit/otp
```

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

### Database Configuration for Accounts

Source: https://makerkit.dev/docs/react-router-supabase-turbo/configuration/environment-variables

SQL statements to configure account types and billing at the database level. Ensures data consistency with environment variable settings.

```sql
create table if not exists public.config(
    enable_team_accounts boolean default true not null,
    enable_account_billing boolean default true not null,
    enable_team_account_billing boolean default true not null,
    billing_provider public.billing_provider default 'stripe' not null
);
```

```sql
update config set enable_account_billing = true;
```

```sql
update config set enable_team_account_billing = true;
```

```sql
update config set enable_team_accounts = false;
```

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

### Install Package for Main App

Source: https://makerkit.dev/docs/react-router-supabase-turbo/troubleshooting/troubleshooting-module-not-found

Installs a new package specifically for the main application within the project. This command uses a filter to target the 'web' package.

```shell
pnpm install my-package --filter web
```

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

### Run Supabase CLI Commands

Source: https://makerkit.dev/docs/react-router-supabase-turbo/installation/common-commands

Executes Supabase CLI commands within the context of the web application. This is used for interacting with your Supabase project, such as linking or managing database migrations.

```bash
pnpm --filter web supabase <command>
```

```bash
pnpm --filter web supabase link
```

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

### Install @kit/analytics Package

Source: https://makerkit.dev/docs/react-router-supabase-turbo/analytics/google-analytics-provider

Installs the '@kit/analytics' package and selects the Google Analytics provider using the Makerkit CLI. This makes the Google Analytics plugin available in your project.

```bash
npx @makerkit/cli@latest plugins install
```

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

### Update Navigation Configuration (TypeScript)

Source: https://makerkit.dev/docs/react-router-supabase-turbo/development/adding-pages

Adds a new navigation item for 'Reports' to the personal account navigation. This includes a label, an icon, and the corresponding path, making the 'Reports' page discoverable in the user interface.

```typescript
// Add this to the routes array
{
  label: 'account:reportsTabLabel',
  Icon: <BarChart className={'h-4'} />,
  path: '/home/reports',
  end: true,
},
```

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

### Install Package for Specific UI Component Package

Source: https://makerkit.dev/docs/react-router-supabase-turbo/troubleshooting/troubleshooting-module-not-found

Installs a new package intended for a specific component package, identified by its scope '@kit/ui'. This ensures the dependency is correctly placed.

```shell
pnpm install my-package --filter @kit/ui
```

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

### Start and Reset Local Supabase Database

Source: https://makerkit.dev/docs/react-router-supabase-turbo/development/migrations

Commands to start the local Supabase service and then reset the database to apply pending migrations. These commands are executed via pnpm scripts.

```bash
pnpm run supabase:web:start
pnpm run supabase:web:reset

```

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

### TypeScript Example with Render Props

Source: https://makerkit.dev/docs/react-router-supabase-turbo/components/if

An example showcasing the type-safe usage of the If component's render props pattern in TypeScript. It passes a user object and renders UserProfile component with typed user properties.

```jsx
<If condition={user}>
  {(user) => <UserProfile name={user.name} email={user.email} />}
</If>
```

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

### Preview Application in Cloudflare Environment

Source: https://makerkit.dev/docs/react-router-supabase-turbo/going-to-production/cloudflare

This command provides a preview of the application in an environment that mimics Cloudflare's deployment. It is recommended to run this before deploying to identify potential issues.

```bash
pnpm --filter web run preview
```

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

### Type-Check Project

Source: https://makerkit.dev/docs/react-router-supabase-turbo/installation/common-commands

Performs a type check across the entire project using TypeScript. This command helps identify type-related errors without compiling the code.

```bash
pnpm run typecheck
```

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

### Numbered Stepper Variant Example

Source: https://makerkit.dev/docs/react-router-supabase-turbo/components/stepper

Illustrates the 'numbers' variant of the Stepper component, suitable for sequential processes where clear step numbering is desired. This example shows three steps: 'Account', 'Personal Info', and 'Review', with 'Personal Info' as the active step.

```jsx
<Stepper
  steps={['Account', 'Personal Info', 'Review']}
  currentStep={1}
  variant="numbers"
/>
```

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

### Link Supabase Project Locally

Source: https://makerkit.dev/docs/react-router-supabase-turbo/going-to-production/checklist

Links your local development environment to your Supabase project. This is a prerequisite for managing your Supabase database and other services from your local machine.

```bash
supabase link
```

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

### Custom CMS Client Implementation Example

Source: https://makerkit.dev/docs/react-router-supabase-turbo/content/creating-your-own-cms-client

Provides an example of a custom CMS client ('MyCmsClient') that extends the abstract CmsClient. It demonstrates how to implement methods to fetch data from a hypothetical external API using the fetch API. This client handles content items, categories, and tags, including error handling for 404 responses.

```typescript
import { CmsClient } from '@kit/cms';

export class MyCmsClient extends CmsClient {
  async getContentItems(options) {
    const response = await fetch('https://my-cms-api.com/content', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(options),
    });
    const { total, items } = await response.json();
    return { total, items };
  }
  async getContentItemBySlug({ slug, collection }) {
    const response = await fetch(
      `https://my-cms-api.com/content/${collection}/${slug}`,
    );
    if (response.status === 404) {
      return undefined;
    }
    return response.json();
  }
  async getCategories(options) {
    const response = await fetch('https://my-cms-api.com/categories', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(options),
    });
    return response.json();
  }
  async getCategoryBySlug(slug) {
    const response = await fetch(`https://my-cms-api.com/categories/${slug}`);
    if (response.status === 404) {
      return undefined;
    }
    return response.json();
  }
  async getTags(options) {
    const response = await fetch('https://my-cms-api.com/tags', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(options),
    });
    return response.json();
  }
  async getTagBySlug(slug) {
    const response = await fetch(`https://my-cms-api.com/tags/${slug}`);
    if (response.status === 404) {
      return undefined;
    }
    return response.json();
  }
}
```

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

### CardButtonContent Component Usage (React)

Source: https://makerkit.dev/docs/react-router-supabase-turbo/components/card-button

Provides an example of using the CardButtonContent component for the main body of the card button.

```jsx
<CardButtonContent>
  <p>Main card content goes here</p>
</CardButtonContent>
```

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

### Setup Pre-Commit Hook Script

Source: https://makerkit.dev/docs/react-router-supabase-turbo/installation/code-health

Create a shell script named 'pre-commit' in the './.git/hooks' directory to automate code linting and typechecking before each commit. This script uses 'pnpm' to execute 'typecheck' and 'lint' commands, ensuring code quality and consistency. Turborepo optimizes these commands to run only on affected packages.

```shell
#!/bin/sh
pnpm run typecheck
pnpm run lint
```

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

### Internationalization in Loaders

Source: https://makerkit.dev/docs/react-router-supabase-turbo/data-fetching/loaders

Illustrates how to integrate internationalization (i18n) into loader functions. This example fetches translated strings using `createI18nServerInstance` to ensure localized content is available before rendering.

```typescript
export const loader = async (args: Route.LoaderArgs) => {
  const i18n = await createI18nServerInstance(args.request);
  return {
    title: i18n.t('account:settingsTab')
  };
};
```

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

### Basic Conditional Rendering with If Component

Source: https://makerkit.dev/docs/react-router-supabase-turbo/components/if

An example illustrating the simplest form of using the If component, where it conditionally renders a LoadingSpinner based on an 'isLoading' condition.

```jsx
<If condition={isLoading}>
  <LoadingSpinner />
</If>
```

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

### Track Events with Analytics API

Source: https://makerkit.dev/docs/react-router-supabase-turbo/analytics/analytics-api

Records specific user actions or events using the `trackEvent` method from `@kit/analytics`. This allows for detailed monitoring of user interactions within the application.

```typescript
void analytics.trackEvent('Button Clicked', {
  buttonName: 'Submit',
  page: 'Sign Up',
});
```

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

### Clone Git Repository with Personal Access Token

Source: https://makerkit.dev/docs/react-router-supabase-turbo/going-to-production/vps

Clones a Git repository to the Digital Ocean Droplet using a Personal Access Token (PAT) for authentication. Ensure you replace `<PAT>` with your actual GitHub PAT and `username/repo` with your repository details.

```bash
git clone https://<PAT>@github.com/username/repo.git

```

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

### Scaffold Project for Cloudflare

Source: https://makerkit.dev/docs/react-router-supabase-turbo/going-to-production/cloudflare

This command scaffolds the project to be compatible with Cloudflare Pages. It adds necessary configuration files and installs required dependencies for the Cloudflare deployment environment.

```bash
pnpm run turbo gen cloudflare
```
Tokens:
Raw