Setup & Integration Guide

This guide walks you through setting up a local copy of Remark.

Prerequisites

Before starting, clone the source code from Github.

Install Dependencies

npm install

The core packages used in the application

Package	Purpose
`Next.js`	Frontend
`convex`	Real-time database and backend
`@clerk/nextjs`	Authentication and user management
`@tiptap/react`	Rich text editor
`fumadocs`	MDX processing (for blog)

Initialize Clerk and Convex

You will need both a Convex and Clerk account. Once acquired, set up a new application on each platform, then get the following API keys.

# create a .env.local file and add the following values

NEXT_PUBLIC_CONVEX_URL=https://xxx.convex.cloud        # 1
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_xxx          # 2

CLERK_SECRET_KEY=sk_test_xxx                           # 3
CLERK_FRONTEND_API_URL=https://xxx.clerk.accounts.dev  # 4

CLERK_WEBHOOK_SECRET=whsec_xxx                         # 5

#1, #2 are generated automatically when you run npx convex dev
#3,#4 come from your Clerk dashboard. Follow the official docs here
#5 is for Clerk-Convex webhook, it involves a few extra steps. See instructions below

Don't forget to add CLERK_FRONTEND_API_URL to your Convex dashboard also. Dashboard → Settings → Environment Variables

Clerk-Convex webhook setup

Go to Clerk Dashboard → Configure → Webhooks
Add a new endpoint URL (this points to a Convex HTTP action from your Convex backend: you'll get that URL from your convex dashboard)
Subscribe to the necessary events, such as user.created, user.updated, and user.deleted. (search for user and check all actions)
Copy the secret key (starting with whsec_) to your environment variables.

Once everything is configured, initialize Convex:

npx convex dev # initialize convex
npx convex deploy # push changes to production instance

Configure Application parameters (optional)

You can update the settings at @/components/remark/comments/config/comments.ts to your preference.

export const COMMENTS_CONFIG = {
  PAGE_SIZE: 40,
  MAX_COMMENTS_PER_POST: 1200,
  WARNING_THRESHOLD: 0.9,
  ARCHIVE_DISPLAY_THRESHOLD: 500,
  MAX_REPLY_DEPTH: 3,
  MAX_CHARACTERS: 3000,
  DRAFT_SAVE_DELAY: 500,
} as const;

Thats it!

This project is free and open-source and welcomes any comments, contributions or feedbacks. When you see a bug or need some help, feel free to reach out or submit an issue on GitHub.