Extend npx create-payload-app with a frontend --template and/or --example

[3m1l1a]

Question

Where is the source code for create-payload-app?
I'm interested in extending the scaffolding tool to include frontend frameworks and themes.

Frameworks

Next.js

create-next-app

Next do have official examples for connecting a headless cms, but not Payload yet.
official Next.js examples

Payload's nextjs-custom-server boilerplate

• js-blank
• js-blog
• js-todo
• js-portfolio
• ts-blank
• ts-blog statically generated
• ts-todo
• ts-portfolio

Astro.build

yarn create astro
Official Astro.build themes
Astro guide Payload CMS

Lambdo Labs Payload CMS and Astro template

• js-blank
• js-blog
• js-todo
• js-portfolio
• ts-blank
• ts-blog
• ts-todo
• ts-portfolio

Idea and request

Feature: extended help output with short flags and options

$ npx create-payload-app --help
Payload 1.2.0, the most powerful Typescript CMS.

Usage:
    
    Synopsis:
        $ npx create-payload-app[@Version] [Options]

    Example:
        Payload setup wizard:
        $ npx create-payload-app

        Create a named blank Payload version 1.2.0 and Nextjs app:
        $ npx [email protected] -n my-payload-app -t blank -f nextjs

Options:

    -d, --demo-content                  Also install demo content for specific template, framework and/or example
    
    -f, --framework                     Choose specific framework. Available frameworks: nextjs, astro
    
    -h, --help                          Show this help
    
    -l, --language                      Choose specific language. Available languages: javascript [js], typescript [ts]
      
    -n, --name my-payload-app           Set project name
      
    -e --example example-name           Choose specific white labeled example. Available examples: blank, blog, todo, portfolio

    -t --template template-name         Choose specific pre white labeled template. Available templates: blank, blog, todo, portfolio

    -V, --version                       Show create-payload-app version.
    
    -U, --use-npm                       Use npm to install dependencies

    -N, --no-deps                       Do not install any dependencies

Feature: Scaffold a blank Payload and Nextjs typescript app

npx create-payload-app -n next-blank -t blank -f nextjs -l ts

Welcome to Payload. Let's create a project!

✔ Choose project name › next-blank
✔ Choose project template › blank
✔ Choose project framework › nextjs
✔ Choose language › ts
✔ Enter MongoDB connection … mongodb://localhost/next-blank

Creating a new Payload app in /home/3m1l1a/dev/create-payload-app/next-blank

✔ Project directory created
✔ Dependencies installed
✔ .env file created
✔ Payload project successfully created

★ Launch Application:
- cd ./next-blank
- yarn dev or docker-compose up

★ View Application:
- Next.js: http://localhost:3000
- Payload: http://localhost:3000/admin
- Mongo Express: http://localhost:8081

★ Read Documentation:
- Getting Started
- Configuration

[denolfe]

All great suggestions @3m1l1a .

We have work underway to get Payload into the Next.js examples repo. That PR should be opened shortly.

Regarding additional functionality, we've discussed internally about having a differentiation between starters and full demos. I like your idea of optionally adding a front-end. However, I have concerns of how maintainable that would be in the long-term.

In the meantime, we've open-sourced create-payload-app code here: https://github.com/payloadcms/create-payload-app.

[3m1l1a]

Great to hear that Payload is on it's way into Next,js example repo.

I do share your concerns @denolfe . It might be difficult to maintain in the long-term, there is a lot of frameworks and themes. Payload should probably stay with one framework. Some sort of community plugin system would probably be better for the rest. My main idea with the front-end was to have something like WordPress has with their official yearly themes. Which would add this alternatives to create-payload-app:

• No front-end
• No front-end with your demo
• Official starter, kind of already exist here: next-custom-server
• Official full demo

Wonderful! I'will start scaffolding Astro's official themes and think more about a sustainable sulution.