feat(cpa): add cloudflare template to create-payload-app command (#14091)

Adds the D1 Cloudlfare template to the CPA command - if the D1 adapter
is selected then it won't prompt for a DB connection string since this
database doesn't use one

Author: paulpopus

packages/create-payload-app/src/lib/init-next.ts

@@ -222,12 +222,9 @@ async function installAndConfigurePayload(
 }
 
 async function installDeps(projectDir: string, packageManager: PackageManager, dbType: DbType) {
-  const packagesToInstall = [
-    'payload',
-    '@payloadcms/next',
-    '@payloadcms/richtext-lexical',
-    '@payloadcms/payload-cloud',
-  ].map((pkg) => `${pkg}@latest`)
+  const packagesToInstall = ['payload', '@payloadcms/next', '@payloadcms/richtext-lexical'].map(
+    (pkg) => `${pkg}@latest`,
+  )
 
   packagesToInstall.push(`@payloadcms/db-${dbType}@latest`)
 

packages/create-payload-app/src/lib/manage-env-files.ts

@@ -25,7 +25,8 @@ const sanitizeEnv = ({
   if (
     !contents.includes('DATABASE_URI') &&
     !contents.includes('POSTGRES_URL') &&
-    !contents.includes('MONGODB_URI')
+    !contents.includes('MONGODB_URI') &&
+    databaseType !== 'd1-sqlite'
   ) {
     withDefaults += '\nDATABASE_URI=your-connection-string-here'
   }

packages/create-payload-app/src/lib/replacements.ts

@@ -53,7 +53,16 @@ const sqliteReplacement: DbAdapterReplacement = {
   packageName: '@payloadcms/db-sqlite',
 }
 
+const d1SqliteReplacement: DbAdapterReplacement = {
+  configReplacement: (envName = 'DATABASE_URI') => [
+    'db: sqliteD1Adapter({ binding: cloudflare.env.D1 }),',
+  ],
+  importReplacement: "import { sqliteD1Adapter } from '@payloadcms/db-d1-sqlite'",
+  packageName: '@payloadcms/db-d1-sqlite',
+}
+
 export const dbReplacements: Record<DbType, DbAdapterReplacement> = {
+  'd1-sqlite': d1SqliteReplacement,
   mongodb: mongodbReplacement,
   postgres: postgresReplacement,
   sqlite: sqliteReplacement,
@@ -80,12 +89,6 @@ const vercelBlobStorageReplacement: StorageAdapterReplacement = {
   packageName: '@payloadcms/storage-vercel-blob',
 }
 
-const payloadCloudReplacement: StorageAdapterReplacement = {
-  configReplacement: ['    payloadCloudPlugin(),'],
-  importReplacement: "import { payloadCloudPlugin } from '@payloadcms/payload-cloud'",
-  packageName: '@payloadcms/payload-cloud',
-}
-
 // Removes placeholders
 const diskReplacement: StorageAdapterReplacement = {
   configReplacement: [],
@@ -94,7 +97,6 @@ const diskReplacement: StorageAdapterReplacement = {
 
 export const storageReplacements: Record<StorageAdapterType, StorageAdapterReplacement> = {
   localDisk: diskReplacement,
-  payloadCloud: payloadCloudReplacement,
   vercelBlobStorage: vercelBlobStorageReplacement,
 }
 

packages/create-payload-app/src/lib/select-db.ts

@@ -4,13 +4,17 @@ import slugify from '@sindresorhus/slugify'
 import type { CliArgs, DbDetails, DbType } from '../types.js'
 
 type DbChoice = {
-  dbConnectionPrefix: `${string}/`
+  dbConnectionPrefix?: `${string}/`
   dbConnectionSuffix?: string
   title: string
   value: DbType
 }
 
 export const dbChoiceRecord: Record<DbType, DbChoice> = {
+  'd1-sqlite': {
+    title: 'Cloudflare D1 SQlite',
+    value: 'd1-sqlite',
+  },
   mongodb: {
     dbConnectionPrefix: 'mongodb://127.0.0.1/',
     title: 'MongoDB',
@@ -70,7 +74,8 @@ export async function selectDb(args: CliArgs, projectName: string): Promise<DbDe
     dbUri = initialDbUri
   } else if (args['--db-connection-string']) {
     dbUri = args['--db-connection-string']
-  } else {
+    // D1 Sqlite does not use a connection string so skip this prompt for this database
+  } else if (dbType !== 'd1-sqlite') {
     dbUri = await p.text({
       initialValue: initialDbUri,
       message: `Enter ${dbChoice.title.split(' ')[0]} connection string`, // strip beta from title

packages/create-payload-app/src/lib/templates.ts

@@ -33,6 +33,12 @@ export function getValidTemplates(): ProjectTemplate[] {
       description: 'Ecommerce template',
       url: 'https://github.com/payloadcms/payload/templates/ecommerce#main',
     },
+    {
+      name: 'with-cloudflare-d1',
+      type: 'starter',
+      description: 'Blank template with Cloudflare D1 and Workers integration',
+      url: 'https://github.com/payloadcms/payload/templates/with-cloudflare-d1#main',
+    },
     {
       name: 'plugin',
       type: 'plugin',

packages/create-payload-app/src/types.ts

@@ -67,10 +67,10 @@ interface Template {
 
 export type PackageManager = 'bun' | 'npm' | 'pnpm' | 'yarn'
 
-export type DbType = 'mongodb' | 'postgres' | 'sqlite' | 'vercel-postgres'
+export type DbType = 'd1-sqlite' | 'mongodb' | 'postgres' | 'sqlite' | 'vercel-postgres'
 
 export type DbDetails = {
-  dbUri: string
+  dbUri?: string
   type: DbType
 }
 
@@ -89,4 +89,4 @@ export type NextAppDetails = {
 
 export type NextConfigType = 'cjs' | 'esm' | 'ts'
 
-export type StorageAdapterType = 'localDisk' | 'payloadCloud' | 'vercelBlobStorage'
+export type StorageAdapterType = 'localDisk' | 'vercelBlobStorage'

templates/with-cloudflare-d1/package.json

@@ -28,7 +28,6 @@
     "@opennextjs/cloudflare": "^1.6.5",
     "@payloadcms/db-d1-sqlite": "3.58.0",
     "@payloadcms/next": "3.58.0",
-    "@payloadcms/payload-cloud": "3.58.0",
     "@payloadcms/richtext-lexical": "3.58.0",
     "@payloadcms/storage-r2": "3.58.0",
     "@payloadcms/ui": "3.58.0",

templates/with-cloudflare-d1/src/payload.config.ts

@@ -1,6 +1,5 @@
 // storage-adapter-import-placeholder
-import { sqliteD1Adapter } from '@payloadcms/db-d1-sqlite'
-import { payloadCloudPlugin } from '@payloadcms/payload-cloud'
+import { sqliteD1Adapter } from '@payloadcms/db-d1-sqlite' // database-adapter-import
 import { lexicalEditor } from '@payloadcms/richtext-lexical'
 import path from 'path'
 import { buildConfig } from 'payload'
@@ -34,9 +33,11 @@ export default buildConfig({
   typescript: {
     outputFile: path.resolve(dirname, 'payload-types.ts'),
   },
+  // database-adapter-config-start
   db: sqliteD1Adapter({ binding: cloudflare.env.D1 }),
+  // database-adapter-config-end
   plugins: [
-    payloadCloudPlugin(),
+    // storage-adapter-placeholder
     r2Storage({
       bucket: cloudflare.env.R2,
       collections: { media: true },