@github.com/YOUR_USERNAME/your-repo.git
cd your-repo
# Install dependencies
pnpm install
# Generate Dockerfile
pnpm run turbo gen docker
# Create env file
cp turbo/generators/templates/env/.env.local apps/web/.env.production.local
nano apps/web/.env.production.local
# Edit with your production values
# Build Docker image
docker build -t myapp:latest .
# Run container
docker run -d \
-p 3000:3000 \
--env-file apps/web/.env.production.local \
--name myapp \
--restart unless-stopped \
myapp:latest
```
--------------------------------
### Premium Font Example
Source: https://makerkit.dev/docs/next-supabase-turbo/customization/fonts
Example of importing the Outfit font for headings and body text.
```javascript
import { Outfit as SansFont } from 'next/font/google';
// Headings and body: Outfit
```
--------------------------------
### Deploy Pre-Built Docker Image
Source: https://makerkit.dev/docs/next-supabase-turbo/going-to-production/vps
Pulls a pre-built Docker image from a registry (like GHCR), creates an environment file, and runs the container. Recommended for most use cases.
```bash
# Login to registry
docker login ghcr.io
# Pull your image
docker pull ghcr.io/YOUR_USERNAME/myapp:latest
# Create env file
nano .env.production.local
# Paste your environment variables
# Run container
docker run -d \
-p 3000:3000 \
--env-file .env.production.local \
--name myapp \
--restart unless-stopped \
ghcr.io/YOUR_USERNAME/myapp:latest
```
--------------------------------
### GradientText Component Example
Source: https://makerkit.dev/docs/next-supabase-turbo/components/marketing-components
Example of using the GradientText component to apply a gradient to text.
```jsx
function GradientTextExample() {
return (
Unleash your creativity and build your SaaS faster than ever with
Makerkit.
);
}
```
--------------------------------
### GradientSecondaryText Component Example
Source: https://makerkit.dev/docs/next-supabase-turbo/components/marketing-components
Example of using the GradientSecondaryText component to apply a gradient to text.
```jsx
function GradientSecondaryTextExample() {
return (
Unleash your creativity and build your SaaS faster than ever with
Makerkit.
);
}
```
--------------------------------
### Quick Font Loading Check
Source: https://makerkit.dev/docs/next-supabase-turbo/customization/fonts
Command to start the development server and instructions to verify font loading in browser DevTools.
```bash
# Quick check for font loading
pnpm dev
# Open DevTools > Network > Filter: Font
# Verify your custom font files are loading
```
--------------------------------
### Start Developer Tools and Check Production Mode
Source: https://makerkit.dev/docs/next-supabase-turbo/dev-tools
Run the developer tools in development mode and access the production preview to check variables. Ensure to resolve any warnings or errors displayed.
```bash
# Start dev tools
pnpm dev
# Check Production mode at http://localhost:3010/variables
# Resolve any warnings or errors
```
--------------------------------
### EMAIL_SENDER Format Examples
Source: https://makerkit.dev/docs/next-supabase-turbo/emails/email-configuration
Examples of how to format the EMAIL_SENDER environment variable. The recommended format includes a display name.
```env
# With display name (recommended)
EMAIL_SENDER=YourApp
# Email only
EMAIL_SENDER=hello@yourapp.com
```
--------------------------------
### Technical Font Example
Source: https://makerkit.dev/docs/next-supabase-turbo/customization/fonts
Example of importing IBM Plex Sans for body and IBM Plex Mono for code.
```javascript
import { IBM_Plex_Sans as SansFont, IBM_Plex_Mono as MonoFont } from 'next/font/google';
// Body: IBM Plex Sans
// Code: IBM Plex Mono
```
--------------------------------
### Install Certbot for SSL
Source: https://makerkit.dev/docs/next-supabase-turbo/going-to-production/vps
Install Certbot and its Nginx plugin to automate the process of obtaining and renewing SSL certificates.
```bash
apt install -y certbot python3-certbot-nginx
```
--------------------------------
### Install Paddle Plugin
Source: https://makerkit.dev/docs/next-supabase-turbo/billing/paddle
Fetch the Paddle plugin from the plugins repository using the Makerkit CLI.
```bash
npx @makerkit/cli@latest plugins install
```
--------------------------------
### Start Supabase and Check Inbucket
Source: https://makerkit.dev/docs/next-supabase-turbo/translations/email-translations
Instructions for testing email translations with Inbucket when running Supabase locally. Emails are captured by Inbucket for review.
```bash
1. Start Supabase: `pnpm supabase:web:start`
2. Open Inbucket: `http://localhost:54324`
3. Trigger an action that sends an email
4. Check Inbucket for the translated email
```
--------------------------------
### Install Nginx
Source: https://makerkit.dev/docs/next-supabase-turbo/going-to-production/vps
Installs Nginx, a high-performance web server and reverse proxy, which will be used to route traffic to your application.
```bash
apt install -y nginx
```
--------------------------------
### Enable Nginx Site and Restart
Source: https://makerkit.dev/docs/next-supabase-turbo/going-to-production/vps
Enable your Nginx site configuration by creating a symbolic link, remove the default site, test the configuration, and restart Nginx to apply changes.
```bash
# Create symlink
ln -s /etc/nginx/sites-available/myapp /etc/nginx/sites-enabled/
# Remove default site
rm /etc/nginx/sites-enabled/default
# Test configuration
nginx -t
# Restart Nginx
systemctl restart nginx
```
--------------------------------
### Start Development Server
Source: https://makerkit.dev/docs/next-supabase-turbo/development/database-webhooks
Run your Next.js development server using pnpm. This command is typically used during local webhook testing.
```bash
pnpm run dev
```
--------------------------------
### SSH into your VPS
Source: https://makerkit.dev/docs/next-supabase-turbo/going-to-production/vps
Connect to your newly provisioned server using SSH. Ensure you have your server's IP address and root access.
```bash
ssh root@your-server-ip
```
--------------------------------
### Basic Application Configuration (.env)
Source: https://makerkit.dev/docs/next-supabase-turbo/configuration/application-configuration
Set essential application configuration variables in your .env file for basic setup. These include site URL, product name, titles, descriptions, locale, theme mode, and theme colors.
```env
NEXT_PUBLIC_SITE_URL=https://myapp.com
NEXT_PUBLIC_PRODUCT_NAME="My SaaS App"
NEXT_PUBLIC_SITE_TITLE="My SaaS App - Build Faster"
NEXT_PUBLIC_SITE_DESCRIPTION="The easiest way to build your SaaS application"
NEXT_PUBLIC_DEFAULT_LOCALE=en
NEXT_PUBLIC_DEFAULT_THEME_MODE=light
NEXT_PUBLIC_THEME_COLOR="#ffffff"
NEXT_PUBLIC_THEME_COLOR_DARK="#0a0a0a"
```
--------------------------------
### Complete Supabase Test Example
Source: https://makerkit.dev/docs/next-supabase-turbo/development/database-tests
This comprehensive example demonstrates setting up test users, creating a team, adding members with RLS bypass, and verifying RLS enforcement for different user roles. It highlights key principles for secure database testing.
```sql
begin;
create extension "basejump-supabase_test_helpers" version '0.0.6';
select no_plan();
-- Setup test users
select makerkit.set_identifier('owner', 'owner@example.com');
select makerkit.set_identifier('member', 'member@example.com');
select makerkit.set_identifier('stranger', 'stranger@example.com');
-- Create team (as owner)
select makerkit.authenticate_as('owner');
select public.create_team_account('TestTeam');
-- Add member using postgres role (bypasses RLS)
set local role postgres;
insert into accounts_memberships (account_id, user_id, account_role)
values (
(select id from accounts where slug = 'testteam'),
tests.get_supabase_uid('member'),
'member'
);
-- Test member access (RLS enforced)
select makerkit.authenticate_as('member');
select isnt_empty(
$$ select * from accounts where slug = 'testteam' $$,
'Member can see their team'
);
-- Test stranger cannot see team (RLS enforced)
select makerkit.authenticate_as('stranger');
select is_empty(
$$ select * from accounts where slug = 'testteam' $$,
'Stranger cannot see team due to RLS'
);
-- Verify team actually exists (bypass RLS)
set local role postgres;
select isnt_empty(
$$ select * from accounts where slug = 'testteam' $$,
'Team exists in database (confirms RLS is working, not missing data)'
);
select * from finish();
rollback;
```
--------------------------------
### Add Junction Table Example
Source: https://makerkit.dev/docs/next-supabase-turbo/development/migrations
Example SQL for creating a junction table to manage a many-to-many relationship between projects and users.
```sql
-- Many-to-many relationship
create table if not exists public.project_members (
project_id uuid not null references public.projects(id) on delete cascade,
user_id uuid not null references auth.users(id) on delete cascade,
role text not null default 'member',
created_at timestamptz not null default now(),
primary key (project_id, user_id)
);
```
--------------------------------
### Example Redirect Response
Source: https://makerkit.dev/docs/next-supabase-turbo/development/external-marketing-website
This is an example of a successful 301 redirect response, indicating the client should permanently move to the new URL.
```http
HTTP/1.1 301 Moved Permanently
Location: https://your-marketing-site.com/pricing
```
--------------------------------
### Install Basejump Test Helpers Extension
Source: https://makerkit.dev/docs/next-supabase-turbo/development/database-tests
Installs the necessary extension for simulating authentication and managing users in database tests.
```sql
create extension "basejump-supabase_test_helpers" version '0.0.6';
```
--------------------------------
### Install PostHog Plugin
Source: https://makerkit.dev/docs/next-supabase-turbo/analytics/posthog-analytics-provider
Install the PostHog plugin using the MakerKit CLI. This command automatically wires up the plugin in your project.
```bash
npx @makerkit/cli@latest plugins add posthog
```
--------------------------------
### Create Comments GET Route Handler
Source: https://makerkit.dev/docs/next-supabase-turbo/plugins/roadmap-plugin
Set up the GET route handler for comments using the `createFetchCommentsRouteHandler` from the Roadmap plugin.
```typescript
import { createFetchCommentsRouteHandler } from '@kit/roadmap/route-handler';
export const GET = createFetchCommentsRouteHandler;
```
--------------------------------
### Verify New Application Structure
Source: https://makerkit.dev/docs/next-supabase-turbo/development/adding-turborepo-app
Lists the contents of the newly created application directory to verify it has the same structure as the original `apps/web` folder.
```bash
ls apps/pdf-chat
```
--------------------------------
### SMTP Username Configuration Example (Resend)
Source: https://makerkit.dev/docs/next-supabase-turbo/going-to-production/supabase
Example SMTP username for email delivery. Ensure this matches your chosen SMTP provider.
```text
resend
```
--------------------------------
### Basic Server Action Example
Source: https://makerkit.dev/docs/next-supabase-turbo/data-fetching/server-actions
A fundamental Server Action demonstrating direct Supabase interaction for creating a task. Lacks built-in validation and authentication.
```typescript
'use server';
import { getSupabaseServerClient } from '@kit/supabase/server-client';
export async function createTask(formData: FormData) {
const supabase = getSupabaseServerClient();
const title = formData.get('title') as string;
const { error } = await supabase.from('tasks').insert({ title });
if (error) {
return { success: false, error: error.message };
}
return { success: true };
}
```
--------------------------------
### Add Components with Shadcn CLI
Source: https://makerkit.dev/docs/next-supabase-turbo/customization/shadcn-cli
Run this command from the 'packages/ui' directory to add components via the Shadcn CLI.
```bash
cd packages/ui
pnpm exec shadcn add
```
--------------------------------
### Registry API Usage Example
Source: https://makerkit.dev/docs/next-supabase-turbo/api/registry-api
Illustrates how environment variables map to specific registry implementations for services like billing, mailers, and CMS.
```text
Environment Variable Registry Your Code
───────────────────── ──────── ─────────
BILLING_PROVIDER=stripe → billingRegistry → getBillingGateway()
MAILER_PROVIDER=resend → mailerRegistry → getMailer()
CMS_PROVIDER=keystatic → cmsRegistry → getCmsClient()
```
--------------------------------
### Example Package Structure
Source: https://makerkit.dev/docs/next-supabase-turbo/development/adding-turborepo-package
Illustrates a typical file structure for a new feature package, including source files, components, hooks, server modules, and the `package.json`.
```treeview
packages/@kit/notifications/
├── src/
│ ├── index.ts
│ ├── client.ts
│ ├── server.ts
│ ├── components/
│ │ └── notification-bell.tsx
│ ├── hooks/
│ │ └── use-notifications.ts
│ └── server/
│ └── send-notification.ts
└── package.json
```
--------------------------------
### Get Billing Service Instance
Source: https://makerkit.dev/docs/next-supabase-turbo/billing/billing-api
Instantiate the billing gateway service. You can get the service for the configured provider or specify a provider explicitly.
```typescript
import { createBillingGatewayService } from '@kit/billing-gateway';
// Get service for the configured provider
const service = createBillingGatewayService(
process.env.NEXT_PUBLIC_BILLING_PROVIDER
);
// Or specify a provider explicitly
const stripeService = createBillingGatewayService('stripe');
```
--------------------------------
### Account API Setup
Source: https://makerkit.dev/docs/next-supabase-turbo/api
Instantiate the Account API client using the Supabase server client.
```typescript
import { createAccountsApi } from '@kit/accounts/api';
import { getSupabaseServerClient } from '@kit/supabase/server-client';
const client = getSupabaseServerClient();
const api = createAccountsApi(client);
```