Skip to content

Getting Started

Prerequisites

  • Node.js 18+ and pnpm
  • MongoDB database (local or cloud)
  • Git

Quick Start

To spin up this project locally, follow these steps:

Installation & Setup

  1. Fork the repository

    Open this Link in your Browser to fork the repo: https://github.com/trieb-work/payblocks/fork After forking make sure to clone the repo to your dev machine.

    Note this is a private repo, to get access you need to buy the Payblocks addon from Shadcn Blocks

  2. Configure Package Manager

    After cloning your repo make sure to install the correct package manager version by enabeling corepack. Therefore open your repo in a console and execute the following:

    Terminal window
    npm install corepack
    corepack enable
    pnpm -v

    Your pnpm version should now match the version specified in our package.json

  3. Install dependencies:

    Terminal window
    pnpm install
  4. Copy the environment variables:

    Terminal window
    cp .env.example .env
  5. Set up your MongoDB database:

    • Install MongoDB locally or use a hosted service such as Atlas MongoDB Cloud Account or Vercel MongoDB Integration
    • After setting up MongoDB update your .env file with the MongoDB connection string:
      MONGODB_URI=your_connection_string
      Make sure to also include the credentials and database name in the connection URL. A full remote connection string should look like this: mongodb+srv://testUser:password1234@cluster0.3fjkv.mongodb.net/EXAMPLE_DB_NAME?retryWrites=true&w=majority&appName=Cluster0. A local connection string is often a bit simpler like this: mongodb://localhost:27017/EXAMPLE_DB_NAME
  6. Start the development server:

    Terminal window
    pnpm dev
  7. Visit your application:

  8. Seed the database (optional):

  • Click on the “Seed DB” button in the Admin panel home page to create some starter pages.
  • This step is recommended for those not familiar with Payload CMS.
  • If seeding was successfull, you will see some new content on the homepage http://localhost:3000/
  • You can now visit the admin panel pages collection to edit the new demo pages http://localhost:3000/admin/collections/pages
  1. Change all secrets (optional but recommended):
  • Open your .env file and change all secrets. Create some random string for all these secrets: PAYLOAD_SECRET, PAYLOAD_PUBLIC_DRAFT_SECRET, NEXT_PRIVATE_DRAFT_SECRET, REVALIDATION_KEY, NEXT_PRIVATE_REVALIDATION_KEY, CRON_SECRET