feat(templates): update templates for 2.0 (#3358)

* chore: add reinstall script

* feat(templates): update blank template

* chore(templates): update website and ecommerce

package.json

@@ -23,6 +23,7 @@
     "release:minor": "release-it minor",
     "release:patch": "release-it patch",
     "pretest": "pnpm build",
+    "reinstall": "./scripts/reinstall.sh",
     "test": "pnpm test:int && pnpm test:components && pnpm test:e2e",
     "test:components": "cross-env jest --config=jest.components.config.js",
     "test:e2e": "npx playwright install --with-deps && ts-node -T ./test/runE2E.ts",

scripts/reinstall.sh

@@ -0,0 +1,9 @@
+#!/usr/bin/env bash
+
+# Deletes all node_modules folders and reinstalls all dependencies
+
+set -ex
+
+root_dir=$(git rev-parse --show-toplevel || echo .)
+find "$root_dir" -name 'node_modules' -type d -prune -exec rm -rf '{}' +
+pnpm install

templates/blank/.env.example

@@ -1,2 +1,2 @@
-MONGODB_URI=mongodb://127.0.0.1/payload-template-blank
+DATABASE_URI=mongodb://127.0.0.1/payload-template-blank
 PAYLOAD_SECRET=YOUR_SECRET_HERE

templates/blank/src/payload.config.ts

@@ -1,7 +1,11 @@
-import { buildConfig } from 'payload/config'
 import path from 'path'
-import Users from './collections/Users'
+
 import { payloadCloud } from '@payloadcms/plugin-cloud'
+import { mongooseAdapter } from '@payloadcms/db-mongodb' // database-adapter-import
+import { webpackBundler } from '@payloadcms/bundler-webpack' // bundler-import
+import { buildConfig } from 'payload/config'
+
+import Users from './collections/Users'
 
 export default buildConfig({
   admin: {
@@ -15,4 +19,10 @@ export default buildConfig({
     schemaOutputFile: path.resolve(__dirname, 'generated-schema.graphql'),
   },
   plugins: [payloadCloud()],
+  // database-adapter-config-start
+  db: mongooseAdapter({
+    url: process.env.DATABASE_URI,
+  }),
+  // database-adapter-config-end
+  bundler: webpackBundler(), // bundler-config
 })

templates/blank/src/server.ts

@@ -13,7 +13,6 @@ const start = async () => {
   // Initialize Payload
   await payload.init({
     secret: process.env.PAYLOAD_SECRET,
-    mongoURL: process.env.MONGODB_URI,
     express: app,
     onInit: async () => {
       payload.logger.info(`Payload Admin URL: ${payload.getAdminURL()}`)

templates/ecommerce/.env.example

@@ -1,6 +1,6 @@
 # Payload vars
 PORT=3000
-MONGODB_URI=mongodb://127.0.0.1/payload-template-ecommerce
+DATABASE_URI=mongodb://127.0.0.1/payload-template-ecommerce
 PAYLOAD_SECRET=712kjbkuh87234sflj98713b
 PAYLOAD_PUBLIC_SERVER_URL=http://localhost:3000
 STRIPE_SECRET_KEY=

templates/ecommerce/src/payload/payload.config.ts

@@ -1,4 +1,6 @@
 import { payloadCloud } from '@payloadcms/plugin-cloud'
+import { mongooseAdapter } from '@payloadcms/db-mongodb' // database-adapter-import
+import { webpackBundler } from '@payloadcms/bundler-webpack' // bundler-import
 import nestedDocs from '@payloadcms/plugin-nested-docs'
 import seo from '@payloadcms/plugin-seo'
 import type { GenerateTitle } from '@payloadcms/plugin-seo/types'
@@ -65,6 +67,12 @@ export default buildConfig({
   graphQL: {
     schemaOutputFile: path.resolve(__dirname, 'generated-schema.graphql'),
   },
+  // database-adapter-config-start
+  db: mongooseAdapter({
+    url: process.env.DATABASE_URI,
+  }),
+  // database-adapter-config-end
+  bundler: webpackBundler(), // bundler-config
   cors: ['https://checkout.stripe.com', process.env.PAYLOAD_PUBLIC_SERVER_URL || ''].filter(
     Boolean,
   ),

templates/ecommerce/src/server.default.ts

@@ -25,7 +25,6 @@ app.get('/', (_, res) => {
 const start = async (): Promise<void> => {
   await payload.init({
     secret: process.env.PAYLOAD_SECRET || '',
-    mongoURL: process.env.MONGODB_URI || '',
     express: app,
     onInit: () => {
       payload.logger.info(`Payload Admin URL: ${payload.getAdminURL()}`)

templates/ecommerce/src/server.ts

@@ -18,7 +18,6 @@ const PORT = process.env.PORT || 3000
 const start = async (): Promise<void> => {
   await payload.init({
     secret: process.env.PAYLOAD_SECRET || '',
-    mongoURL: process.env.MONGODB_URI || '',
     express: app,
     onInit: () => {
       payload.logger.info(`Payload Admin URL: ${payload.getAdminURL()}`)

templates/website/.env.example

@@ -1,5 +1,5 @@
 PORT=8000
-MONGODB_URI=mongodb://localhost/payload-template-website
+DATABASE_URI=mongodb://localhost/payload-template-website
 PAYLOAD_SECRET=3c543dbf662b4d12d8e30854
 PAYLOAD_PUBLIC_SERVER_URL=http://localhost:8000
 PAYLOAD_PUBLIC_SITE_URL=http://localhost:3000

templates/website/src/payload.config.ts

@@ -1,4 +1,6 @@
 import { payloadCloud } from '@payloadcms/plugin-cloud'
+import { mongooseAdapter } from '@payloadcms/db-mongodb' // database-adapter-import
+import { webpackBundler } from '@payloadcms/bundler-webpack' // bundler-import
 import FormBuilder from '@payloadcms/plugin-form-builder'
 import nestedDocs from '@payloadcms/plugin-nested-docs'
 import redirects from '@payloadcms/plugin-redirects'
@@ -50,6 +52,12 @@ export default buildConfig({
   graphQL: {
     schemaOutputFile: path.resolve(__dirname, 'generated-schema.graphql'),
   },
+  // database-adapter-config-start
+  db: mongooseAdapter({
+    url: process.env.DATABASE_URI,
+  }),
+  // database-adapter-config-end
+  bundler: webpackBundler(), // bundler-config
   ...(process.env.PAYLOAD_PUBLIC_SITE_URL
     ? {
         cors: [process.env.PAYLOAD_PUBLIC_SITE_URL].filter(Boolean),

templates/website/src/server.ts

@@ -16,7 +16,6 @@ app.get('/', (_, res) => {
 const start = async (): Promise<void> => {
   await payload.init({
     secret: process.env.PAYLOAD_SECRET,
-    mongoURL: process.env.MONGODB_URI,
     express: app,
     onInit: () => {
       payload.logger.info(`Payload Admin URL: ${payload.getAdminURL()}`)