### Install Project Dependencies Source: https://indiekit.pro/app/docs/index Installs all necessary project dependencies using pnpm. This command reads the project's package manager configuration (e.g., package.json) to fetch required libraries. ```shell pnpm install ``` -------------------------------- ### Start Development Server Source: https://indiekit.pro/app/docs/index Starts the local development server for the Indie Kit project. This command compiles the code and makes the application accessible in a web browser. ```shell pnpm dev ``` -------------------------------- ### Start Development Server Source: https://indiekit.pro/app/docs/setup/database Run npm run dev to start your development server and verify that your application can successfully connect to the database. Check console messages for connection status. ```shell npm run dev ``` -------------------------------- ### Clone Indie Kit Repository Source: https://indiekit.pro/app/docs/index Clones the main Indie Kit project repository from GitHub. This is the first step to start developing with Indie Kit. ```shell git clone https://github.com/Indie-Kit/indie-kit ``` -------------------------------- ### Install pnpm Package Manager Source: https://indiekit.pro/app/docs/index Installs the pnpm package manager globally. pnpm is recommended for its speed and efficiency in managing project dependencies. ```shell npm install -g pnpm ``` -------------------------------- ### Clone B2B Kit Repository Source: https://indiekit.pro/app/docs/index Clones the B2B Kit boilerplate repository from GitHub, providing a specific starting point for business-oriented applications. ```shell git clone https://github.com/Indie-Kit/b2b-boilerplate ``` -------------------------------- ### Neon Connection String Example Source: https://indiekit.pro/app/docs/setup/database Example format for a PostgreSQL connection string provided by Neon. This string is used to connect your application to the Neon database. ```text postgresql://[user]:[password]@[neon-host]/[database] ``` -------------------------------- ### Example Quota Configurations Source: https://indiekit.pro/app/docs/setup/payments Provides example configurations for quotas for different subscription plans (e.g., free, pro). These objects illustrate how to set numerical limits and string values for plan-specific features. ```typescript // Example quotas for different plans const freeQuotas = { canUseApp: true, numberOfThings: 5, somethingElse: "basic" }; const proQuotas = { canUseApp: true, numberOfThings: 100, somethingElse: "premium" }; ``` -------------------------------- ### Install Resend Dependency Source: https://indiekit.pro/app/docs/setup/email/resend Installs the Resend package using pnpm, which is required to use the Resend API for sending emails. ```bash pnpm add resend ``` -------------------------------- ### Indie Kit PayPal Setup Steps Source: https://indiekit.pro/app/docs/setup/payments/paypal A structured guide outlining the essential steps for setting up PayPal integration within your Indie Kit project, from developer account creation to API credential retrieval and environment variable configuration. ```APIDOC PayPal Integration Guide: 1. Create a PayPal Developer Account: - Visit developer.paypal.com. - Log in or create a new account. - Complete the developer verification process. 2. Create Test Accounts: - In the PayPal Developer Dashboard, navigate to 'Sandbox' > 'Accounts'. - Create one Test Business Account (merchant). - Create one Test Personal Account (buyer). - Record the credentials for both accounts. 3. Get API Credentials: - Go to 'My Apps & Credentials' in the developer dashboard. - Create a new app under the 'Sandbox' section. - Select your business account and name your app. - Copy the generated Client ID and Secret Key. 4. Set Up Environment Variables: - Add the following variables to your .env.local file: NEXT_PUBLIC_PAYPAL_CLIENT_ID='YOUR_CLIENT_ID' PAYPAL_SECRET_KEY='YOUR_SECRET_KEY' NEXT_PUBLIC_PAYPAL_IS_SANDBOX=true (for testing) 5. Configure Webhooks: - Use ngrok to expose your local development server (e.g., ngrok http 3000). - In the PayPal Developer Dashboard, go to 'Webhooks' and create a new webhook. - Set the webhook URL to your ngrok URL followed by '/api/webhooks/paypal' (e.g., https://your-ngrok-url.ngrok.io/api/webhooks/paypal). - Select relevant events (payments, subscriptions). - Copy the Webhook ID and add it to your environment variables: PAYPAL_WEBHOOK_ID='YOUR_WEBHOOK_ID' 6. Create Plan in Database: - Navigate to '/super-admin/plans/' in your Indie Kit application. - Create a new plan and configure its one-time price. 7. Use the Subscribe Function: - Utilize the `getSubscribeUrl` function to generate PayPal checkout links for one-time or recurring payments. - Example for one-time payment: const url = getSubscribeUrl({ codename: 'pro', type: PlanType.ONETIME, provider: PlanProvider.PAYPAL }); ``` -------------------------------- ### Vercel Deployment Steps Source: https://indiekit.pro/app/docs/deployment A concise guide for deploying an Indie Kit application on Vercel, involving code push, project import, and environment variable setup. ```APIDOC Vercel Deployment: 1. Push your code to GitHub. 2. Visit Vercel and click "Add New Project". 3. Import your repository. 4. Add environment variables from your `.env.local` file. 5. Click "Deploy". ``` -------------------------------- ### Launch Email Designer Source: https://indiekit.pro/app/docs/setup/email Command to start the Indie Kit email designer development server. This tool allows you to preview and test email templates. ```shell npm run dev ``` -------------------------------- ### Create Welcome Email Template Source: https://indiekit.pro/app/docs/setup/email This example demonstrates creating a custom welcome email component in React/TypeScript. It includes placeholders for user name and dashboard URL, and uses a `Layout` component for structure. ```typescript export default function Welcome({ userName, dashboardUrl }: WelcomeEmailProps) { return ( Welcome to {appConfig.projectName}! 👋 Hi {userName}, We're excited to have you on board! Get started by visiting your dashboard: If you have any questions, just reply to this email - we're here to help! ); } ``` -------------------------------- ### Install Mailgun Dependencies Source: https://indiekit.pro/app/docs/setup/email/mailgun Installs the necessary packages, `form-data` and `mailgun.js`, for integrating Mailgun email services using the pnpm package manager. ```shell pnpm add form-data mailgun.js ``` -------------------------------- ### Render Deployment Steps Source: https://indiekit.pro/app/docs/deployment Instructions for deploying an Indie Kit application on Render, including repository connection and environment variable configuration. ```APIDOC Render Deployment: 1. Push your code to GitHub. 2. Connect your GitHub repository to Render. 3. Add your environment variables in Render's settings. 4. Deploy the application. ``` -------------------------------- ### Install B2B Kit Boilerplate Source: https://indiekit.pro/app/docs/b2b-kit Clones the B2B Kit boilerplate repository from GitHub and navigates into the project directory. This is the initial step to start developing a B2B SaaS application with Indie Kit. ```shell git clone https://github.com/Indie-Kit/b2b-boilerplate cd b2b-boilerplate ``` -------------------------------- ### Configure PostgreSQL Connection in db.ts Source: https://indiekit.pro/app/docs/setup/database Example TypeScript code for configuring a PostgreSQL connection using drizzle-orm. This snippet shows how to initialize the database instance with the DATABASE_URL environment variable. ```typescript import { drizzle } from 'drizzle-orm/postgres-js'; export const db = drizzle(process.env.DATABASE_URL!); ``` -------------------------------- ### Email Authentication DNS Records Source: https://indiekit.pro/app/docs/setup/email Examples of DNS TXT records required for email authentication protocols: DKIM, SPF, and DMARC. These records help verify your domain's identity and improve email deliverability. ```APIDOC DKIM (DomainKeys Identified Mail) DNS Record: selector._domainkey.yourdomain.com TXT "v=DKIM1; k=rsa; p=MIGfMA0GCSqGSIb3DQEBAQUAA4..." - Purpose: Digitally signs outgoing emails to prove authenticity and prevent tampering. - Components: Public key (in DNS) and private key (on server). SPF (Sender Policy Framework) DNS Record: yourdomain.com TXT "v=spf1 include:_spf.google.com include:_spf.mailgun.org ~all" - Purpose: Specifies which mail servers are authorized to send email on behalf of your domain. - Format: A TXT record listing allowed IP addresses or hostnames. DMARC (Domain-based Message Authentication) DNS Record: _dmarc.yourdomain.com TXT "v=DMARC1; p=quarantine; rua=mailto:dmarc@yourdomain.com" - Purpose: Enforces SPF and DKIM policies and provides reporting on authentication failures. - Policy Options: - p=none: Monitor only. - p=quarantine: Send emails to spam. - p=reject: Reject emails that fail checks. ``` -------------------------------- ### Netlify Deployment Steps Source: https://indiekit.pro/app/docs/deployment Steps to deploy an Indie Kit application on Netlify, focusing on connecting the repository and configuring environment variables. ```APIDOC Netlify Deployment: 1. Push your code to GitHub. 2. Connect your GitHub repository to Netlify. 3. Add your environment variables in Netlify's settings. 4. Deploy the project. ``` -------------------------------- ### Enable Sign In and Set Up Auth Secret Source: https://indiekit.pro/app/docs/tutorials/launch-with-waitlist Configure your environment to enable user sign-in and generate a secure authentication secret. This involves setting a NEXT_PUBLIC_SIGNIN_ENABLED variable and running an authentication setup command. ```shell # Add to your .env file NEXT_PUBLIC_SIGNIN_ENABLED=true # Run auth setup command npx auth secret ``` -------------------------------- ### Sync Database Schema with Drizzle Kit Source: https://indiekit.pro/app/docs/setup/database Use the npx drizzle-kit push command to connect to your database, create necessary tables, and sync your schema changes. This command is essential for applying database schema updates. ```shell npx drizzle-kit push ``` -------------------------------- ### User Settings Component (Client Component) Source: https://indiekit.pro/app/docs/tutorials/user-authentication Example of a client component that uses the `useUser` hook to manage and display user settings. It handles loading states and requires user authentication before rendering editable fields. ```TypeScript 'use client' import { useUser } from '@/lib/users/useUser' import { useState } from 'react' export function UserSettings() { const { user, isLoading } = useUser() const [name, setName] = useState(user?.name) if (isLoading) return
Loading settings...
if (!user) return
Please sign in
return (
setName(e.target.value)} className="input" />
) } ``` -------------------------------- ### Post-Deployment Verification Checklist Source: https://indiekit.pro/app/docs/deployment A checklist for verifying the successful deployment of an Indie Kit app, covering critical functionalities like authentication, email, and payments. ```APIDOC Post-Deployment Checks: 1. Verify environment variables are correctly set and accessible. 2. Test the authentication flow to ensure users can log in. 3. Confirm that email sending (e.g., via AWS SES) is functioning. 4. Check payment processing (e.g., Stripe) for successful transactions. 5. Monitor error logs for any unexpected issues. ``` -------------------------------- ### Configure Database URL Environment Variable Source: https://indiekit.pro/app/docs/setup/database Set up the DATABASE_URL environment variable in your project's .env file to point to your database connection string. This is crucial for the application to connect to the database. ```env DATABASE_URL="your-connection-string-here" ``` -------------------------------- ### Environment Variables for Indie Kit Source: https://indiekit.pro/app/docs/deployment Lists essential environment variables required for configuring an Indie Kit application, covering database, authentication, AWS, and Stripe settings. ```APIDOC Environment Variables: # Database DATABASE_URL=your_database_url # Auth NEXTAUTH_URL=https://your-domain.com NEXTAUTH_SECRET=your_secret GOOGLE_CLIENT_ID=your_google_client_id GOOGLE_CLIENT_SECRET=your_google_client_secret # AWS AWS_ACCESS_KEY_ID=your_aws_key AWS_SECRET_ACCESS_KEY=your_aws_secret AWS_SES_REGION=your_ses_region # Stripe STRIPE_SECRET_KEY=your_stripe_secret STRIPE_WEBHOOK_SECRET=your_webhook_secret NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=your_publishable_key Description: These variables are crucial for connecting to your database, managing user authentication (including OAuth with Google), configuring AWS services like SES for emails, and integrating Stripe for payments. Ensure these are set correctly in your deployment platform's environment settings, often copied from a local .env.local file. ``` -------------------------------- ### Indie Kit Authentication Best Practices Source: https://indiekit.pro/app/docs/tutorials/user-authentication Guidelines for choosing authentication methods, handling errors, implementing security measures, and optimizing performance in Indie Kit applications. ```APIDOC Authentication Methods: - useUser: Recommended for client components. - auth(): Recommended for server components. - withAuthRequired: Recommended for API routes. Error Handling: - Always handle loading states. - Provide clear error messages to the user. - Implement proper redirects for unauthorized access or errors. Security Tips: - Validate user permissions on both client and server sides. - Never expose sensitive data in client-side code. - Ensure all communication uses HTTPS in production environments. - Implement proper CORS policies for API routes. Performance: - Cache authentication state where appropriate. - Utilize loading skeletons for a better user experience. - Implement proper revalidation strategies for authentication data. ``` -------------------------------- ### Subscription Button Component Example Source: https://indiekit.pro/app/docs/tutorials/create-subscription A React component example demonstrating how to integrate subscription buttons using the `getSubscribeUrl` helper. It conditionally renders buttons for monthly and yearly pricing based on plan availability and displays prices formatted for user readability. ```javascript function SubscribeButton({ plan }) { return (
{/* Monthly Subscription */} {plan.hasMonthlyPricing && ( )} {/* Yearly Subscription */} {plan.hasYearlyPricing && ( )}
) } ``` -------------------------------- ### Local Inngest Server URL Source: https://indiekit.pro/app/docs/setup/background-jobs The URL for the local Inngest server used to monitor background jobs during development. No additional setup is required for local environments. ```text http://localhost:8288/stream ``` -------------------------------- ### Development Server Command Source: https://indiekit.pro/app/docs/setup/auth/google-login Command to start the local development server for your Indie Kit application. This allows you to test changes and features locally before deploying to production. ```bash npm run dev ``` -------------------------------- ### SWR Error Handling Example (JavaScript) Source: https://indiekit.pro/app/docs/tutorials/api-calls Provides an example of how to handle errors returned by SWR during data fetching. It demonstrates checking for specific error statuses like 401 (Unauthorized) and displaying user-friendly messages. ```javascript if (error) { if (error.status === 401) { // Handle unauthorized return
Please log in
} // Handle other errors return
Error: {error.message}
} ``` -------------------------------- ### Production Environment Variable Source: https://indiekit.pro/app/docs/setup/background-jobs The required environment variable for Inngest integration in production. This key is obtained from your Inngest account and needs to be added to your hosting environment's variables. ```config INNGEST_EVENT_KEY ``` -------------------------------- ### PayPal Sandbox Configuration Source: https://indiekit.pro/app/docs/setup/payments/paypal Configure your .env.local file with PayPal sandbox credentials and settings. This includes the client ID, secret key, and a flag to indicate if the sandbox environment is active. ```env # PayPal Sandbox Configuration NEXT_PUBLIC_PAYPAL_CLIENT_ID='AQLowgpUG45c3c6WpgPvkaCAqYh36dvtwjzeuMoJZnQydqnXgRHgF8HE3-jD26aCW8-9_2lmsWm5Dfzo' PAYPAL_SECRET_KEY='EP01knzIEI8C8jGGOvRsVj41uX_AYouvCgnrB1JpFhSiUk6szFDYSrUXKkT4xdzSxKs33qg-00q1NqJw' NEXT_PUBLIC_PAYPAL_IS_SANDBOX=true ``` -------------------------------- ### Install Mailchimp Transactional Package Source: https://indiekit.pro/app/docs/setup/email/mailchimp Installs the necessary Mailchimp transactional email package using pnpm. This dependency is required for sending emails via the Mailchimp API. ```shell pnpm add @mailchimp/mailchimp_transactional ``` -------------------------------- ### Waitlist Admin Dashboard and Landing Page URLs Source: https://indiekit.pro/app/docs/tutorials/launch-with-waitlist Provides the default URLs for accessing the waitlist management dashboard and the public waitlist signup page, assuming a local development environment. ```text Admin Dashboard: http://localhost:3000/super-admin/waitlist Waitlist Landing Page: http://localhost:3000/join-waitlist ``` -------------------------------- ### Initialize Indie Kit Authentication Source: https://indiekit.pro/app/docs/setup/auth Command to run after setting environment variables to initialize the authentication system for your Indie Kit application. This command sets up the necessary configurations. ```shell npx auth secret ``` -------------------------------- ### Configure Resend Environment Variables Source: https://indiekit.pro/app/docs/setup/email/resend Specifies the environment variable required for authenticating with the Resend API. This should be added to your `.env.local` file. ```dotenv RESEND_API_KEY=your_api_key ``` -------------------------------- ### Mailchimp Environment Variables Configuration Source: https://indiekit.pro/app/docs/setup/email/mailchimp Specifies the environment variable required for Mailchimp integration, typically added to a `.env.local` file for local development and deployment configurations. ```dotenv MAILCHIMP_API_KEY=your_api_key ``` -------------------------------- ### Configure Mailgun Environment Variables Source: https://indiekit.pro/app/docs/setup/email/mailgun Lists the required environment variables for Mailgun integration, typically added to a `.env.local` file to store sensitive credentials and domain information. ```env MAILGUN_API_KEY=your_api_key MAILGUN_DOMAIN=your_verified_domain ``` -------------------------------- ### Implement Email Sending with Resend Source: https://indiekit.pro/app/docs/setup/email/resend A TypeScript function `sendMail` that sends emails using the Resend SDK. It includes logic to skip sending in non-production environments and logs errors if sending fails. ```typescript import { Resend } from "resend"; import { appConfig } from "../config"; const sendMail = async (to: string, subject: string, html: string) => { if (process.env.NODE_ENV !== "production") { console.log( "Sending email to", to, "with subject", subject, "and html", html ); return; } const resend = new Resend(process.env.RESEND_API_KEY); const response = await resend.emails.send({ from: `${appConfig.email.senderName} <${appConfig.email.senderEmail}>`, to: [to], subject: subject, html: html, replyTo: appConfig.email.senderEmail, }); if(response.error) { console.error("Email sent failed", response.error); } else { if(process.env.NODE_ENV === "development") { console.info("Email sent successfully", response); } } }; export default sendMail; ``` -------------------------------- ### Importing Testimonial Components Source: https://indiekit.pro/app/docs/components/0-installed Import testimonial components to display social proof. These layouts help build trust by showcasing customer feedback. ```javascript import TestimonialGrid from "@/components/sections/testimonial-grid"; import Testimonial1 from "@/components/sections/testimonial-1"; import Testimonial2 from "@/components/sections/testimonial-2"; ``` -------------------------------- ### Customize Email Layout Colors Source: https://indiekit.pro/app/docs/setup/email This snippet shows how to customize the color palette for email layouts using Tailwind CSS configuration within a React component. It targets the `src/emails/components/layout.tsx` file. ```typescript // src/emails/components/layout.tsx // ...Existing code... ``` -------------------------------- ### Example Blog Post Content Structure Source: https://indiekit.pro/app/docs/tutorials/create-blog-post Illustrates a typical content structure for a blog post using Markdown, demonstrating headings and basic text formatting. This structure helps organize content logically within the MDX file. ```markdown # Main Title ## Section 1 Content for section 1... ### Subsection 1.1 More detailed content... ## Section 2 Another section with content... ``` -------------------------------- ### Configure Waitlist API for Welcome Emails Source: https://indiekit.pro/app/docs/tutorials/launch-with-waitlist Customizes the waitlist API route to send automatic welcome emails to new users who join the waitlist. It demonstrates how to parse request data and use a `sendMail` function with an email template. ```typescript // src/app/api/waitlist/route.ts import { sendMail } from '@/lib/email/sendMail' import { NextResponse } from 'next/server' import { WaitlistWelcome } from '@/emails/waitlist-welcome' export async function POST(req: Request) { try { const body = await req.json() const { email, name } = body // Existing waitlist logic here... // Send welcome email await sendMail({ to: email, subject: "Welcome to the Waitlist! 🎉", html: render( ) }) return NextResponse.json({ success: true }) } catch (error) { return NextResponse.json( { error: "Failed to join waitlist" }, { status: 500 } ) } } ``` -------------------------------- ### Protected Dashboard Page (Server Component) Source: https://indiekit.pro/app/docs/tutorials/user-authentication Example of a server component that fetches user session data using the `auth()` function to display a protected dashboard. It requires the `auth` function from '@/auth' and a `DashboardMetrics` component. ```TypeScript // src/app/(in-app)/dashboard/page.tsx import { auth } from '@/auth' import { DashboardMetrics } from '@/components/dashboard/metrics' export default async function DashboardPage() { const session = await auth() return (

Dashboard

) } ``` -------------------------------- ### Implement Mailgun Email Sending Function Source: https://indiekit.pro/app/docs/setup/email/mailgun Provides a TypeScript function `sendMail` that utilizes the Mailgun API to send emails. It handles API key and domain configuration via environment variables and includes a check for production environments. ```typescript import formData from "form-data"; import Mailgun from "mailgun.js"; import { appConfig } from "../config"; const sendMail = async (to: string, subject: string, html: string) => { if (process.env.NODE_ENV !== "production") { console.log( "Sending email to", to, "with subject", subject, "and html", html ); return; } const mailgun = new Mailgun(formData); const client = mailgun.client({ username: "api", key: process.env.MAILGUN_API_KEY!, }); const response = await client.messages.create( process.env.MAILGUN_DOMAIN!, { from: `${appConfig.email.senderName} <${appConfig.email.senderEmail}>`, to: [to], subject: subject, html: html, "h:Reply-To": appConfig.email.senderEmail, } ); console.log("Email sent successfully", response); }; export default sendMail; ``` -------------------------------- ### Define Welcome Email Sequence Function Source: https://indiekit.pro/app/docs/tutorials/create-email-sequence Defines an Inngest function to send a series of automated emails to users upon signup. It includes immediate welcome emails, followed by tips, feature highlights, and upgrade offers after specified delays. ```typescript import { inngest } from "@/lib/inngest/client"; import { sendEmail } from "@/lib/email/send"; export const welcomeSequence = inngest.createFunction( { name: "Welcome Email Sequence" }, { event: "user/signup.completed" }, async ({ event, step }) => { const { email, name } = event.data; // Send welcome email immediately await step.run("send-welcome-email", async () => { await sendEmail({ to: email, template: "welcome", data: { name } }); }); // Send getting started tips after 1 day await step.sleep("wait-day-1", "24h"); await step.run("send-getting-started", async () => { await sendEmail({ to: email, template: "getting-started", data: { name } }); }); // Send feature highlights after 3 days await step.sleep("wait-day-3", "72h"); await step.run("send-features", async () => { await sendEmail({ to: email, template: "feature-highlights", data: { name } }); }); // Send upgrade offer after 7 days await step.sleep("wait-day-7", "168h"); await step.run("send-upgrade-offer", async () => { await sendEmail({ to: email, template: "upgrade-offer", data: { name } }); }); } ); ``` -------------------------------- ### Register Inngest Functions Source: https://indiekit.pro/app/docs/tutorials/create-email-sequence Registers the defined Inngest functions, including the welcome sequence, making them available for execution. This file acts as an entry point for all Inngest functions. ```typescript import { welcomeSequence } from "./welcome-sequence"; export const functions = [ welcomeSequence, // ... other functions ]; ``` -------------------------------- ### Public API Calls Backend Source: https://indiekit.pro/app/docs/tutorials/api-calls Backend implementation for public API endpoints in Indie Kit. This example demonstrates a simple GET request to retrieve a list of products using Next.js API routes. ```typescript import { NextResponse } from 'next/server' export async function GET() { const products = [ { id: 1, name: 'Product 1' }, { id: 2, name: 'Product 2' }, ] return NextResponse.json(products) } ```