### Install Shadcn UI Components Source: https://github.com/waltergit/rr7/blob/master/paths_configuration_personal_account_sidebar_configuration_team_account_sidebar_configuration_5.md These Bash commands demonstrate how to install Shadcn UI components into your project using `npx shadcn`. The `-c` or `--path` flag specifies the target directory for component installation, typically `packages/ui` in a monorepo setup. The first command is a general template, and the second provides a concrete example for installing the `Button` component. ```bash npx shadcn@latest add -c ./packages/ui ``` ```bash npx shadcn@latest add button -c ./packages/ui ``` -------------------------------- ### Install Project Dependencies with pnpm Source: https://github.com/waltergit/rr7/blob/master/configuring_supabase_database_webhooks_docker_fly_8.md Installs all project dependencies defined in the `pnpm-lock.yaml` file using pnpm. This command is essential for initial setup and for updating dependencies after pulling new changes. ```bash pnpm i ``` -------------------------------- ### Install Project Dependencies with PNPM Source: https://github.com/waltergit/rr7/blob/master/configuring_supabase_database_webhooks_docker_fly_8.md Navigates into the project repository and installs all required dependencies using pnpm, optimizing disk space and installation speed. ```bash cd repo # Replace repo with the name of the repository pnpm install ``` -------------------------------- ### Start Stripe Webhook Listener for Local Testing Source: https://github.com/waltergit/rr7/blob/master/conventions_faq_functional_walkthrough_9.md Command to start the Stripe webhook listener, routing webhooks to the local machine. This is essential for testing the billing system functionality during local development. ```bash pnpm run stripe:listen ``` -------------------------------- ### Install NVM (Node Version Manager) Source: https://github.com/waltergit/rr7/blob/master/configuring_supabase_database_webhooks_docker_fly_8.md Downloads and executes the NVM installation script from GitHub, allowing for easy management of Node.js versions on your system. ```bash curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash ``` -------------------------------- ### Default Application Start Command Source: https://github.com/waltergit/rr7/blob/master/configuring_supabase_database_webhooks_docker_fly_8.md Defines the default command to start the application within a containerized environment. This command uses 'pnpm start' and can be overridden at runtime, typically specified in a Dockerfile or similar container configuration. ```Dockerfile CMD ["pnpm", "start"] ``` -------------------------------- ### Starting the React Router Supabase Turbo Development Server Source: https://github.com/waltergit/rr7/blob/master/conventions_faq_functional_walkthrough_9.md Provides the command to start the web application's development server for the React Router Supabase Turbo project. This command initiates the local development environment, making the application accessible. ```bash # Start the development server pnpm dev ``` -------------------------------- ### Install Project Dependencies with pnpm Source: https://github.com/waltergit/rr7/blob/master/configuring_supabase_database_webhooks_docker_fly_8.md This command uses pnpm to install all required dependencies for the project. It should be run initially after cloning the repository and whenever `package.json` or `pnpm-lock.yaml` changes to ensure all packages are up-to-date. ```bash pnpm i ``` -------------------------------- ### Start Local Supabase Services Source: https://github.com/waltergit/rr7/blob/master/configuring_supabase_database_webhooks_docker_fly_8.md This command starts the local Supabase services required for development. It's essential for interacting with the database, authentication, and other Supabase features locally during development. ```bash pnpm run supabase:web:start ``` -------------------------------- ### Install Node.js Version 20 using NVM Source: https://github.com/waltergit/rr7/blob/master/configuring_supabase_database_webhooks_docker_fly_8.md Uses NVM to install Node.js version 20, ensuring the specified runtime is available for the project's development and deployment. ```bash nvm install 20 ``` -------------------------------- ### Start Supabase Local Development Server Source: https://github.com/waltergit/rr7/blob/master/conventions_faq_functional_walkthrough_9.md Command to initiate the Supabase web server for local development. This requires Docker to be running and adequately resourced. It's part of the `package.json` scripts. ```bash pnpm run supabase:web:start ``` -------------------------------- ### Full React Router Page Example with Loader and Meta Data Source: https://github.com/waltergit/rr7/blob/master/paths_configuration_personal_account_sidebar_configuration_team_account_sidebar_configuration_5.md This comprehensive example demonstrates a complete React Router page, integrating a server-side loader for data fetching (including Supabase client and i18n), user authentication, and dynamic meta data generation. The component then consumes the type-safe data provided by the loader, showcasing a robust and type-safe data flow for a full page. ```tsx import { getSupabaseServerClient } from '@kit/supabase/server-client'; import { PageBody } from '@kit/ui/page'; import { Trans } from '@kit/ui/trans'; import { createI18nServerInstance } from '~/lib/i18n/i18n.server'; import { requireUserLoader } from '~/lib/require-user-loader'; import type { Route } from '~/types/app/routes/home/account/+types'; import { TeamAccountLayoutPageHeader } from './_components/team-account-layout-page-header'; import { loadTeamData } from './_lib/team-data-loader.server'; export const loader = async (args: Route.LoaderArgs) => { const i18n = await createI18nServerInstance(args.request); // Require user authentication await requireUserLoader(args.request); const client = getSupabaseServerClient(args.request); const account = args.params.account as string; // Load team data const teamData = await loadTeamData(client, account); return { title: i18n.t('teams:home.pageTitle'), account, teamData }; }; export const meta = ({ data }: Route.MetaArgs) => { return [ { title: data?.title, }, ]; }; export default function TeamHomePage(props: Route.ComponentProps) { const { account, teamData } = props.loaderData; return ( <> } /> ); } ``` -------------------------------- ### Complete Account Deletion Flow Example Source: https://github.com/waltergit/rr7/blob/master/paths_configuration_personal_account_sidebar_configuration_team_account_sidebar_configuration_5.md A comprehensive example demonstrating an end-to-end account deletion flow. It includes the route's action definition, the React component's form submission logic, and the detailed implementation of the `deletePersonalAccountAction` including OTP verification and Supabase interaction. ```tsx export const action = async (args: Route.ActionArgs) => { const json = ActionsSchema.parse(await args.request.json()); const client = getSupabaseServerClient(args.request); switch (json.intent) { case 'delete-account': return deletePersonalAccountAction({ client, otp: json.payload.otp }); default: return new Response('Invalid action', { status: 400 }); } }; ``` ```tsx function DeleteAccountForm(props: { email: string }) { const form = useForm({ resolver: zodResolver(DeleteAccountFormSchema), defaultValues: { otp: '', }, }); const fetcher = useFetcher(); const pending = fetcher.state === 'submitting'; return (
{ return fetcher.submit( { intent: 'delete-account', payload: data, }, { encType: 'application/json', method: 'POST', }, ); })} > {/* Form fields */}
); } ``` ```tsx export const deletePersonalAccountAction = async ({ client, otp, }: { client: SupabaseClient; otp: string; }) => { const auth = await requireUser(client); if (!auth.data) { return redirectDocument(auth.redirectTo); } const user = auth.data; // Verify OTP const otpApi = createOtpApi(client); const result = await otpApi.verifyToken({ purpose: 'delete-personal-account', userId: user.id, token: otp, }); if (!result.valid) { throw new Error('Invalid OTP'); } // Delete account await deleteAccount(user.id); // Sign out and redirect await client.auth.signOut(); return redirectDocument('/'); }; ``` -------------------------------- ### Start Development Server Source: https://github.com/waltergit/rr7/blob/master/configuring_supabase_database_webhooks_docker_fly_8.md This command initiates the local development server for the web application. It's typically used during active development to view changes in real-time and interact with the application locally. ```bash pnpm run dev ``` -------------------------------- ### Install OTP Package Source: https://github.com/waltergit/rr7/blob/master/adding_super_admin_admin_analytics_and_events_1.md Command to install the `@kit/otp` package using pnpm, for manual installation outside of Makerkit. ```bash pnpm add @kit/otp ``` -------------------------------- ### Install PNPM Globally via NPM Source: https://github.com/waltergit/rr7/blob/master/configuring_supabase_database_webhooks_docker_fly_8.md Installs the pnpm package manager globally using npm, making it accessible from any directory for efficient dependency management. ```bash npm install -g pnpm ``` -------------------------------- ### Configure and Run Local WordPress CMS Instance Source: https://github.com/waltergit/rr7/blob/master/paths_configuration_personal_account_sidebar_configuration_team_account_sidebar_configuration_5.md Environment variables for integrating WordPress CMS, including API URL and database credentials. Also provides commands for starting a local WordPress development instance using Docker Compose or pnpm. ```bash CMS_CLIENT=wordpress ``` ```bash WORDPRESS_API_URL=http://localhost:8080 ``` ```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 ``` -------------------------------- ### Install pnpm Package Manager Source: https://github.com/waltergit/rr7/blob/master/configuring_supabase_database_webhooks_docker_fly_8.md Installs the pnpm package manager globally using npm. pnpm is an efficient alternative to npm or yarn for managing project dependencies. ```bash npm i -g pnpm ``` -------------------------------- ### Example: Link Supabase Database Source: https://github.com/waltergit/rr7/blob/master/configuring_supabase_database_webhooks_docker_fly_8.md This is an example of linking the Supabase database using the `pnpm --filter web supabase` prefix. It demonstrates how to adapt standard Supabase CLI commands for use within the project's monorepo structure, specifically for the 'web' application. ```bash pnpm --filter web supabase link ``` -------------------------------- ### Install Umami Analytics Plugin via Makerkit CLI Source: https://github.com/waltergit/rr7/blob/master/adding_super_admin_admin_analytics_and_events_1.md This command uses the Makerkit CLI to install the Umami analytics plugin into your project. It prompts the user to select 'Umami' from available packages, creating the necessary plugin directory. ```bash npx @makerkit/cli@latest plugins install ``` -------------------------------- ### Scaffold Cloudflare Project Configuration Source: https://github.com/waltergit/rr7/blob/master/seo_development_authentication_emails_7.md Executes the Turbo command to generate Cloudflare-specific configuration files and install necessary dependencies, preparing the project for Cloudflare deployment. ```bash pnpm run turbo gen cloudflare ``` -------------------------------- ### Install Vercel React Router Preset Source: https://github.com/waltergit/rr7/blob/master/configuring_supabase_database_webhooks_docker_fly_8.md Installs the `@vercel/react-router` package as a development dependency for the `web` application within a monorepo using pnpm. This package provides necessary presets for Vercel deployment. ```bash pnpm add --filter web --save-dev "@vercel/react-router" ``` -------------------------------- ### Supabase CLI Commands for Project Setup Source: https://github.com/waltergit/rr7/blob/master/seo_development_authentication_emails_7.md These commands are essential for initializing and synchronizing your local Supabase project with your remote Supabase instance. 'supabase link' connects your local project to a remote one, while 'supabase db push' applies local database migrations to the linked remote instance, ensuring your schema is up-to-date. ```bash supabase link ``` ```bash supabase db push ``` -------------------------------- ### Start Stripe Webhook Listener Source: https://github.com/waltergit/rr7/blob/master/configuring_supabase_database_webhooks_docker_fly_8.md This command initiates a local listener for Stripe webhooks, routing them to your development environment. It's crucial for testing billing and subscription functionalities locally without deploying to a live server. ```bash pnpm run stripe:listen ``` -------------------------------- ### Installing Analytics Plugins via Makerkit CLI Source: https://github.com/waltergit/rr7/blob/master/adding_super_admin_admin_analytics_and_events_1.md Installs available analytics plugins, such as Google Analytics, into the project using the Makerkit CLI tool, prompting the user to select desired packages. ```bash npx @makerkit/cli@latest plugins install ``` -------------------------------- ### Clean and Reinstall Project Dependencies Source: https://github.com/waltergit/rr7/blob/master/updating_codebase_installation_baselime_10.md This command sequence is used to resolve various issues, including development server startup failures and 'module not found' errors, by thoroughly cleaning the project workspace and reinstalling all dependencies. It addresses problems stemming from corrupted or incorrectly installed packages. ```bash pnpm run clean:workspace pnpm run clean pnpm i ``` -------------------------------- ### Configure Keystatic CMS Environment Variables Source: https://github.com/waltergit/rr7/blob/master/paths_configuration_personal_account_sidebar_configuration_team_account_sidebar_configuration_5.md Examples for setting environment variables to configure Keystatic CMS. This includes specifying the CMS client, storage kind (local, cloud, or GitHub), content path, and GitHub token for authentication with remote repositories. ```bash CMS_CLIENT=keystatic ``` ```bash VITE_KEYSTATIC_STORAGE_KIND=local # local, cloud, github VITE_KEYSTATIC_CONTENT_PATH=content # apps/web/content KEYSTATIC_PATH_PREFIX=apps/web ``` ```bash KEYSTATIC_STORAGE_KIND=cloud KEYSTATIC_STORAGE_PROJECT=project-id ``` ```bash VITE_KEYSTATIC_STORAGE_KIND=github VITE_KEYSTATIC_STORAGE_REPO=makerkit/react-router-supabase-saas-kit-turbo-demo KEYSTATIC_GITHUB_TOKEN=github_***************************************************** KEYSTATIC_PATH_PREFIX=apps/web VITE_KEYSTATIC_CONTENT_PATH=./content ``` ```bash VITE_KEYSTATIC_CONTENT_PATH=data/content ``` -------------------------------- ### Generate Dockerfile for Project Source: https://github.com/waltergit/rr7/blob/master/configuring_supabase_database_webhooks_docker_fly_8.md Runs the `turbo gen docker` command using pnpm to automatically generate a `Dockerfile` in the root of the project. This command also installs any additional dependencies required for building the project within a Docker environment. ```bash pnpm run turbo gen docker ``` -------------------------------- ### Migrating Route Components from Remix to React Router Source: https://github.com/waltergit/rr7/blob/master/conventions_faq_functional_walkthrough_9.md This example showcases the necessary changes when migrating a route component from Remix to React Router. It highlights updates to import statements, loader function type definitions, and how `useLoaderData` is accessed. ```tsx // routes/some-page.tsx import { json, type LoaderFunctionArgs } from '@remix-run/node'; import { useLoaderData } from '@remix-run/react'; export const loader = async ({ request }: LoaderFunctionArgs) => { // ... return json({ data }); }; export default function SomePage() { const { data } = useLoaderData(); // ... } ``` ```tsx // routes/some-page.tsx import { useLoaderData } from 'react-router'; import type { Route } from '~/types/app/routes/+types/some-page'; export const loader = async (args: Route.LoaderArgs) => { const { request } = args; // ... return { data }; }; export default function SomePage(props: Route.ComponentProps) { const { data } = props.loaderData; // ... } ``` -------------------------------- ### Install PostHog Analytics Plugin via Makerkit CLI Source: https://github.com/waltergit/rr7/blob/master/adding_super_admin_admin_analytics_and_events_1.md This command uses the Makerkit CLI to install the PostHog analytics plugin into your project. It prompts the user to select 'PostHog' from available packages, creating the necessary plugin directory. ```bash npx @makerkit/cli@latest plugins install ``` -------------------------------- ### Install Dependencies in Specific Monorepo Packages with pnpm Source: https://github.com/waltergit/rr7/blob/master/updating_codebase_installation_baselime_10.md These commands illustrate how to install new dependencies using pnpm's filtering capabilities, ensuring they are added to the correct package within a monorepo structure. This is crucial for maintaining proper dependency management in projects with multiple sub-packages, such as a main web application and shared UI component libraries. ```bash # For main app dependencies pnpm install my-package --filter web # For a specific package pnpm install my-package --filter @kit/ui pnpm add my-package --filter "@kit/ui" pnpm add my-package --filter web ``` -------------------------------- ### Load Team Account Workspace Data in Makerkit Loader Source: https://github.com/waltergit/rr7/blob/master/paths_configuration_personal_account_sidebar_configuration_team_account_sidebar_configuration_5.md Provides an example of a common loader pattern in Makerkit for fetching specific team account workspace data. It shows how to extract parameters from the URL and use a Supabase client to load relevant information. ```tsx export const loader = async (args: Route.LoaderArgs) => { const accountSlug = args.params.account as string; const client = getSupabaseServerClient(args.request); const workspace = await loadTeamWorkspace({ accountSlug, client, }); return { workspace, accountSlug, }; }; ``` -------------------------------- ### Generate Environment Variables for Makerkit Projects Source: https://github.com/waltergit/rr7/blob/master/configuring_supabase_database_webhooks_docker_fly_8.md This command initiates an interactive script to guide users through the process of generating required environment variables for a Makerkit project. It prompts for values and creates a `.env` template file at `turbo/generators/templates/env/.env`, which is intended for use in deployment environments like Vercel. ```bash turbo gen env ``` -------------------------------- ### Example of CardButton Components Integration Source: https://github.com/waltergit/rr7/blob/master/lemon_squeezy_metered_usage_one_off_payments_3.md Demonstrates how to import and combine all CardButton components (CardButton, CardButtonTitle, CardButtonHeader, CardButtonContent, CardButtonFooter) to create a complete interactive card button. ```jsx import { CardButton, CardButtonTitle, CardButtonHeader, CardButtonContent, CardButtonFooter } from '@kit/ui/card-button'; function MyCardButton() { return ( console.log('Card clicked')}> Featured Item

This is a detailed description of the featured item.

 Click to learn more ); } ``` -------------------------------- ### Generate Dockerfile for React Router Project Source: https://github.com/waltergit/rr7/blob/master/configuring_supabase_database_webhooks_docker_fly_8.md This command uses `pnpm turbo` to generate a `Dockerfile` in the project's root directory, preparing the application for Docker deployment. It also configures `next.config.mjs` for standalone output and installs necessary build dependencies, streamlining the containerization process. ```bash pnpm run turbo gen docker ``` -------------------------------- ### Manage Project Dependencies with pnpm Source: https://github.com/waltergit/rr7/blob/master/updating_codebase_installation_baselime_10.md This command installs or updates project dependencies. It should be run after pulling new changes to ensure all required packages are present. It also helps resolve conflicts in `pnpm-lock.yaml` by regenerating the lock file based on the current `package.json`. ```bash pnpm i ``` -------------------------------- ### Bootstrapping i18n for Server Components with withI18n Source: https://github.com/waltergit/rr7/blob/master/updating_codebase_installation_baselime_10.md This example illustrates how to wrap a React Server Component with the `withI18n` higher-order function from `~/lib/i18n/with-i18n`. This is crucial for bootstrapping translation capabilities before the server component renders, ensuring i18n is initialized correctly in a parallel rendering environment. ```tsx import { withI18n } from '~/lib/i18n/with-i18n'; const Page = () => { return
My page
; }; export default withI18n(Page); ``` -------------------------------- ### Send an email notification after user signup Source: https://github.com/waltergit/rr7/blob/master/updating_codebase_installation_baselime_10.md This example shows how to send an email notification by specifying the `channel` field as 'email' in the `createNotification` method. It uses the same `createNotificationsApi` setup as for in-app notifications. Note that sending email notifications requires a database trigger to be configured in your Supabase database. ```tsx import { createNotificationsApi } from '@kit/notifications/api'; import { getSupabaseServerAdminClient } from '@kit/supabase/server-admin-client'; async function sendNotificationAfterSignup( accountId: string, ) { const client = getSupabaseServerAdminClient(); const api = createNotificationsApi(client); await api.createNotification({ account_id: accountId, body: 'You have successfully signed up!', channel: 'email', }); } ``` -------------------------------- ### Multi-Stage Dockerfile for Node.js pnpm Application Source: https://github.com/waltergit/rr7/blob/master/configuring_supabase_database_webhooks_docker_fly_8.md A multi-stage Dockerfile for building a Node.js application, specifically for a pnpm monorepo. It includes stages for installing build dependencies, pnpm, workspace dependencies, and application-specific dependencies, resulting in a production-ready image optimized for size and performance. ```dockerfile # syntax=docker/dockerfile:1 # Stage 1: Builder ARG NODE_VERSION=20.10.0 FROM node:${NODE_VERSION}-slim AS builder # Set the working directory in the container WORKDIR /app # Install packages needed to build node modules RUN apt-get update -qq && \ apt-get install -y python-is-python3 pkg-config build-essential # Install pnpm RUN npm install -g pnpm # Copy workspace files COPY package.json pnpm-lock.yaml pnpm-workspace.yaml ./ # Install dependencies for the entire workspace RUN pnpm install # Change working directory to web app WORKDIR /app/apps/web # Copy all files COPY . . # Install dependencies for the web app RUN pnpm install ``` -------------------------------- ### Makerkit Per-Seat Billing Schema Definition Source: https://github.com/waltergit/rr7/blob/master/lemon_squeezy_metered_usage_one_off_payments_3.md This entry defines the TypeScript schema for configuring per-seat billing within Makerkit. It outlines the structure for products, plans, and line items, specifically detailing how tiered pricing is implemented for 'per_seat' type line items. The schema fields are explained to guide proper setup for automatic seat calculation and reporting to the billing system. ```tsx export default createBillingSchema({ provider, products: [ { id: 'starter', name: 'Starter', description: 'The perfect plan to get started', currency: 'USD', badge: `Value`, plans: [ { name: 'Starter Monthly', id: 'starter-monthly', trialDays: 7, paymentType: 'recurring', interval: 'month', lineItems: [ { id: 'price_1NNwYHI1i3VnbZTqI2UzaHIe', name: 'Addon 2', cost: 0, type: 'per_seat', tiers: [ { upTo: 3, cost: 0, }, { upTo: 5, cost: 7.99, }, { upTo: 'unlimited', cost: 5.99, } ] }, ], } ], } ] }); Schema Fields: - id: string (Required) - Unique identifier for the line item. This must match the price ID in your billing provider. - name: string - The display name of the line item. - cost: number - The base cost of the line item. Can be set to `0` as the final cost is calculated based on tiers. This value is primarily for UI purposes; the billing provider handles actual billing. - type: string - Specifies the billing model for the line item (e.g., `flat`, `metered`, `per_seat`). For per-seat billing, this must be set to `per_seat`. - tiers: array of objects - Defines the pricing tiers for `per_seat` line items. Each tier specifies a cost based on usage limits. - upTo: number | 'unlimited' - The upper limit for the current tier. If the usage (number of seats) is below or equal to this limit, the cost is calculated using this tier. Use 'unlimited' for the final tier. - cost: number - The cost per unit (per seat) for this specific tier. If the first tier has `upTo` set to N and `cost` set to 0, it means the first N seats are free. ``` -------------------------------- ### Run Docker Container Locally with .env File Source: https://github.com/waltergit/rr7/blob/master/configuring_supabase_database_webhooks_docker_fly_8.md Runs a Docker container in detached mode, mapping host port 3000 to container port 3000, and loading environment variables from a specified `.env` file. This command is used to start the application within a Dockerized environment for local development or testing. ```bash docker run -d -p 3000:3000 --env-file .env ``` -------------------------------- ### Super Admin Test Credentials for Local Login Source: https://github.com/waltergit/rr7/blob/master/conventions_faq_functional_walkthrough_9.md Provides the default email and password for the super admin user seeded in the `auth.users` table for local development and testing. Note that MFA is required and test secret key `NHOHJVGPO3R3LKVPRMNIYLCDMBHUM2SE` can be used with a TOTP generator. ```json { "email": "super-admin@makerkit.dev", "password": "testingpassword" } ``` -------------------------------- ### LoadingOverlay Full-Page Example Source: https://github.com/waltergit/rr7/blob/master/cookie_banner_data_table_if_4.md Shows a simple example of using the `LoadingOverlay` component as a full-page overlay, which is its default behavior when no `fullPage` prop is specified or it's set to `true`. ```jsx Please wait while we load your dashboard... ``` -------------------------------- ### Consolidating React Router Imports Source: https://github.com/waltergit/rr7/blob/master/conventions_faq_functional_walkthrough_9.md This snippet demonstrates the simplified import strategy in the React Router version of the kit. Instead of separate imports from `@remix-run/react` and `@remix-run/node`, all necessary functions are now imported from a single `react-router` package. ```typescript // Instead of separate imports like: import { useLoaderData } from '@remix-run/react'; import { json } from '@remix-run/node'; ``` ```typescript // Now use a single import source: import { useLoaderData, redirect, useRouteLoaderData } from 'react-router'; ``` -------------------------------- ### Page Component Header Layout Example Source: https://github.com/waltergit/rr7/blob/master/cookie_banner_data_table_if_4.md An example demonstrating the `Page` component configured with the 'header' style and sticky header, integrating `PageNavigation` for header links, `PageMobileNavigation` for mobile menu, and `PageBody` with `PageHeader` for profile settings. ```jsx ``` -------------------------------- ### Generate Dockerfile using Turbo Source: https://github.com/waltergit/rr7/blob/master/configuring_supabase_database_webhooks_docker_fly_8.md Executes a Turbo command to automatically generate a Dockerfile for the project, streamlining the containerization process. ```bash pnpm run turbo gen docker ``` -------------------------------- ### Defining Routes with Configuration-based Routing in TypeScript Source: https://github.com/waltergit/rr7/blob/master/conventions_faq_functional_walkthrough_9.md This snippet demonstrates how routes are defined using a configuration-based approach in `routes.ts` for the React Router 7 kit. It shows the use of `route`, `layout`, and `index` helper functions to explicitly define the routing structure, moving away from Remix's file-based routing. ```typescript // apps/web/app/routes.ts import { type RouteConfig, index, layout, route, } from '@react-router/dev/routes'; const rootRoutes = [ route('robots.txt', 'routes/robots/route.tsx'), route('sitemap.xml', 'routes/sitemap/route.tsx'), // ... ]; const marketingLayout = layout('routes/marketing/layout.tsx', [ index('routes/marketing/index.tsx'), route('pricing', 'routes/marketing/pricing.tsx'), // ... ]); export default [ ...rootRoutes, ...apiRoutes, marketingLayout, authLayout, // ... ] satisfies RouteConfig; ``` -------------------------------- ### Page Component Sidebar Layout Example Source: https://github.com/waltergit/rr7/blob/master/cookie_banner_data_table_if_4.md An example demonstrating the `Page` component configured with the 'sidebar' style, integrating `PageNavigation` for sidebar content, `PageHeader` for dashboard title and user menu, and `PageBody` for main dashboard content. ```jsx ``` -------------------------------- ### Example: Full Billing Schema with Custom Plan (TSX) Source: https://github.com/waltergit/rr7/blob/master/team_account_api_user_workspace_api_api_2.md A complete example showing how a custom plan is integrated into the overall `createBillingSchema` structure. This provides a full context for defining a product with a custom plan that directs users to a contact page. ```tsx export default createBillingSchema({ provider, products: [ { id: 'starter', name: 'Starter', description: 'The perfect plan to get started', currency: 'USD', badge: `Value`, plans: [ { name: 'Enterprise', id: 'enterprise', paymentType: 'recurring', label: 'common:contactUs', href: '/contact', custom: true, interval: 'month', lineItems: [], } ] } ] }); ``` -------------------------------- ### Initialize CMS Client in TypeScript Source: https://github.com/waltergit/rr7/blob/master/paths_configuration_personal_account_sidebar_configuration_team_account_sidebar_configuration_5.md Demonstrates how to create an instance of the CMS client using the `createCmsClient` function from the `@kit/cms` library. This client is essential for interacting with the CMS. ```tsx import { createCmsClient } from '@kit/cms'; const client = await createCmsClient(); ``` -------------------------------- ### If Component with Fallback Content Source: https://github.com/waltergit/rr7/blob/master/cookie_banner_data_table_if_4.md Example demonstrating how to provide alternative content using the `fallback` prop when the condition is false. ```jsx }> ``` -------------------------------- ### Deploy Web Application to Cloudflare Source: https://github.com/waltergit/rr7/blob/master/seo_development_authentication_emails_7.md Executes the `pnpm --filter web run deploy` command to initiate the deployment of the web application to Cloudflare. This is the primary command for pushing the application live. ```bash pnpm --filter web run deploy ``` -------------------------------- ### If Component Basic Conditional Rendering Source: https://github.com/waltergit/rr7/blob/master/cookie_banner_data_table_if_4.md Simple example of `If` component for rendering a loading spinner based on an `isLoading` condition. ```jsx ``` -------------------------------- ### Importing an exported module in an application Source: https://github.com/waltergit/rr7/blob/master/supabase_clients_data_fetching_adding_pages_6.md Once a module is exported from a package, it can be imported and used in an application. This example shows a standard import statement and a basic usage of the `myModule` function. ```tsx import { myModule } from '@kit/my-package'; console.log(myModule()); ``` -------------------------------- ### Run Project Tests Source: https://github.com/waltergit/rr7/blob/master/configuring_supabase_database_webhooks_docker_fly_8.md This command executes the test suite for the project. It's used to verify the correctness and functionality of the codebase, ensuring that changes do not introduce regressions. ```bash pnpm run test ``` -------------------------------- ### LoadingOverlay Custom Appearance Example Source: https://github.com/waltergit/rr7/blob/master/cookie_banner_data_table_if_4.md Demonstrates how to customize the appearance of the `LoadingOverlay` container and its spinner using `className` and `spinnerClassName` props for custom Tailwind CSS styling. ```jsx Processing your request... ``` -------------------------------- ### Set Generic Monitoring Provider Environment Variable Source: https://github.com/waltergit/rr7/blob/master/updating_codebase_installation_baselime_10.md This environment variable allows you to specify the desired monitoring provider for your application, such as 'sentry' or 'baselime', as part of the general monitoring setup. ```bash # sentry or baselime VITE_MONITORING_PROVIDER= ``` -------------------------------- ### Configure Baselime Monitoring Environment Variables Source: https://github.com/waltergit/rr7/blob/master/updating_codebase_installation_baselime_10.md Set these environment variables to enable and configure Baselime as your application's observability platform, providing a specific API key and designating Baselime as the monitoring provider. ```bash VITE_BASELIME_KEY=your_key VITE_MONITORING_PROVIDER=baselime ``` -------------------------------- ### Basic Usage of Page Component with Sub-components Source: https://github.com/waltergit/rr7/blob/master/cookie_banner_data_table_if_4.md This example demonstrates the fundamental usage of the `Page` component from `@kit/ui/page`, showcasing how to structure a page with `PageNavigation`, `PageHeader`, and `PageBody` for a consistent layout. ```jsx import { Page, PageNavigation, PageBody, PageHeader } from '@kit/ui/page'; function MyPage() { return ( {/* Navigation content */} {/* Optional header content */} {/* Main page content */} ); } ``` -------------------------------- ### Preview Application in Cloudflare Environment Source: https://github.com/waltergit/rr7/blob/master/seo_development_authentication_emails_7.md Runs `pnpm --filter web run preview` to simulate the application's behavior in a Cloudflare-like environment. This command is highly recommended for pre-deployment testing to identify potential issues. ```bash pnpm --filter web run preview ``` -------------------------------- ### LoadingOverlay Inline Indicator Example Source: https://github.com/waltergit/rr7/blob/master/cookie_banner_data_table_if_4.md Illustrates how to configure the `LoadingOverlay` component to act as an inline loading indicator by setting `fullPage` to `false` and applying custom height via `className`. ```jsx Fetching results... ``` -------------------------------- ### Set Git Username Globally Source: https://github.com/waltergit/rr7/blob/master/configuring_supabase_database_webhooks_docker_fly_8.md Configures the global Git username, which is used for all future commits, ensuring proper attribution and access. An example is provided for setting the username to 'johndoe'. ```bash git config --global user.username "Your Github Username" ``` ```bash git config --global user.username "johndoe" ``` -------------------------------- ### Generate New Turborepo Package Source: https://github.com/waltergit/rr7/blob/master/supabase_clients_data_fetching_adding_pages_6.md This command initiates the Turborepo package generation wizard. It prompts the user for the package name and allows for optional dependency selection, creating a new package under the `packages` directory following the `@kit/` convention. ```bash turbo gen ``` -------------------------------- ### Run Docker Container from GitHub Registry Image Source: https://github.com/waltergit/rr7/blob/master/configuring_supabase_database_webhooks_docker_fly_8.md Runs a Docker container in detached mode, mapping host port 3000 to container port 3000, and loading environment variables from a specified `.env` file, using an image pulled from the GitHub Container Registry. This is the final step to deploy the application from a registry on a VPS. ```bash docker run -d -p 3000:3000 --env-file .env ghcr.io/your-username/repo ``` -------------------------------- ### Configure Git Post-Merge Hook for Dependency Updates Source: https://github.com/waltergit/rr7/blob/master/configuring_supabase_database_webhooks_docker_fly_8.md Sets up a Git post-merge hook to automatically run `pnpm i` after every merge. This ensures that project dependencies are always up-to-date, preventing issues from outdated packages. ```bash touch .git/hooks/post-merge ``` ```bash #!/bin/bash pnpm i ``` ```bash chmod +x .git/hooks/post-merge ``` -------------------------------- ### Build Docker Image Source: https://github.com/waltergit/rr7/blob/master/configuring_supabase_database_webhooks_docker_fly_8.md Builds a Docker image from the current directory's Dockerfile, tagging it as 'rr-supabase-turbo' for easy identification and deployment. ```bash docker build -t rr-supabase-turbo . ``` -------------------------------- ### Switch Authentication Methods using Environment Variables in Bash Source: https://github.com/waltergit/rr7/blob/master/cookie_banner_data_table_if_4.md Demonstrates how to switch authentication methods by setting environment variables. This example disables password authentication and enables magic link authentication for the application. ```bash VITE_AUTH_PASSWORD=false VITE_AUTH_MAGIC_LINK=true ``` -------------------------------- ### Define a Basic React Router Loader in Makerkit Source: https://github.com/waltergit/rr7/blob/master/paths_configuration_personal_account_sidebar_configuration_team_account_sidebar_configuration_5.md Demonstrates the fundamental structure of a React Router loader function in Makerkit, showing how to fetch data asynchronously using a Supabase client and return it for component consumption. ```tsx 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 }; }; ``` -------------------------------- ### Using Supabase Server Client for Data Loading Source: https://github.com/waltergit/rr7/blob/master/supabase_clients_data_fetching_adding_pages_6.md Shows how to obtain a Supabase server client using `getSupabaseServerClient` within a React Router loader function. This client is used for server-side data fetching, for example, to query a database table. ```tsx import { LoaderFunctionArgs } from 'react-router'; import { getSupabaseServerClient } from '@kit/supabase/server-client'; export async function loader(args: LoaderFunctionArgs) { const supabase = getSupabaseServerClient() const { data, error } = await supabase.from('tasks').select('*'); return { data, }; } ``` -------------------------------- ### React.Email Invitation Template Example Source: https://github.com/waltergit/rr7/blob/master/seo_development_authentication_emails_7.md This TypeScript React component defines an email template for inviting a user to a team. It leverages `@react-email/components` for structuring and styling the email, including dynamic content and a call-to-action button. ```tsx import { Body, Button, Column, Container, Head, Heading, Hr, Html, Img, Link, Preview, Row, Section, Tailwind, Text, render, } from '@react-email/components'; interface Props { teamName: string; teamLogo?: string; inviter: string | undefined; invitedUserEmail: string; link: string; productName: string; } export function renderInviteEmail(props: Props) { const previewText = `Join ${props.invitedUserEmail} on ${props.productName}`; return render( {previewText} Join {props.teamName} on{' '} {props.productName} Hello {props.invitedUserEmail}, {props.inviter} has invited you to the{' '} {props.teamName} team on{' '} {props.productName}. {props.teamLogo && (
)}
or copy and paste this URL into your browser:{' '} {props.link}
This invitation was intended for{' '} {props.invitedUserEmail}. , ); } ``` -------------------------------- ### Configure WordPress as CMS Client Source: https://github.com/waltergit/rr7/blob/master/seo_development_authentication_emails_7.md Sets the `CMS_CLIENT` environment variable to `wordpress`. This is required because Keystatic's local mode, which relies on the file system, is not supported in Cloudflare's runtime, allowing the use of WordPress or Keystatic's GitHub mode. ```bash CMS_CLIENT=wordpress ``` -------------------------------- ### Multi-Stage Dockerfile for Node.js Web Application Build and Runtime Source: https://github.com/waltergit/rr7/blob/master/configuring_supabase_database_webhooks_docker_fly_8.md This Dockerfile orchestrates a multi-stage build process for a Node.js web application. It defines numerous build arguments for flexible configuration, sets corresponding runtime environment variables, compiles the application in a 'builder' stage, and then creates a lean 'runner' image with only the compiled assets and necessary runtime dependencies, optimizing for production deployment. ```Dockerfile # Define build arguments ARG NODE_ENV ARG VITE_SITE_URL ARG VITE_PRODUCT_NAME ARG VITE_SITE_TITLE ARG VITE_SITE_DESCRIPTION ARG VITE_DEFAULT_THEME_MODE ARG VITE_DEFAULT_LOCALE ARG VITE_AUTH_PASSWORD ARG VITE_AUTH_MAGIC_LINK ARG CONTACT_EMAIL ARG VITE_ENABLE_THEME_TOGGLE ARG VITE_ENABLE_PERSONAL_ACCOUNT_DELETION ARG VITE_ENABLE_PERSONAL_ACCOUNT_BILLING ARG VITE_ENABLE_TEAM_ACCOUNTS ARG VITE_ENABLE_TEAM_ACCOUNT_DELETION ARG VITE_ENABLE_TEAM_ACCOUNTS_BILLING ARG VITE_ENABLE_TEAM_ACCOUNTS_CREATION ARG VITE_ENABLE_NOTIFICATIONS ARG VITE_REALTIME_NOTIFICATIONS ARG VITE_SUPABASE_URL ARG VITE_SUPABASE_ANON_KEY ARG SUPABASE_SERVICE_ROLE_KEY ARG VITE_BILLING_PROVIDER ARG VITE_STRIPE_PUBLISHABLE_KEY ARG STRIPE_SECRET_KEY ARG STRIPE_WEBHOOK_SECRET ARG VITE_CMS_CLIENT ARG VITE_KEYSTATIC_CONTENT_PATH ARG VITE_LOCALES_PATH ARG MAILER_PROVIDER ARG EMAIL_SENDER ARG EMAIL_HOST ARG EMAIL_PORT ARG EMAIL_USER ARG EMAIL_PASSWORD ARG EMAIL_TLS ARG GADGET_SECRET_KEY ARG VITE_TEAM_NAVIGATION_STYLE ARG VITE_USER_NAVIGATION_STYLE ARG VITE_THEME_COLOR ARG VITE_THEME_COLOR_DARK ARG SIGN_IN_PATH ARG SIGN_UP_PATH ARG TEAM_ACCOUNTS_HOME_PATH ARG INVITATION_PAGE_PATH ARG VITE_DISPLAY_TERMS_AND_CONDITIONS_CHECKBOX # Set environment variables ENV NODE_ENV=${NODE_ENV} ENV VITE_SITE_URL=${VITE_SITE_URL} ENV VITE_PRODUCT_NAME=${VITE_PRODUCT_NAME} ENV VITE_SITE_TITLE=${VITE_SITE_TITLE} ENV VITE_SITE_DESCRIPTION=${VITE_SITE_DESCRIPTION} ENV VITE_DEFAULT_THEME_MODE=${VITE_DEFAULT_THEME_MODE} ENV VITE_DEFAULT_LOCALE=${VITE_DEFAULT_LOCALE} ENV VITE_AUTH_PASSWORD=${VITE_AUTH_PASSWORD} ENV VITE_AUTH_MAGIC_LINK=${VITE_AUTH_MAGIC_LINK} ENV CONTACT_EMAIL=${CONTACT_EMAIL} ENV VITE_ENABLE_THEME_TOGGLE=${VITE_ENABLE_THEME_TOGGLE} ENV VITE_ENABLE_PERSONAL_ACCOUNT_DELETION=${VITE_ENABLE_PERSONAL_ACCOUNT_DELETION} ENV VITE_ENABLE_PERSONAL_ACCOUNT_BILLING=${VITE_ENABLE_PERSONAL_ACCOUNT_BILLING} ENV VITE_ENABLE_TEAM_ACCOUNTS=${VITE_ENABLE_TEAM_ACCOUNTS} ENV VITE_ENABLE_TEAM_ACCOUNT_DELETION=${VITE_ENABLE_TEAM_ACCOUNT_DELETION} ENV VITE_ENABLE_TEAM_ACCOUNTS_BILLING=${VITE_ENABLE_TEAM_ACCOUNTS_BILLING} ENV VITE_ENABLE_TEAM_ACCOUNTS_CREATION=${VITE_ENABLE_TEAM_ACCOUNTS_CREATION} ENV VITE_ENABLE_NOTIFICATIONS=${VITE_ENABLE_NOTIFICATIONS} ENV VITE_REALTIME_NOTIFICATIONS=${VITE_REALTIME_NOTIFICATIONS} ENV VITE_SUPABASE_URL=${VITE_SUPABASE_URL} ENV VITE_SUPABASE_ANON_KEY=${VITE_SUPABASE_ANON_KEY} ENV SUPABASE_SERVICE_ROLE_KEY=${SUPABASE_SERVICE_ROLE_KEY} ENV VITE_BILLING_PROVIDER=${VITE_BILLING_PROVIDER} ENV VITE_STRIPE_PUBLISHABLE_KEY=${VITE_STRIPE_PUBLISHABLE_KEY} ENV STRIPE_SECRET_KEY=${STRIPE_SECRET_KEY} ENV STRIPE_WEBHOOK_SECRET=${STRIPE_WEBHOOK_SECRET} ENV VITE_CMS_CLIENT=${VITE_CMS_CLIENT} ENV VITE_KEYSTATIC_CONTENT_PATH=${VITE_KEYSTATIC_CONTENT_PATH} ENV VITE_LOCALES_PATH=${VITE_LOCALES_PATH} ENV MAILER_PROVIDER=${MAILER_PROVIDER} ENV EMAIL_SENDER=${EMAIL_SENDER} ENV EMAIL_HOST=${EMAIL_HOST} ENV EMAIL_PORT=${EMAIL_PORT} ENV EMAIL_USER=${EMAIL_USER} ENV EMAIL_PASSWORD=${EMAIL_PASSWORD} ENV EMAIL_TLS=${EMAIL_TLS} ENV GADGET_SECRET_KEY=${GADGET_SECRET_KEY} ENV VITE_TEAM_NAVIGATION_STYLE=${VITE_TEAM_NAVIGATION_STYLE} ENV VITE_USER_NAVIGATION_STYLE=${VITE_USER_NAVIGATION_STYLE} ENV VITE_THEME_COLOR=${VITE_THEME_COLOR} ENV VITE_THEME_COLOR_DARK=${VITE_THEME_COLOR_DARK} ENV SIGN_IN_PATH=${SIGN_IN_PATH} ENV SIGN_UP_PATH=${SIGN_UP_PATH} ENV TEAM_ACCOUNTS_HOME_PATH=${TEAM_ACCOUNTS_HOME_PATH} ENV INVITATION_PAGE_PATH=${INVITATION_PAGE_PATH} ENV VITE_DISPLAY_TERMS_AND_CONDITIONS_CHECKBOX=${VITE_DISPLAY_TERMS_AND_CONDITIONS_CHECKBOX} # Build the web app RUN pnpm run build # 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 ```