### 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 (
)
}
```
--------------------------------
### 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 (
)
}
```
--------------------------------
### 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)
}
```