### Install Dependencies (npm) Source: https://mksaas.com/docs/start This command installs all the necessary project dependencies using the npm package manager. Ensure you have npm installed and are in the project's root directory. ```bash npm install ``` -------------------------------- ### Install Dependencies (bun) Source: https://mksaas.com/docs/start This command installs all the necessary project dependencies using the bun package manager. Ensure you have bun installed and are in the project's root directory. ```bash bun install ``` -------------------------------- ### Check Node.js Installation Source: https://mksaas.com/docs/start This command verifies if Node.js is installed on your system and displays its version. Ensure Node.js is installed before proceeding with the project setup. ```bash node --version ``` -------------------------------- ### Configure Local PostgreSQL Connection String (Manual Install) Source: https://mksaas.com/docs/database This example shows the DATABASE_URL format for a PostgreSQL database installed directly on your local machine. Replace placeholders with your actual username, password, and database name. ```env DATABASE_URL="postgres://your-username:your-password@localhost:5432/database-name" ``` -------------------------------- ### Start Development Server (npm) Source: https://mksaas.com/docs/start This command starts the local development server using npm. It compiles your project and makes it available at a local URL for development and testing. ```bash npm run dev ``` -------------------------------- ### Start Development Server (bun) Source: https://mksaas.com/docs/start This command starts the local development server using bun. It compiles your project and serves it locally, allowing for quick iteration during development. ```bash bun run dev ``` -------------------------------- ### Install Dependencies (yarn) Source: https://mksaas.com/docs/start This command installs all the necessary project dependencies using the yarn package manager. Ensure you have yarn installed and are in the project's root directory. ```bash yarn install ``` -------------------------------- ### Install Dependencies (pnpm) Source: https://mksaas.com/docs/start This command installs all the necessary project dependencies using the pnpm package manager. Ensure you have pnpm installed and are in the project's root directory. ```bash pnpm install ``` -------------------------------- ### Copy Environment Example File Source: https://mksaas.com/docs/start This command copies the example environment file (`.env.example`) to a new file named `.env`. The `.env` file is used to store your project's environment-specific variables. ```bash cp env.example .env ``` -------------------------------- ### Start Development Server (pnpm) Source: https://mksaas.com/docs/start This command starts the local development server using pnpm. It will typically compile your project and make it accessible at a local URL, often http://localhost:3000. ```bash pnpm run dev ``` -------------------------------- ### Start Development Server (yarn) Source: https://mksaas.com/docs/start This command starts the local development server using yarn. It compiles your project and makes it accessible at a local URL, facilitating development and debugging. ```bash yarn dev ``` -------------------------------- ### Install and Check pnpm Source: https://mksaas.com/docs/start These commands are used to install the pnpm package manager globally if it's not already present, and then verify its installation by checking the version. pnpm is recommended for managing project dependencies. ```bash npm install -g pnpm pnpm --version ``` -------------------------------- ### Configure Development Environment Variables Source: https://mksaas.com/docs/deployment/cloudflare Copies example environment files for development. These files are essential for setting up local development configurations. Ensure you follow the Environment Setup Guide to populate these files correctly. ```shell cp env.example .env cp dev.vars.example .dev.vars ``` -------------------------------- ### Check Git Installation Source: https://mksaas.com/docs/start This command checks if Git is installed on your system and outputs its version. Git is essential for version control and cloning the project repository. ```bash git --version ``` -------------------------------- ### Configure Local PostgreSQL Connection String Source: https://mksaas.com/docs/database This is an example of the DATABASE_URL for a locally running PostgreSQL instance via Docker. Adjust the password and port if necessary. ```env DATABASE_URL="postgres://postgres:mypassword@localhost:5432/postgres" ``` -------------------------------- ### Clone MkSaaS Repository (Forked) Source: https://mksaas.com/docs/start This command clones your forked MkSaaS repository from GitHub to your local machine. Replace 'your-username' and 'your-project-name' with your GitHub username and desired project name. This is the recommended method for starting a new project. ```bash git clone https://github.com/your-username/mksaas-template.git your-project-name cd your-project-name ``` -------------------------------- ### Client-Side Authentication Operations with Auth Client Source: https://mksaas.com/docs/auth Provides examples of common authentication operations using the auth client, including signing in with email/password and social providers, and signing out. ```javascript import { signIn, signOut } from '@/lib/auth-client'; // Sign in with email and password signIn.emailAndPassword({ email: 'user@example.com', password: 'password123', }); // Sign in with social provider signIn.social({ provider: 'google', }); // Sign out signOut(); ``` -------------------------------- ### Configure PostgreSQL Connection String - Supabase Source: https://mksaas.com/docs/database This snippet provides an example of the DATABASE_URL format for connecting to a Supabase PostgreSQL database. You will need to obtain your specific connection string from the Supabase dashboard. ```env # Example Supabase connection string DATABASE_URL="postgres://postgres:your-password@db.something.supabase.co:6543/postgres" ``` -------------------------------- ### Features Configuration Example (TypeScript) Source: https://mksaas.com/docs/config/website Example configuration for enabling or disabling various website features. This includes options like user upgrade cards, avatar updates, affiliate integrations, chat services, and CAPTCHA. ```typescript features: { enableUpgradeCard: true, enableUpdateAvatar: true, enableAffonsoAffiliate: false, enablePromotekitAffiliate: false, enableDatafastRevenueTrack: false, enableCrispChat: process.env.NEXT ``` -------------------------------- ### Configure PostgreSQL Connection String - .env Source: https://mksaas.com/docs/database This snippet shows an example of how to set the DATABASE_URL environment variable for connecting to a Neon PostgreSQL database. Ensure you replace placeholders with your actual credentials and database information. ```env # Example Neon connection string DATABASE_URL="postgres://user:password@ep-something.us-east-2.aws.neon.neon.tech/database?sslmode=require" ``` -------------------------------- ### Run PostgreSQL in Docker Source: https://mksaas.com/docs/database This Docker command starts a PostgreSQL container named 'drizzle-postgres' with a specified password and exposes the default PostgreSQL port. This is useful for local development. ```bash docker run --name drizzle-postgres -e POSTGRES_PASSWORD=mypassword -d -p 5432:5432 postgres ``` -------------------------------- ### Changelog Entry MDX Example Source: https://mksaas.com/docs/pages Example of an MDX file for a changelog entry, detailing a specific release. It includes frontmatter with version information and the release notes in Markdown. ```markdown --- title: "Initial Release" description: "Our first official release with core features and functionality" date: "2024-03-01" version: "v1.0.0" published: true --- ### Core Features We're excited to announce the initial release of our platform with the following core features: - **User Authentication**: Secure login and registration with email verification - **Dashboard**: Intuitive dashboard for managing your projects and resources ... more content ... ``` -------------------------------- ### Multi-language Documentation Page (English) Source: https://mksaas.com/docs/docs An example of an English documentation page using MDX format. It includes standard frontmatter and markdown content. ```mdx --- title: Getting Started description: Quick start guide for setting up your MkSaaS project icon: Rocket --- Content in English... ``` -------------------------------- ### Clone MkSaaS Repository (Direct) Source: https://mksaas.com/docs/start This command clones the MkSaaS template repository directly from GitHub. It also includes a command to remove the default remote origin, useful if you intend to set up your own remote repository immediately. ```bash git clone https://github.com/MkSaaSHQ/mksaas-template.git your-project-name cd your-project-name git remote remove origin ``` -------------------------------- ### Preview Emails Locally Source: https://mksaas.com/docs/email Run the `pnpm run email` command to start a local server for previewing email templates in your browser. ```bash pnpm run email ``` -------------------------------- ### Connect to MySQL using Drizzle ORM Source: https://mksaas.com/docs/database Connects to a MySQL database using the 'mysql2/promise' driver and Drizzle ORM. This snippet shows the necessary installation command and the code to establish the connection and initialize the Drizzle client. ```typescript // 1. Install: npm install drizzle-orm mysql2 // 2. Update src/db/index.ts import { drizzle } from 'drizzle-orm/mysql2'; import mysql from 'mysql2/promise'; const connection = await mysql.createConnection(process.env.DATABASE_URL!); const db = drizzle(connection); export default db; ``` -------------------------------- ### Install Stripe CLI for Local Webhook Development (Shell) Source: https://mksaas.com/docs/payment Provides commands to install the Stripe CLI using various package managers (npm, yarn, pnpm, brew). The Stripe CLI is essential for forwarding webhook events from Stripe to a local development server. ```shell pnpm install -g stripe/stripe-cli ``` ```shell npm install -g stripe/stripe-cli ``` ```shell yarn global add stripe/stripe-cli ``` ```shell brew install stripe/stripe-cli/stripe ``` -------------------------------- ### Install and Login Wrangler CLI - PNPM & Cloudflare Source: https://mksaas.com/docs/deployment/cloudflare This sequence installs the Wrangler CLI globally using PNPM and then logs you into your Cloudflare account. Authentication is required for deploying and managing Cloudflare Workers. ```bash pnpm install -g wrangler wrangler login ``` -------------------------------- ### Connect to PostgreSQL using Drizzle ORM Source: https://mksaas.com/docs/database Establishes a database connection using the 'postgres-js' driver for PostgreSQL. It initializes the Drizzle ORM client with the provided schema. This function is designed to be called to get an existing database instance or create a new one if it doesn't exist. ```typescript import { drizzle } from 'drizzle-orm/postgres-js'; import postgres from 'postgres'; import * as schema from './schema'; let db: ReturnType | null = null; export async function getDb() { if (db) return db; const connectionString = process.env.DATABASE_URL!; const client = postgres(connectionString, { prepare: false }); db = drizzle(client, { schema }); return db; } ``` -------------------------------- ### Multi-language Meta File (Chinese) Source: https://mksaas.com/docs/docs Example of a meta JSON file for a specific locale (Chinese). It provides localized titles and descriptions for the documentation structure. ```json { "title": "文档", "pages": ``` -------------------------------- ### Configure Umami Analytics Environment Variables Source: https://mksaas.com/docs/analytics This snippet displays the required environment variables for integrating Umami analytics. You need your Umami Website ID and the script URL. ```env NEXT_PUBLIC_UMAMI_WEBSITE_ID="YOUR-WEBSITE-ID" NEXT_PUBLIC_UMAMI_SCRIPT="https://cloud.umami.is/script.js" ``` -------------------------------- ### Configure GitHub OAuth Environment Variables (dotenv) Source: https://mksaas.com/docs/auth Sets up environment variables for GitHub OAuth integration. These variables, GITHUB_CLIENT_ID and GITHUB_CLIENT_SECRET, are obtained after registering an OAuth application on GitHub. ```env BETTER_AUTH_SECRET="YOUR-BETTER-AUTH-SECRET" GITHUB_CLIENT_ID="YOUR-GITHUB-CLIENT-ID" GITHUB_CLIENT_SECRET="YOUR-GITHUB-CLIENT-SECRET" ``` -------------------------------- ### Initialize Database with Drizzle ORM (npm) Source: https://mksaas.com/docs/database These commands initialize the Drizzle ORM client and migrate the database schema using npm. This process generates the Drizzle client and applies the necessary database migrations. ```bash npm run db:generate # Generate the Drizzle client npm run db:migrate # Migrate the database ``` -------------------------------- ### Initialize Database with Drizzle ORM (bun) Source: https://mksaas.com/docs/database These commands initialize the Drizzle ORM client and migrate the database schema using bun. This process generates the Drizzle client and applies the necessary database migrations. ```bash bun run db:generate # Generate the Drizzle client bun run db:migrate # Migrate the database ``` -------------------------------- ### Landing Page Structure Example (TypeScript) Source: https://mksaas.com/docs/landingpage This code demonstrates how to assemble a complete landing page by importing and rendering various pre-built components from the `blocks` directory. It showcases a typical structure for a landing page, combining sections like Hero, Features, Testimonials, Pricing, CallToAction, and Footer. ```typescript import HeroSection from '@/components/blocks/hero/hero'; import Features from '@/components/blocks/features/features'; import Testimonials from '@/components/blocks/testimonials/testimonials'; import Pricing from '@/components/blocks/pricing/pricing'; import CallToAction from '@/components/blocks/calltoaction/cta'; import Footer from '@/components/blocks/footer/footer'; export default function LandingPage() { return ( <>