{"id":12479,"date":"2024-12-27T09:23:36","date_gmt":"2024-12-27T09:23:36","guid":{"rendered":"https:\/\/myprojects.advchaweb.com\/?p=12479"},"modified":"2024-12-28T02:43:01","modified_gmt":"2024-12-28T02:43:01","slug":"install-payload-cms","status":"publish","type":"post","link":"https:\/\/myprojects.advchaweb.com\/index.php\/2024\/12\/27\/install-payload-cms\/","title":{"rendered":"Install Payload CMS"},"content":{"rendered":"

Ref: https:\/\/payloadcms.com\/docs\/getting-started\/installation<\/p>\n

Check current node version
\n[codesyntax lang=”bash”]<\/p>\n

satria@teddy:~$ node -v\r\nv16.15.1<\/pre>\n
[\/codesyntax]<\/p>\n
Use node version 20.9.0+
\nCheck available node version
\n[codesyntax lang=”bash”]<\/p>\n
satria@teddy:~$ nvm alias \r\ndefault -> 18.18.2 (-> v18.18.2)\r\niojs -> N\/A (default)\r\nunstable -> N\/A (default)\r\nnode -> stable (-> v20.15.1) (default)\r\nstable -> 20.15 (-> v20.15.1) (default)\r\nlts\/* -> lts\/iron (-> N\/A)\r\nlts\/argon -> v4.9.1 (-> N\/A)\r\nlts\/boron -> v6.17.1 (-> N\/A)\r\nlts\/carbon -> v8.17.0 (-> N\/A)\r\nlts\/dubnium -> v10.24.1 (-> N\/A)\r\nlts\/erbium -> v12.22.12 (-> N\/A)\r\nlts\/fermium -> v14.21.3 (-> N\/A)\r\nlts\/gallium -> v16.20.2 (-> N\/A)\r\nlts\/hydrogen -> v18.20.4\r\nlts\/iron -> v20.18.0 (-> N\/A)<\/pre>\n
[\/codesyntax]<\/p>\n
So use node stable 20.15.1
\n[codesyntax lang=”bash”]<\/p>\n
satria@teddy:~$ nvm use stable\r\nNow using node v20.15.1 (npm v10.7.0)\r\nsatria@teddy:~$ node -v\r\nv20.15.1<\/pre>\n
[\/codesyntax]<\/p>\n
Create a new dir ‘PayloadCMS’
\n[codesyntax lang=”bash”]<\/p>\n
satria@teddy:~$ cd Documents\/projects\/\r\nsatria@teddy:~\/Documents\/projects$ mkdir payloadcms\r\nsatria@teddy:~\/Documents\/projects$ cd payloadcms\/<\/pre>\n
[\/codesyntax]
\nInstall the Payload CMS (blank)
\n[codesyntax lang=”bash”]<\/p>\n
satria@teddy:~\/Documents\/projects\/payloadcms$ npx create-payload-app\r\nNeed to install the following packages:\r\ncreate-payload-app@3.11.0\r\nOk to proceed? (y) \r\n\r\n\r\n\r\n\u250c   create-payload-app \r\n\u2502\r\n\u25c7   \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\r\n\u2502                                               \u2502\r\n\u2502  Welcome to Payload. Let's create a project!  \u2502\r\n\u2502                                               \u2502\r\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\r\n\u2502\r\n\u25c7  Project name?\r\n\u2502  PayloadTest\r\n\u2502\r\n\u25c7  Choose project template\r\n\u2502  blank\r\n\u2502\r\n\u25c7  Select a database\r\n\u2502  MongoDB\r\n\u2502\r\n\u25c7  Enter MongoDB connection string\r\n\u2502  mongodb:\/\/127.0.0.1\/payload-test\r\n\u2502\r\n\u2502\r\n\u25c7  Using npm.\r\n\u2502  \r\n\u25c7  Successfully installed Payload and dependencies\r\n\u2502\r\n\u25b2  ? Failed to initialize git repository.\r\n\u2502\r\n\u25c7  [DEBUG] .env.example file successfully updated\r\n\u2502\r\n\u25c7  [DEBUG] .env file successfully created or updated\r\n\u2502\r\n\u25c7  Payload project successfully created!\r\n\u2502\r\n\u25c7   Next Steps  \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\r\n\u2502                                                     \u2502\r\n\u2502                                                     \u2502\r\n\u2502  Launch Application:                                \u2502\r\n\u2502                                                     \u2502\r\n\u2502    - cd .\/payload-test                              \u2502\r\n\u2502    - npm run dev or follow directions in README.md  \u2502\r\n\u2502                                                     \u2502\r\n\u2502  Documentation:                                     \u2502\r\n\u2502                                                     \u2502\r\n\u2502    - Getting Started                                \u2502\r\n\u2502    - Configuration                                  \u2502\r\n\u2502                                                     \u2502\r\n\u2502                                                     \u2502\r\n\u2502                                                     \u2502\r\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\r\n\u2502\r\n\u2514   Have feedback?  Visit us on GitHub.\r\n\r\nnpm notice\r\nnpm notice New major version of npm available! 10.7.0 -> 11.0.0\r\nnpm notice Changelog: https:\/\/github.com\/npm\/cli\/releases\/tag\/v11.0.0\r\nnpm notice To update run: npm install -g npm@11.0.0\r\nnpm notice<\/pre>\n
[\/codesyntax]<\/p>\n
Launch the App
\n[codesyntax lang=”bash”]<\/p>\n
satria@teddy:~\/Documents\/projects\/payloadcms$ cd .\/payload-test\/\r\nsatria@teddy:~\/Documents\/projects\/payloadcms\/payload-test$ npm run dev\r\n\r\n> payload-test@1.0.0 dev\r\n> cross-env NODE_OPTIONS=--no-deprecation next dev\r\n\r\n   \u25b2 Next.js 15.1.0\r\n   - Local:        http:\/\/localhost:3000\r\n   - Network:      http:\/\/192.168.1.23:3000\r\n   - Environments: .env\r\n   - Experiments (use with caution):\r\n     \u00b7 turbo\r\n\r\n \u2713 Starting...\r\n \u2713 Ready in 1654ms<\/pre>\n
[\/codesyntax]<\/p>\n
Open it on the browser: http:\/\/localhost:3000\/
\nBecause it’s blank, so it’ll display a message<\/p>\n
404<\/h1>\n
\n
This page could not be found.<\/h2>\n
Go to the admin page http:\/\/localhost:3000\/admin
\nNote: Make sure the mongod service is already started. If not, pls start it
\n[codesyntax lang=”bash”]<\/p>\n
sudo service mongod start\r\n\r\nsudo service mongod status\r\n\u25cf mongod.service - MongoDB Database Server\r\n     Loaded: loaded (\/lib\/systemd\/system\/mongod.service; disabled; vendor prese>\r\n     Active: active (running) since Fri 2024-12-27 16:52:47 WIB; 2s ago\r\n       Docs: https:\/\/docs.mongodb.org\/manual\r\n   Main PID: 33822 (mongod)\r\n     Memory: 202.2M\r\n        CPU: 759ms\r\n     CGroup: \/system.slice\/mongod.service\r\n             \u2514\u250033822 \/usr\/bin\/mongod --config \/etc\/mongod.conf\r\n\r\nDes 27 16:52:47 teddy systemd[1]: Started MongoDB Database Server.\r\nDes 27 16:52:47 teddy mongod[33822]: {\"t\":{\"$date\":\"2024-12-27T09:52:47.606Z\"},<\/pre>\n
[\/codesyntax]<\/p>\n
For the first\/empty user, it’ll be redirected to http:\/\/localhost:3000\/admin\/create-first-user
\nwith this form
\n\"\"<\/p>\n
So fill the form with your user.
\nfor example:
\nemail: advcha@yahoo.com
\npassword: Admin@123<\/p>\n
So the admin dashboard will be like this
\n\"\"<\/p>\n
You can add any new user and media<\/p>\n
The Code
\nThe config in src\/payload.config.ts<\/p>\n
Add Payload Visual Editor –> DO THIS ON THE PAYLOAD WEB TEMPLATE
\nRef: https:\/\/www.npmjs.com\/package\/payload-visual-editor<\/p>\n
Payload Web Template
\nThe same steps:
\n[codesyntax lang=”bash”]<\/p>\n
satria@teddy:~\/Documents\/projects\/payloadcms$ npx create-payload-app\r\n\r\n\r\n\u250c   create-payload-app \r\n\u2502\r\n\u25c7   \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\r\n\u2502                                               \u2502\r\n\u2502  Welcome to Payload. Let's create a project!  \u2502\r\n\u2502                                               \u2502\r\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\r\n\u2502\r\n\u25c7  Project name?\r\n\u2502  PayloadWeb\r\n\u2502\r\n\u25c7  Choose project template\r\n\u2502  website\r\n\u2502\r\n\u25c7  Select a database\r\n\u2502  MongoDB\r\n\u2502\r\n\u25c7  Enter MongoDB connection string\r\n\u2502  mongodb:\/\/127.0.0.1\/payload-web\r\n\u2502\r\n\u2502\r\n\u25c7  Using npm.\r\n\u2502  \r\n\u25c7  Successfully installed Payload and dependencies\r\n\u2502\r\n\u25b2  ? Failed to initialize git repository.\r\n\u2502\r\n\u25c7  [DEBUG] .env.example file successfully updated\r\n\u2502\r\n\u25c7  [DEBUG] .env file successfully created or updated\r\n\u2502\r\n\u25c7  Payload project successfully created!\r\n\u2502\r\n\u25c7   Next Steps  \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\r\n\u2502                                                     \u2502\r\n\u2502                                                     \u2502\r\n\u2502  Launch Application:                                \u2502\r\n\u2502                                                     \u2502\r\n\u2502    - cd .\/payload-web                               \u2502\r\n\u2502    - npm run dev or follow directions in README.md  \u2502\r\n\u2502                                                     \u2502\r\n\u2502  Documentation:                                     \u2502\r\n\u2502                                                     \u2502\r\n\u2502    - Getting Started                                \u2502\r\n\u2502    - Configuration                                  \u2502\r\n\u2502                                                     \u2502\r\n\u2502                                                     \u2502\r\n\u2502                                                     \u2502\r\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\r\n\u2502\r\n\u2514   Have feedback?  Visit us on GitHub.<\/pre>\n
[\/codesyntax]<\/p>\n
Go to the dir ‘payload-web’ then run!
\n[codesyntax lang=”bash”]<\/p>\n
satria@teddy:~\/Documents\/projects\/payloadcms$ cd payload-web\/\r\nsatria@teddy:~\/Documents\/projects\/payloadcms\/payload-web$ npm run dev\r\n\r\n> payload-web@1.0.0 dev\r\n> cross-env NODE_OPTIONS=--no-deprecation next dev\r\n\r\n   \u25b2 Next.js 15.1.3\r\n   - Local:        http:\/\/localhost:3000\r\n   - Network:      http:\/\/192.168.1.23:3000\r\n   - Environments: .env\r\n   - Experiments (use with caution):\r\n     \u00b7 turbo\r\n\r\n \u2713 Starting...\r\n \u2713 Ready in 1679ms<\/pre>\n
[\/codesyntax]<\/p>\n
Open it in your browser: http:\/\/localhost:3000
\n\"\"<\/p>\n
The admin : http:\/\/localhost:3000\/admin
\nFor the first\/empty user, it’ll be redirected to http:\/\/localhost:3000\/admin\/create-first-user
\nSo fill the form with your user.
\nfor example:
\nemail: advcha@yahoo.com
\npassword: Admin@123
\nName: Admin<\/p>\n
So it’ll be like this
\n\"\"<\/p>\n
We can generate the example content by clicking ‘Seed your database’ –> ONLY ONCE
\non the admin dashboard http:\/\/localhost:3000\/admin
\n\"\"<\/p>\n
So the homepage will be like this
\n\"\"<\/p>\n
 <\/p>\n
Add Payload Visual Editor
\nRef: https:\/\/www.npmjs.com\/package\/payload-visual-editor
\nInstall
\n[codesyntax lang=”bash”]<\/p>\n
satria@teddy:~\/Documents\/projects\/payloadcms\/payload-web$ npm i payload-visual-editor\r\n\r\nadded 5 packages, and audited 962 packages in 5s\r\n\r\n247 packages are looking for funding\r\n  run `npm fund` for details\r\n\r\n3 vulnerabilities (2 moderate, 1 high)\r\n\r\nSome issues need review, and may require choosing\r\na different dependency.\r\n\r\nRun `npm audit` for details.<\/pre>\n
[\/codesyntax]
\nthen modify the plugin config (NOT IN src\/payload.config.ts BECAUSE IT’S ALREADY LINKED TO src\/plugins\/index.ts
\nlike this:
\n[codesyntax lang=”javascript”]<\/p>\n
...\r\n\/ import plugin\r\nimport { visualEditor } from 'payload-visual-editor'\r\n\r\n\/\/ import styles\r\nimport 'payload-visual-editor\/dist\/styles.scss'\r\n...\r\nexport const plugins: Plugin[] = [\r\n  ...\r\n  payloadCloudPlugin(),\r\n  visualEditor({\r\n    previewUrl: () => `http:\/\/localhost:3000\/pages\/preview`,\r\n    previewWidthInPercentage: 60,\r\n    collections: {\r\n      [COLLECTION_SLUG]: {\r\n        previewUrl: () => `...`, \/\/ optional individual preview url for each collection\r\n      },\r\n    },\r\n    globals: {\r\n      [GLOBAL_SLUG]: {\r\n        previewUrl: () => `...`, \/\/ optional individual preview url for each global\r\n      },\r\n    },\r\n  }),\r\n]<\/pre>\n
[\/codesyntax]<\/p>\n
But when I opened http:\/\/localhost:3000\/admin, it showed this error
\nFailed to compile
\n[codesyntax lang=”text”]<\/p>\n
.\/node_modules\/payload-visual-editor\/dist\/components\/dropdown\/index.js:30:1\r\nModule not found: Package path .\/dist\/admin\/components\/icons\/Chevron is not exported from package \/home\/satria\/Documents\/projects\/payloadcms\/payload-web\/node_modules\/payload (see exports field in \/home\/satria\/Documents\/projects\/payloadcms\/payload-web\/node_modules\/payload\/package.json)\r\n  28 | Object.defineProperty(exports, \"__esModule\", { value: true });\r\n  29 | exports.Dropdown = void 0;\r\n> 30 | const Chevron_1 = __importDefault(require(\"payload\/dist\/admin\/components\/icons\/Chevron\"));\r\n     | ^\r\n  31 | const react_1 = __importStar(require(\"react\"));\r\n  32 | const Dropdown = (props) => {\r\n  33 |     const [expanded, setExpanded] = (0, react_1.useState)(false);\r\n\r\nhttps:\/\/nextjs.org\/docs\/messages\/module-not-found\r\n\r\nImport trace for requested module:\r\n.\/node_modules\/payload-visual-editor\/dist\/components\/preview\/iframe\/index.js\r\n.\/node_modules\/payload-visual-editor\/dist\/components\/preview\/index.js\r\n.\/node_modules\/payload-visual-editor\/dist\/components\/visualEditorView\/index.js\r\n.\/node_modules\/payload-visual-editor\/dist\/index.js\r\n.\/src\/plugins\/index.ts\r\n.\/src\/payload.config.ts\r\n.\/src\/app\/(frontend)\/[slug]\/page.tsx<\/pre>\n
[\/codesyntax]<\/p>\n
it seems visual editor can’t work with payload cms version 3.x<\/p>\n
INSTALL Payload CMS version 2
\nRef: https:\/\/payloadcms.com\/docs\/v2\/getting-started\/installation
\nTo find out the payload cms package for npx, pls see https:\/\/www.npmjs.com\/package\/create-payload-app?activeTab=versions
\nactually there is no the package written for 2.x but there is a another package not 3.x. it’s 1.1.0. So use this
\n[codesyntax lang=”bash”]<\/p>\n
satria@teddy:~\/Documents\/projects\/payloadcms$ npx create-payload-app@1.1.0\r\nNeed to install the following packages:\r\ncreate-payload-app@1.1.0\r\nOk to proceed? (y) y\r\n\r\n\r\n  Welcome to Payload. Let's create a project! \r\n\r\n\u2714 Project name? \u2026 PayloadWeb2\r\n\u2714 Choose project template \u203a website\r\n\u2714 Select a database \u203a MongoDB\r\n\u2714 Enter MongoDB connection string \u2026 mongodb:\/\/127.0.0.1\/payload-web1\r\n\r\n  Creating project in \/home\/satria\/Documents\/projects\/payloadcms\/payload-web2\r\n\r\n\u2714 Dependencies installed\r\n\u2714 .env file created\r\n\u2714 Payload project successfully created\r\n\r\n  \u2605 Launch Application:\r\n\r\n    - cd .\/payload-web2\r\n    - npm run dev or follow directions in README.md\r\n\r\n  \u2605 Documentation:\r\n\r\n    - Getting Started\r\n    - Configuration<\/pre>\n
[\/codesyntax]<\/p>\n
note: this is actually payload cms version 2. you can see it in the dependencies in\u00a0 package.json file
\n[codesyntax lang=”javascript”]<\/p>\n
...\r\n\"payload\": \"^2.0.0\",\r\n...\r\n<\/pre>\n
[\/codesyntax]<\/p>\n
then go to the dir and run!
\nNote: don’t forget to start mongod service if it’s not a;ready started!
\nsudo service mongod start
\nif you need pnpm instead of npm, install it like this
\nnpm install -g pnpm<\/p>\n
[codesyntax lang=”bash”]<\/p>\n
satria@teddy:~\/Documents\/projects\/payloadcms$ cd payload-web2\/\r\nsatria@teddy:~\/Documents\/projects\/payloadcms\/payload-web2$ npm run dev\r\n\r\n> PayloadWeb2@1.0.0 dev\r\n> cross-env PAYLOAD_CONFIG_PATH=src\/payload\/payload.config.ts nodemon\r\n\r\n[nodemon] 2.0.22\r\n[nodemon] to restart at any time, enter `rs`\r\n[nodemon] watching path(s): *.*\r\n[nodemon] watching extensions: ts\r\n[nodemon] starting `ts-node src\/server.ts -- -I`\r\n[21:29:02] INFO (payload): Connected to MongoDB server successfully!\r\n[21:29:02] INFO (payload): Starting Payload...\r\n[21:29:03] INFO (payload): Payload Admin URL: http:\/\/localhost:3000\/admin\r\n[21:29:06] INFO (payload): Starting Next.js...\r\n[21:29:06] INFO (payload): Next.js App URL: http:\/\/localhost:3000\r\nwebpack built e3740fda0762bb5561d6 in 12011ms\r\nwebpack compiled successfully\r\n<w> [webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: No serializer registered for ConcatSource\r\n<w> while serializing webpack\/lib\/util\/registerExternalSerializer.webpack-sources\/ConcatSource -> Array { 2 items } -> ConcatSource\r\n \u25cb compiling \/page ...\r\n \u2713 Compiled \/page in 5.5s (1111 modules)\r\n \u2713 Compiled \/next\/revalidate\/route in 1266ms (855 modules)\r\n<\/pre>\n
[\/codesyntax]<\/p>\n
We can generate the example content by clicking ‘Seed your database’ –> ONLY ONCE
\non the admin dashboard http:\/\/localhost:3000\/admin<\/p>\n
Add Payload Visual Editor
\nRef: https:\/\/www.npmjs.com\/package\/payload-visual-editor
\n[codesyntax lang=”bash”]<\/p>\n
satria@teddy:~\/Documents\/projects\/payloadcms\/payload-web2$ npm i payload-visual-editor<\/pre>\n
[\/codesyntax]<\/p>\n
modify src\/payload\/payload.config.ts
\n[codesyntax lang=”javascript”]<\/p>\n
...\r\n\r\n\/\/ import plugin\r\nimport { visualEditor } from \"payload-visual-editor\";\r\n\r\n\/\/ import styles\r\nimport \"payload-visual-editor\/dist\/styles.scss\";\r\n\r\n...\r\n\r\nexport default buildConfig({\r\n  ...\r\n  plugins: [\r\n    ...\r\n    visualEditor({\r\n      previewUrl: () => `http:\/\/localhost:3000\/pages\/preview`,\r\n      previewWidthInPercentage: 60,\r\n      \/*collections: {\r\n        [COLLECTION_SLUG]: {\r\n          previewUrl: () => `...` \/\/ optional individual preview url for each collection\r\n        },\r\n      },\r\n      globals: {\r\n        [GLOBAL_SLUG]: {\r\n          previewUrl: () => `...` \/\/ optional individual preview url for each global\r\n        },\r\n      },*\/\r\n      collections: {\r\n        pages: {\r\n          previewUrl: () => `http:\/\/localhost:3000\/pages\/preview`, \/\/ optional individual preview url for each pages collection\r\n        },\r\n        posts: {\r\n          previewUrl: () => `http:\/\/localhost:3000\/posts\/preview`, \/\/ optional individual preview url for each posts collection\r\n        },\r\n        \/\/ Add more collections as needed\r\n      },\r\n\r\n    }),\r\n  ],\r\n})\r\n<\/pre>\n
[\/codesyntax]
\nnote: can’t use [COLLECTION_SLUG] and [GLOBAL_SLUG] because they are defined. So add ‘pages’ and ‘posts’ (probably ‘projects’ as well)
\nbut the previewUrl() still show 404 on the admin visual editor
\n\"\"<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
Ref: https:\/\/payloadcms.com\/docs\/getting-started\/installation Check current node version [codesyntax lang=”bash”] satria@teddy:~$ node -v v16.15.1 [\/codesyntax] Use node version 20.9.0+ Check available node version [codesyntax lang=”bash”] satria@teddy:~$ nvm alias default -> 18.18.2 (-> v18.18.2) iojs -> N\/A (default) unstable -> N\/A (default) node -> stable (-> v20.15.1) (default) stable -> 20.15 (-> v20.15.1) (default) lts\/* -> lts\/iron (-> … Continue reading “Install Payload CMS”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[60,13,17],"tags":[],"class_list":["post-12479","post","type-post","status-publish","format-standard","hentry","category-node","category-tutorial","category-ubuntu"],"_links":{"self":[{"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/posts\/12479","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/comments?post=12479"}],"version-history":[{"count":18,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/posts\/12479\/revisions"}],"predecessor-version":[{"id":12504,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/posts\/12479\/revisions\/12504"}],"wp:attachment":[{"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/media?parent=12479"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/categories?post=12479"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/tags?post=12479"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}