verve :: starter kit

Pre-configured Starter Kit with PayloadCMS and SvelteKit.
Designed to be a starting point for new projects, with a few common features already set up and ready to go.

Table of Contents

• Features
• Getting Started
• Configuration
  • PayloadCMS
  • SvelteKit
• Development
  • Workflows
    • Adding a new block
• Deployment
• License

Features

• Already set up with PayloadCMS and SvelteKit.
• Pre-configured with a few common features.
• Ready to build out pages and blocks.
• Easy to customize and extend.
• Optimized for rapid development and deployment.

Getting Started

To initiate the project setup, clone or fork this repository. Then, install the necessary dependencies and set up the environment as follows:

git clone https://github.com/zapstudios/verve.git
cd verve
pnpm install

Configuration

Initial configuration is straightforward. Follow the steps below to prepare your development environment:

PayloadCMS

Set up your PayloadCMS project by configuring the necessary environment variables located in the .env file. Start by renaming .env.example in apps/cms to .env and populate it with your specific details:

• DATABASE_URI - The connection string for your MongoDB database.
• PAYLOAD_SECRET - A secret key for encrypting and decrypting data.
• PAYLOAD_PUBLIC_SERVER_URL - The public URL for your PayloadCMS server. (default is http://localhost:3000)

SvelteKit

Similar to PayloadCMS, configure SvelteKit's environment variables found in the .env file. Rename .env.example in apps/web to .env and input your details:

• PAYLOAD_PUBLIC_SERVER_URL - The public URL for your PayloadCMS server. (default is http://localhost:3000)

Development

Kickstart the development servers for both CMS and site by running:

pnpm dev

This command launches the development server for the CMS accessible at http://localhost:3000 and the site at http://localhost:5173.

Workflows

Adding a new block

To introduce a new block into the CMS:

1. In apps/cms/src/blocks, create a file named text-block.ts.
   

2. Populate the file with the following template code:

// apps/cms/src/blocks/text-block.ts

import { Block } from "payload/types";

export const textBlock: Block = {
  slug: "text-block",
  labels: {
    singular: "Text Block",
    plural: "Text Blocks",
  },
  fields: [],
};

3. Include this block in your chosen layout. For demonstration, add it to tabs-hero-layout.

// apps/cms/src/fields/tabs-hero-layout.ts

import { textBlock } from "../blocks/text-block";

const blocks = [, /* other blocks */ textBlock];

4. Create a corresponding Svelte component in apps/web/src/lib/components/blocks, for example, text-block.svelte.
   

5. Implement the block component as required. Example:

<!-- apps/web/src/lib/components/blocks/text-block.svelte -->

<script lang="ts">
  import type { Page } from "cms/types";

  type Props = Extract<Page["layout"][0], { blockType: "textBlock" }>;

  // Typesafe way to get the content of the block
  const { content } = $$props as Props;
</script>

<div class="text-block">
  <p>{content}</p>
</div>

6. Register the new block in the Barrel file apps/web/src/lib/components/blocks/index.ts:

// apps/web/src/lib/components/blocks/index.ts

export { default as TextBlock } from "./text-block.svelte";

7. Define the GraphQL query for the block in apps/web/src/lib/api/graphql/blocks.ts and incorporate it into the page layout query within apps/web/src/lib/api/graphql/pages.ts.

// apps/web/src/lib/api/graphql/blocks.ts

export const TEXT_BLOCK = `
    ...on TextBlock {
        content
    }
`;

// apps/web/src/lib/api/graphql/pages.ts

import { TEXT_BLOCK } from "./blocks";

export const PAGE = `
  query Page($slug: String, $draft: Boolean) {
    Pages(where: { slug: { equals: $slug }}, limit: 1, draft: $draft) {
      docs {
        ...
        layout {
          ...
          ${TEXT_BLOCK}
        }
      }
    }
  }
`;

8. Your block is now ready for use within the CMS. Add a new page,

Deployment

Deployment instructions will be provided soon. Stay tuned for updates.

License

his project is distributed under the GPL-3.0 License. For more details, please refer to the LICENSE document included in this repository.

This license grants you the freedom to modify, distribute, and use the software for both private and commercial purposes under the conditions that any modifications or derivative works are also bound by the same license and that you include proper attribution to the original authors.

By using, distributing, or contributing to this project, you agree to abide by the terms set forth in the GPL-3.0 License.